---
title: "Simple Prayer Times — Free Framer component · Best of Framer"
description: "Free Framer component · by The Ghavas · Text. About the Component Prayer times are calculated using the Aladhan API with Muslim World League method."
canonical: "https://framer.elliotli.dev/component/simple-prayer-times"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Simple Prayer Times

# Simple Prayer Times

[View on Framer](https://framer.com/marketplace/components/simple-prayer-times/?via=elliot-li)

![Simple Prayer Times preview image 1](https://framer.elliotli.dev/og/component/simple-prayer-times/1d586fd8cf61940a/1600x1200.jpg)

## Summary

About the Component Prayer times are calculated using the Aladhan API with Muslim World League method.

## Description

## 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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7462

## Details

- **Author**: The Ghavas
- **Published**: 2025-11-20
- **Updated**: 2025-11-20
- **Added**: 2025-11-06
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing