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
28
February 2026Week 4
Feb 1, 2026 – Feb 28, 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Coffee with Ali
Marketing site kickoff
24
25
26
All-hands meeting
Dinner with Candice
27
28
House inspection

Saturday, February 28, 2026

House inspection

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
28
February 2026Week 4
Feb 1, 2026 – Feb 28, 2026
Sun
Mon
Tue
Wed
Thu
Fri
Sat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Coffee with Ali
Marketing site kickoff
24
25
26
All-hands meeting
Dinner with Candice
27
28
House inspection

Saturday, February 28, 2026

House inspection

Calendar week view

Get the code
FEB
28
February 2026Week 4
Feb 22, 2026 – Feb 28, 2026
Sun22
Mon23
Tue24
Wed25
Thu26
Fri27
Sat28
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
House inspection
Sun22
Mon23
Tue24
Wed25
Thu26
Fri27
Sat28
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
House inspection

Calendar day view

Get the code
FEB
28
February 2026Week 4
Saturday
Sun22
Mon23
Tue24
Wed25
Thu26
Fri27
Sat28
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
House inspection
Date pickersFile uploaders