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

Monday, January 12, 2026

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

Monday, January 12, 2026

Monday standup
Content planning

Calendar week view

Get the code
JAN
12
January 2026Week 2
Jan 12, 2026 – Jan 18, 2026
Sun11
Mon12
Tue13
Wed14
Thu15
Fri16
Sat17
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
Sun11
Mon12
Tue13
Wed14
Thu15
Fri16
Sat17
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
JAN
12
January 2026Week 2
Monday
Sun11
Mon12
Tue13
Wed14
Thu15
Fri16
Sat17
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