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
16
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
All-hands meeting4:00 PM
Dinner with Candice6:30 PM
11
12
13
14
Coffee with Ali11:30 AM
Marketing site kickoff2:30 PM
15
16
Deep work9:00 AM
One-on-one w/ Eva10:00 AM
Design sync10:30 AM
2 more...
17
Lunch with Olivia12:00 PM
18
Friday standup9:00 AM
Olivia x Riley10:00 AM
Product demo1:30 PM
19
House inspection11:00 AM
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
Product planning9:30 AM
24
Amélie's first day10:00 AM
All-hands meeting4:00 PM
25
Coffee w/ Amélie9:30 AM
Design feedback session2:30 PM
26
Half marathon7:00 AM
27
28
Team lunch12:15 PM
29
30
Deep work9:00 AM
Design sync2:30 PM
31
Amélie coffee10:00 AM
Dinner with Candice7:00 PM
1
Accountant1:45 PM
Marketing site sync2:30 PM
2

Wednesday, July 16, 2025

Deep work9:00 AM
One-on-one w/ Eva10:00 AM
Design sync10:30 AM

2 more...

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
16
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
All-hands meeting4:00 PM
Dinner with Candice6:30 PM
11
12
13
14
Coffee with Ali11:30 AM
Marketing site kickoff2:30 PM
15
16
Deep work9:00 AM
One-on-one w/ Eva10:00 AM
Design sync10:30 AM
2 more...
17
Lunch with Olivia12:00 PM
18
Friday standup9:00 AM
Olivia x Riley10:00 AM
Product demo1:30 PM
19
House inspection11:00 AM
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
Product planning9:30 AM
24
Amélie's first day10:00 AM
All-hands meeting4:00 PM
25
Coffee w/ Amélie9:30 AM
Design feedback session2:30 PM
26
Half marathon7:00 AM
27
28
Team lunch12:15 PM
29
30
Deep work9:00 AM
Design sync2:30 PM
31
Amélie coffee10:00 AM
Dinner with Candice7:00 PM
1
Accountant1:45 PM
Marketing site sync2:30 PM
2

Wednesday, July 16, 2025

Deep work9:00 AM
One-on-one w/ Eva10:00 AM
Design sync10:30 AM

2 more...

Calendar week view

Get the code
JUL
16
July 2025Week 3
Jul 14, 2025 – Jul 20, 2025
Sun13
Mon14
Tue15
Wed16
Thu17
Fri18
Sat19
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
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
11:49 AM
Sun13
Mon14
Tue15
Wed16
Thu17
Fri18
Sat19
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
Coffee with Ali
11:30 AM
Marketing site kickoff
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
11:49 AM

Calendar day view

Get the code
JUL
16
July 2025Week 3
Wednesday
Sun13
Mon14
Tue15
Wed16
Thu17
Fri18
Sat19
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
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
11:49 AM
Date pickersFile uploaders