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

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

Wednesday, December 17, 2025

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

2 more...

Calendar week view

Get the code
DEC
17
December 2025Week 3
Dec 15, 2025 – Dec 21, 2025
Sun14
Mon15
Tue16
Wed17
Thu18
Fri19
Sat20
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
Sun14
Mon15
Tue16
Wed17
Thu18
Fri19
Sat20
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
DEC
17
December 2025Week 3
Wednesday
Sun14
Mon15
Tue16
Wed17
Thu18
Fri19
Sat20
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