DatePicker

40px day cells and 64px month cells with 6px corners: today, selected, in range, outside and disabled. Pickers carry presets on the right.

Figma: 10 / Components / DatePicker

Usage

Source: src/components/ui/date-picker.tsx

import { DatePickerMonthRange, DatePickerRange, DatePickerSingle } from '@/components/ui/date-picker'

<DatePickerRange defaultValue={{ from: new Date(2026, 0, 1), to: new Date(2026, 0, 31) }} />

One calendar month. Shown open.

Two months side by side with day presets.

Two years side by side with month presets.

When to reach for it, and when to use something else.

Use it for

Reporting periods on dashboards and charts.

Month ranges for revenue overviews.

Avoid

Birthdays and other far-away dates; use an Input with a format hint.

Prop	Type	Default	Description
defaultValue	Date	–	The starting date.
onChange	(date: Date) => void	–	Called with the chosen date.
inline	boolean	false	Shows the calendar without the trigger.

Prop	Type	Default	Description
defaultValue	{ from: Date, to: Date }	–	The starting range.
defaultPreset	string	–	Marks a preset as active.
onChange	(range: DateRange) => void	–	Called with the chosen range.
inline	boolean	false	Shows the panel without the trigger.