Date Picker - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/date-picker

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<DatePicker date={date} onDateChange={setDate} />

Examples

Sizes

Size variants.

With Label

Date picker with label.

With Presets

Preset date buttons.

Date Range

Date range picker.

API Reference

Prop	Type	Default	Description
`date`	`Date`	—	Selected date.
`onDateChange`	`(date: Date) => void`	—	Date change handler.