Calendar components

Powerful and customizable React calendar components built for modern applications and websites. These calendars are built using React Aria and styled with Tailwind CSS.

Calendar example

Get the code
JUL
20
July 2025Week 3
Jul 1, 2025 – Jul 31, 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Coffee with Ali11:30 AM
Marketing site kickoff2:30 PM
15
16
17
All-hands meeting4:00 PM
Dinner with Candice6:30 PM
18
19
20
Ava's engagment party1:00 PM
21
Monday standup9:00 AM
Content planning11:00 AM
22
Product demo10:30 AM
Catch up w/ Alex2:30 PM
23
Deep work9:00 AM
One-on-one w/ Eva10:00 AM
Design sync10:30 AM
2 more...
24
Lunch with Olivia12:00 PM
25
Friday standup9:00 AM
Olivia x Riley10:00 AM
Product demo1:30 PM
26
House inspection11:00 AM
27
28
Team lunch12:15 PM
29
30
Product planning9:30 AM
31
Amélie's first day10:00 AM
All-hands meeting4:00 PM
1
Coffee w/ Amélie9:30 AM
Design feedback session2:30 PM
2
Half marathon7:00 AM

Sunday, July 20, 2025

Ava's engagment party1:00 PM

Installation

You can add this calendar component using our CLI or manually:

npx untitledui add calendar

Calendar examples

Below are examples and variations of this calendar component:

Calendar month view

Get the code
JUL
20
July 2025Week 3
Jul 1, 2025 – Jul 31, 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Coffee with Ali11:30 AM
Marketing site kickoff2:30 PM
15
16
17
All-hands meeting4:00 PM
Dinner with Candice6:30 PM
18
19
20
Ava's engagment party1:00 PM
21
Monday standup9:00 AM
Content planning11:00 AM
22
Product demo10:30 AM
Catch up w/ Alex2:30 PM
23
Deep work9:00 AM
One-on-one w/ Eva10:00 AM
Design sync10:30 AM
2 more...
24
Lunch with Olivia12:00 PM
25
Friday standup9:00 AM
Olivia x Riley10:00 AM
Product demo1:30 PM
26
House inspection11:00 AM
27
28
Team lunch12:15 PM
29
30
Product planning9:30 AM
31
Amélie's first day10:00 AM
All-hands meeting4:00 PM
1
Coffee w/ Amélie9:30 AM
Design feedback session2:30 PM
2
Half marathon7:00 AM

Sunday, July 20, 2025

Ava's engagment party1:00 PM

Calendar week view

Get the code
JUL
20
July 2025Week 3
Jul 14, 2025 – Jul 20, 2025
Sun20
Mon21
Tue22
Wed23
Thu24
Fri25
Sat26
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Ava's engagment party
1:00 PM
9:05 AM
Sun20
Mon21
Tue22
Wed23
Thu24
Fri25
Sat26
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Ava's engagment party
1:00 PM
Monday standup
Content planning
11:00 AM
Product demo
10:30 AM
Catch up w/ Alex
2:30 PM
Deep work
9:00 AM
One-on-one w/ Eva
10:00 AM
Design sync
10:30 AM
SEO planning
1:30 PM
Meetup event
3:00 PM
Lunch with Olivia
12:00 PM
Friday standup
Olivia x Riley
10:00 AM
Product demo
1:30 PM
House inspection
11:00 AM
9:05 AM

Calendar day view

Get the code
JUL
20
July 2025Week 3
Sunday
Sun20
Mon21
Tue22
Wed23
Thu24
Fri25
Sat26
12 AM
1 AM
2 AM
3 AM
4 AM
5 AM
6 AM
7 AM
8 AM
9 AM
10 AM
11 AM
12 PM
1 PM
2 PM
3 PM
4 PM
5 PM
6 PM
7 PM
8 PM
9 PM
10 PM
11 PM
Ava's engagment party
1:00 PM
9:05 AM
Date pickersFile uploaders