Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-day-pickerRequired Packages(1 package)
pnpm add react-day-pickerUI Primitives(1 component)
npx shadcn@latest add buttonUsage
import {
DayPicker
} from "@docyrus/ui/components/day-picker";
<DayPicker
variant="default"
size="default"
showOutsideDays={true}
fixedWeeks
numberOfMonths={0}
captionLayout="label"
/>Variants
| Variant | Description |
|---|---|
default | Default style |
outline | Outline — border border-border rounded-xl |
ghost | Ghost — bg-transparent |
Sizes
| Size | Description |
|---|---|
default | Default — [--cell-size:36px] text-sm |
sm | Small — [--cell-size:28px] p-2 text-xs |
lg | Large — [--cell-size:44px] p-4 text-base |
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "ghost" | "default" |
size | "default" | "sm" | "lg" | "default" |
showOutsideDays | boolean | true |
fixedWeeks | boolean | — |
numberOfMonths | number | — |
captionLayout | 'label' | 'dropdown' | 'dropdown-months' | 'dropdown-years' | — |
className | string | — |