All components
Date Picker
Date input with calendar trigger, month navigation, and a selectable day grid.
Delivery date
March 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Sizes
Delivery date
xsMarch 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Delivery date
smMarch 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Delivery date
mdMarch 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Delivery date
lgMarch 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Delivery date
xlMarch 2026
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
Install
zsh — date-picker
1bunx stylexblocks add date-pickerUsage — Base UI
date-picker.tsx
12345678910111213141516171819import { DatePicker } from "#components/ui/base-ui/date-picker.tsx";
export function Example() { return ( // Base UI has no date-picker machine, so Root owns the selected date and // visible month (value/defaultValue/onValueChange); Content renders the // month navigation and day grid, and parts compose through render <DatePicker.Root defaultValue={new Date(2026, 2, 18)} size="md"> <DatePicker.Label>Delivery date</DatePicker.Label> <DatePicker.Control> <DatePicker.Input aria-label="Delivery date" /> <DatePicker.IndicatorGroup> <DatePicker.Trigger /> </DatePicker.IndicatorGroup> </DatePicker.Control> <DatePicker.Content /> </DatePicker.Root> );}