PrimitiveAvailable
Calendar
Keyboard-accessible day selection with month navigation.
Installation
Add the component and its dependencies from the registry running on your computer.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/calendar.jsonUsage
Import the component into your project and keep the source code under your control.
tsx
'use client';
import { useState } from 'react';
import { Calendar } from '@/components/ui/calendar';
export default function Demo() {
const [date, setDate] = useState<Date | undefined>(new Date(2026, 8, 12));
return (
<div className="grid gap-4">
<Calendar
mode="single"
selected={date}
onSelect={setDate}
defaultMonth={new Date(2026, 8, 1)}
/>
<output className="bl-type-small">
{date ? date.toLocaleDateString('en-US') : 'Choose a day.'}
</output>
</div>
);
}
States & interaction
Appearance, behavior and keyboard checks.
- The composition inherits its controls’ states. Test empty, content, loading and error cases where the application needs them.
- Examples on this page are runnable; the displayed code uses the same components. Business logic belongs to the consumer.
- Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.
API Reference
BrutalLab-specific properties. Native attributes are supported as well.
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | single / multiple / range | — | Selection model. |
| selected | Date or Date[] or DateRange | — | Controlled selection. |
| onSelect | function | — | Reports the selected date or range. |
Accessibility
Rules that should remain intact when adapting the component to a product.
Keep the calendar navigation labels and day button semantics from React Day Picker.
Retain keyboard focus styles and test the composition with keyboard navigation.
Use className for visual customization; preserve the primitive ARIA attributes.