Components•Calendar
Components•Calendar
Calendar
A single-month date selector for scheduling flows, filters, and date-picking popovers.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/primitive-calendarHow to use
import { BjorkCalendar } from "@/components/bjork-ui/primitives";Props
classNamestringPass through styling hooks for the Calendar primitive without replacing the base Bjork surface.
childrenReactNodeComposable content, labels, icons, and nested content where the primitive supports them.
variant"outline" | "base"Choose the inset outline shell or the raised base-card surface while keeping the same date behavior.
July 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Base card
Use when the calendar should sit as the main raised surface in the layout.
<BjorkCalendar mode="single" selected={new Date(2026, 4, 15)} />July 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Outline
Use in popovers, sheets, and secondary scheduling surfaces.
<BjorkCalendar variant="outline" mode="single" selected={new Date(2026, 4, 15)} />