Simple Prayer Times
Modern prayer times display with automatic location updates, real-time highlighting, and iOS-inspired design for mosque websites.
Made with Workshop
Build your own component with AI
About the Component
Prayer times are calculated using the Aladhan API with Muslim World League method. Times may vary slightly.
The component is fully customizable through the following properties found on the right panel:
City and country selection for accurate local prayer times
Optional real-time clock display that updates every second
Next prayer automatically highlighted with customizable border
Full control over background, card, text, shadows, accent, and highlight colors
Three separate font settings for header, prayer names, and times.
Border radius adjustment and responsive width/height support.
Prayer highlighting refreshes every minute, ensuring accuracy throughout the day.
Usage To use the component, simply add it to your Framer project, set your desired city and country, and customize the visual properties as needed. The prayer times will automatically fetch and display with the next prayer highlighted. Perfect for mosque websites, Islamic community portals, or any application requiring accurate prayer time displays with a clean, modern aesthetic that requires no coding knowledge.
