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

Monday, October 13, 2025

Monday standup
Content planning

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

Monday, October 13, 2025

Monday standup
Content planning

Calendar week view

Get the code
OCT
13
October 2025Week 2
Oct 13, 2025 – Oct 19, 2025
Sun12
Mon13
Tue14
Wed15
Thu16
Fri17
Sat18
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
Monday standup
Content planning
Sun12
Mon13
Tue14
Wed15
Thu16
Fri17
Sat18
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
Monday standup
Content planning
Product demo
Catch up w/ Alex
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
OCT
13
October 2025Week 2
Monday
Sun12
Mon13
Tue14
Wed15
Thu16
Fri17
Sat18
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
Monday standup
Content planning
Date pickersFile uploaders