saturation/uiLoading...
Installation
pnpm dlx shadcn@latest add @saturation-ui/calendar-pickerTailwind v4 — Source Scanning
The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:
@source "../components";This ensures all utility classes in CVA variants and data attribute selectors are included in your build.
Usage
import { CalendarPicker } from "@/components/ui/calendar-picker"<CalendarPicker selected={date} onSelect={setDate} />Examples
Date Range
Loading...
Range mode selection.
Multi Month
Loading...
Multiple months displayed.
Multi Month Range
Loading...
Multi month with range.
Disabled Dates
Loading...
Disabled specific dates.
Disabled Weekends
Loading...
Disabled weekends.
Month & Year
Loading...
Month/year dropdown.
With Events
Loading...
Calendar with event list.
With Time
Loading...
Calendar with time input.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
selected | Date | Date[] | — | Selected date(s). |
onSelect | (date: Date) => void | — | Selection handler. |
mode | "single" | "range" | "multiple" | "single" | Selection mode. |