Prayer Times
A beautiful, RTL-aware component to display Islamic prayer times. Perfect for GCC applications with full bilingual support and multiple layout variants.
Preview
Prayer Times
Installation
Copy and paste the component code into your project:
Dependencies: This component uses Card, Badge, and Lucide icons which should already be installed in your project.
Usage
Examples
Default
The default variant with location, date, and next prayer countdown.
Prayer Times
Compact
A more condensed layout perfect for sidebars or widgets.
Prayer Times
Detailed
A more spacious layout with larger text, ideal for prominent displays.
Prayer Times
Without Countdown
Simple display of prayer times without next prayer countdown.
Prayer Times
Notification Variant
Special UI for Adhan notifications with dismiss and play adhan actions. Perfect for alerts when prayer time arrives.
Prayer Time
Maghrib
Time
18:05
Integration with Calculation Libraries
This component is UI-only and accepts prayer times as props. You can integrate it with any prayer time calculation library. Here's an example using the popular adhan library:
Install the adhan library: npm install adhan
Props
| Name | Type | Default | Description |
|---|---|---|---|
prayersRequired | Prayer[] | — | Array of prayer objects with name, nameAr, and time properties. |
nextPrayer | string | undefined | Name of the next prayer to highlight. Should match a prayer name in the prayers array. |
countdown | string | undefined | Countdown timer to next prayer in format "HH:MM:SS" or "MM:SS". |
location | string | undefined | Location name in English (e.g., "Riyadh"). |
locationAr | string | undefined | Location name in Arabic (e.g., "الرياض"). |
date | string | undefined | Date in English (e.g., "November 6, 2025"). |
dateAr | string | undefined | Date in Arabic (e.g., "٥ جمادى الأولى ١٤٤٧"). |
variant | "default" | "compact" | "detailed" | "notification" | "default" | Visual variant affecting spacing and text size. "notification" shows an Adhan alert UI. |
onDismiss | () => void | undefined | Callback when notification is dismissed (notification variant only). |
showPlayAdhan | boolean | false | Show play adhan button (notification variant only). |
onPlayAdhan | () => void | undefined | Callback when play adhan is clicked (notification variant only). |
className | string | undefined | Additional CSS classes for the wrapper card. |
Prayer Type
Accessibility
The Prayer Times component follows accessibility best practices:
- Semantic HTML: Uses proper heading hierarchy and semantic elements.
- Visual Indicators: Color dots and borders provide visual cues for the next prayer.
- High Contrast: Text and icons maintain proper contrast ratios for readability.
- Tabular Numbers: Uses tabular-nums for consistent time alignment.
- Responsive Design: Adapts to different screen sizes while maintaining readability.
RTL Considerations
This component is built with RTL-first principles and automatically adapts to the current text direction:
- Automatic Language Detection: Displays Arabic names (nameAr) in RTL mode and English names in LTR mode.
- Logical Properties: Uses margin-inline-start (ms-*) and margin-inline-end (me-*) for proper spacing in both directions.
- Text Alignment: Uses text-start and text-end instead of left/right alignment.
- Icon Positioning: Icons automatically position correctly in both LTR and RTL layouts.
- Badge Labels: "Next" badge shows "الآن" (Now) in Arabic mode.