Skip to main content
Calendar component preview (light)
  • Location: sabo/src/components/ui/calendar.tsx

​
When to use

  • Select a single date or a range; shows month navigation and keyboard focus.
  • Good for filters, booking flows, analytics time windows.

​
Usage

sabo/src/components/ui/calendar.tsx
import { Calendar } from "@/components/ui/calendar";

export function Example() {
  return <Calendar showOutsideDays captionLayout="dropdown" />;
}

​
Key props

​
showOutsideDays
boolean
default:"true"
Render days from adjacent months.
​
captionLayout
string
default:"label"
label | dropdown. Dropdown adds month/year selects.
​
classNames
object
Customize internal slots from react-day-picker (e.g., month_caption, day).
​
buttonVariant
ghost
Applies Button variants to the nav buttons.

​
Styling tip

  • Control cell size with [—cell-size:—spacing(8)].
  • Use buttonVariant to align navigation buttons with your design.

​
Accessibility

  • Keyboard navigation is supported; focus outlines are prominent.
  • Provide labels for the filter context (“From/To date”).