Design System v1.0

Date picker

A calendar in a popover, triggered by an input, for selecting a single date or a range.

Single date

A calendar in a popover triggered by an input.

Date range

A date-range calendar in a popover for selecting a start and end date.

Natural language

A text input that parses phrases like “tomorrow” or “next friday” into a date.

Your report will be generated on August 23, 2026.

Time

A time input for selecting an hour and minute.

Date and time

A date picker paired with a time input.

Date range and time

A date-range picker with start and end time inputs.

API reference

A single-date control pairing a popover-triggering button with a Calendar.

Anatomy
DatePickerButton + popover Calendar for selecting a single date.

Command Palette

Search for a command to run...