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
SEP
26
September 2025Week 4
Sep 1, 2025 – Sep 30, 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Coffee with Ali
Marketing site kickoff
23
24
25
All-hands meeting
Dinner with Candice
26
Friday standup
Olivia x Riley
Product demo
27
House inspection
28
Ava's engagment party
29
Monday standup
Content planning
30
Product demo
Catch up w/ Alex
1
Deep work
One-on-one w/ Eva
Design sync
2 more...
2
Lunch with Olivia
3
Coffee w/ Amélie
Design feedback session
4
Half marathon

Friday, September 26, 2025

Friday standup
Olivia x Riley
Product demo

Installation

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

npx untitledui@latest add calendar

Calendar examples

Below are examples and variations of this calendar component:

Calendar month view

Get the code
SEP
26
September 2025Week 4
Sep 1, 2025 – Sep 30, 2025
Sun
Mon
Tue
Wed
Thu
Fri
Sat
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Coffee with Ali
Marketing site kickoff
23
24
25
All-hands meeting
Dinner with Candice
26
Friday standup
Olivia x Riley
Product demo
27
House inspection
28
Ava's engagment party
29
Monday standup
Content planning
30
Product demo
Catch up w/ Alex
1
Deep work
One-on-one w/ Eva
Design sync
2 more...
2
Lunch with Olivia
3
Coffee w/ Amélie
Design feedback session
4
Half marathon

Friday, September 26, 2025

Friday standup
Olivia x Riley
Product demo

Calendar week view

Get the code
SEP
26
September 2025Week 4
Sep 22, 2025 – Sep 28, 2025
Sun21
Mon22
Tue23
Wed24
Thu25
Fri26
Sat27
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
Friday standup
Olivia x Riley
Product demo
Sun21
Mon22
Tue23
Wed24
Thu25
Fri26
Sat27
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
Marketing site kickoff
All-hands meeting
Dinner with Candice
Friday standup
Olivia x Riley
Product demo
House inspection

Calendar day view

Get the code
SEP
26
September 2025Week 4
Friday
Sun21
Mon22
Tue23
Wed24
Thu25
Fri26
Sat27
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
Friday standup
Olivia x Riley
Product demo
Date pickersFile uploaders