Calendar
Date grid (react-day-picker).
Import
tsx
import { Calendar } from "@cooud-ui/ui";
bash
npx cooud-ui add calendar
On this page
Date grid (react-day-picker).
import { Calendar } from "@cooud-ui/ui";
npx cooud-ui add calendar
On this page
A controlled calendar in single-select mode. Click a day to update the value.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
// Fixed initial date keeps SSR + client identical (avoids hydration drift).const [date, setDate] = useState<Date | undefined>(() => new Date(2026, 5, 21));return (<Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md" />);