Component
Calendar
A month-view calendar with date selection, navigation, and disabled date support. Uses the headless @refraction-ui/calendar core.
Examples
Click a date to select it. Navigate months with the arrow buttons.
Date Selection
April 2026
Su
Mo
Tu
We
Th
Fr
Sa
Installation
$
pnpm add @refraction-ui/react-calendarUsage
tsx
import { Calendar } from '@refraction-ui/react-calendar'
export function MyComponent() {
const [date, setDate] = useState<Date>()
return <Calendar value={date} onSelect={setDate} />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | -- | Selected date (controlled). |
defaultValue | Date | -- | Initial selected date (uncontrolled). |
onSelect | (date: Date) => void | -- | Callback when a date is selected. |
month | Date | -- | Controlled displayed month. |
onMonthChange | (month: Date) => void | -- | Callback when month changes. |
minDate | Date | -- | Minimum selectable date. |
maxDate | Date | -- | Maximum selectable date. |
disabledDates | Date[] | -- | Array of specific disabled dates. |
className | string | -- | Additional CSS classes. |