A date grid for picking a day or a range, built on DayPicker.
$ pnpm dlx shadcn@latest add https://dashral.com/r/calendar.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/calendar.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
components.json
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/calendarUsage
example.tsx
import { useState } from "react"
import { Calendar } from "@/components/dashral/calendar"
const [date, setDate] = useState<Date | undefined>(new Date())
<Calendar mode="single" selected={date} onSelect={setDate} />Examples
API reference
Calendar
Also takes every prop of DayPicker(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
mode | "single" | "multiple" | "range"What can be picked. | — |
selected / onSelect | Date | Date[] | DateRangeThe picked day(s), and the change handler. | — |
numberOfMonths | numberMonths side by side. | 1 |
disabled | Matcher | Matcher[]Days that can't be picked, e.g. { before: new Date() }. | — |
showOutsideDays | booleanShow the neighbouring months' days in the grid. | true |
Keyboard
| Keys | Action |
|---|---|
| Arrow keys | Move a day or a week |
| Page UporPage Down | Previous or next month |
| Shift+Page UporShift+Page Down | Previous or next year |
| HomeorEnd | Start or end of the week |
| EnterorSpace | Pick the focused day |
Accessibility
- A grid with labelled days (“Monday, October 13, 2026”), today and picked days announced.
Motion
- A day presses in when tapped; colors change smoothly.