Layout UI

Date Picker

Composed date-picker pattern: a Popover-wrapped Button trigger with a Calendar inside. Exports DatePicker (single) and DateRangePicker (range). Not a primitive — installs Calendar, Popover, and Button as dependencies.

Preview

Installation

bash
npx shadcn@latest add @layout/date-picker

Usage

tsx
import { DatePicker, DateRangePicker } from "@/components/ui/date-picker"

Examples

Date range picker

Guidelines for AI agents

Use DatePicker for single date inputs (booking, scheduling). Use DateRangePicker for filtering or reporting windows. Control state externally via date/onDateChange or dateRange/onDateRangeChange props. Set numberOfMonths={2} on DateRangePicker for wide viewports.

Never

  • Neverimport date-fns format separately when the component already formats the label
  • Neverfix the popover width with w-* on PopoverContent; use w-auto so the calendar dictates size
  • Neveruse this pattern as an uncontrolled component; always lift date state up

Tokens consumed

--layout-primary--layout-muted-fg--layout-border--layout-ring--layout-radius