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

Wednesday, August 27, 2025

Deep work
One-on-one w/ Eva
Design sync

2 more...

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

Wednesday, August 27, 2025

Deep work
One-on-one w/ Eva
Design sync

2 more...

Calendar week view

Get the code
AUG
27
August 2025Week 4
Aug 25, 2025 – Aug 31, 2025
Sun24
Mon25
Tue26
Wed27
Thu28
Fri29
Sat30
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
One-on-one w/ Eva
Design sync
SEO planning
Meetup event
Sun24
Mon25
Tue26
Wed27
Thu28
Fri29
Sat30
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
Deep work
One-on-one w/ Eva
Design sync
SEO planning
Meetup event
Lunch with Olivia
Friday standup
Olivia x Riley
Product demo
House inspection

Calendar day view

Get the code
AUG
27
August 2025Week 4
Wednesday
Sun24
Mon25
Tue26
Wed27
Thu28
Fri29
Sat30
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
One-on-one w/ Eva
Design sync
SEO planning
Meetup event
Date pickersFile uploaders