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

Friday, February 6, 2026

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

Friday, February 6, 2026

Friday standup
Olivia x Riley
Product demo

Calendar week view

Get the code
FEB
6
February 2026Week 1
Feb 1, 2026 – Feb 7, 2026
Sun1
Mon2
Tue3
Wed4
Thu5
Fri6
Sat7
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
Sun1
Mon2
Tue3
Wed4
Thu5
Fri6
Sat7
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
FEB
6
February 2026Week 1
Friday
Sun1
Mon2
Tue3
Wed4
Thu5
Fri6
Sat7
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