Calendar
Date-picker calendar built on react-day-picker v10, styled with semantic tokens. Supports single, multiple, and range selection modes.
Preview
July 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Installation
bash
npx shadcn@latest add @layout/calendarUsage
tsx
import { Calendar } from "@/components/ui/calendar"Examples
Date range
July 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
August 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Guidelines for AI agents
Use mode="single" for a standalone date picker, mode="range" for booking flows or date-range filters. Wrap in a Popover for inline-trigger UX. Always pass showOutsideDays (defaults true) to keep the grid size stable.
Never
- Neverimport react-day-picker styles directly; all styling is handled via classNames prop using semantic tokens
- Neverhardcode colour values for selected, today, or outside states; use bg-primary, bg-accent, and muted-foreground
- Neverset a fixed width on the Calendar root; let the day grid dictate size
- Neveruse mode="multiple" for date ranges; use mode="range" instead
Tokens consumed
--layout-primary--layout-primary-fg--layout-accent--layout-accent-fg--layout-muted-fg--layout-border--layout-ring--layout-radius