Calendar
A month grid for choosing a date.
Upstream documentationExamples
Choose a date
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Calendar
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/calendar.json'Usage
A complete example using the installed component and hook paths.
Calendar usage
"use client";type PreviewProps = { interactive?: boolean };import { useState } from "react";import { Calendar } from "@/components/ui/calendar";function CalendarPreview({ interactive }: PreviewProps) { const [selected, setSelected] = useState<Date>(); return ( <div className="space-y-2"> <Calendar mode="single" selected={selected} onSelect={interactive ? setSelected : undefined} defaultMonth={new Date(2025, 4, 1)} className="mx-auto" /> {interactive && ( <p className="text-center text-xs text-muted-foreground" aria-live="polite"> {selected ? `Selected: ${selected.toLocaleDateString()}` : "Choose a date"} </p> )} </div> );}export default function Demo() { return <CalendarPreview interactive />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Calendar
Calendar props
React.ComponentProps<typeof DayPicker> & { buttonVariant?: React.ComponentProps<typeof Button>["variant"];}- showOutsideDays
- true
- captionLayout
- "label"
- buttonVariant
- "ghost"
CalendarDayButton
CalendarDayButton props
React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }