Open Source  Β·  MIT License  Β·  v0.1.3

πŸŒ™ ramadan-overlay

Add beautiful Ramadan celebration overlays to any website in seconds. Auto-detects Ramadan dates, five visual variants, and works with every major framework β€” zero dependencies.

npm install ramadan-overlay
React Vue Angular Svelte Vanilla JS CDN
Try the configurator ↓ View on GitHub β†—
πŸ—“οΈ
Auto-detection
Automatically activates during Ramadan using Hijri calendar calculation β€” no manual dates needed.
🎨
5 Variants
Lanterns, Sparkles, Crescent & Stars, Geometric, and Banner styles to suit any site.
⚑
Lightweight
Zero runtime dependencies, tree-shakeable, and works with any front-end stack or plain HTML.
🌍
Region-aware
Supports 10+ regional Ramadan start-date calendars with a configurable Hijri offset.

βš™οΈ Config Generator

Customise the overlay live and copy the ready-to-use code for your project

Overlay Settings
Colors
Lanterns (1 – 12)
1
2
3
4
5
6
7
8
9
10
11
12
Ceiling & Rope
Ceiling
String
Glow
Glow
Ramadan State
isRamadanβ€”
hijriYearβ€”
dayNumberβ€” 

        

          
          
        

      

    


    
    

      
Get in Touch

      

        Have questions, ideas, or want to contribute? Reach out!
      

      

        
        
          
          3mr-5aled
        

        
        
          
          3mr5aled
        

        
        
          
          3mr5aled.contact@gmail.com
        
      


      

        Built with ❀️ by
        3mr-5aled
         Β· 
        View source on GitHub
         Β· 
        npm package