Browse components
Calendar
Dependency-free date picker grid with single or range selection, springy month slides, range preview on hover and full keyboard navigation.
Installation
npx shadcn@latest add @glint-ui/calendarFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/calendar.json
Usage
import { Calendar } from "@/components/ui/calendar";
const [range, setRange] = useState<DateRange>();
<Calendar mode="range" selected={range} onSelect={setRange} weekStartsOn={1} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "single" | Pick one day or a from/to range. |
| weekStartsOn | number | 0 | 0 = Sunday, 1 = Monday. |
| locale | string | "en-US" | BCP 47 locale for month and weekday names. |
| selected | ReactNode | — | Controlled selection: Date (single) or { from, to } (range). |
| defaultSelected | ReactNode | — | Initial selection when uncontrolled. |
| onSelect | ReactNode | — | Called with the picked Date, or the updated range. |
| defaultMonth | ReactNode | — | Month shown first (Date). |
| min | ReactNode | — | Earliest selectable day (Date). |
| max | ReactNode | — | Latest selectable day (Date). |
| isDateDisabled | ReactNode | — | (date) => boolean to block specific days. |
| className | string | — | Extra classes for the root element. |