Back to Components
Layout
Calendar
Month view calendar with selectable days and event dots.
PropsUsage ExampleVariations
February 2026
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/calendar.tsx
Installation
Using shadcn CLI
npx shadcn add calendar --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Layout Components
Dashboard Header
Page header with title, date range picker placeholder, and action buttons area.
Masonry Grid
Pinterest-style masonry layout using CSS columns for cards of varying heights.
Scroll Area
Custom scrollbar styling with overflow detection and gradient fade indicators.
Split Layout
Two-pane layout with a resizable divider, supporting horizontal and vertical orientations.
Split Pane
Resizable side by side panels with a drag handle.