Back to Components
Display
Calendar Grid
Monthly calendar grid with events and navigation.
PropsUsage ExampleVariations
February 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
26
27
28
29
30
31
1
2
31 events
Sprint planning
4
5
6
71 events
Design review
8
9
10
11
121 events
Launch check
13
14
15
16
17
181 events
Customer interviews
19
20
21
22
23
241 events
Metrics recap
25
26
27
28
1
Dependencies
- clsx
- lucide-react
- tailwind-merge
Files
- components/ui/calendar-grid.tsx
Installation
Using shadcn CLI
npx shadcn add calendar-grid --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx lucide-react tailwind-mergeRelated Display Components
Activity Timeline
Vertical activity feed with icon, title, description, timestamp, and connector line.
Animated Counter
Counts up to a target value with Framer Motion easing, optional prefix and suffix, and locale formatting.
Circular Progress
Progress ring with animated stroke and optional value label, built with SVG and Framer Motion.
Comparison Bar
Side by side comparison bars with labels, values, and percentage split.
Comparison Table
Feature comparison table for plans or tiers with boolean checkmarks.
Data Grid
Spreadsheet style grid with selectable cells, editing, and resizable columns.