- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
Date Picker
Date selection component combining a popover trigger with a calendar. Supports single dates, date ranges, and preset ranges.
Figma: DS-001 Foundations · 334:4051
Import
Live Demo
Date selection with popover calendar and range support.
Basic
Date Picker Range
Date of Birth
Basic (icon left)
Time Picker
Disabled states
Time Input standalone
Props
| Name | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "multiple" | "single" | Date selection mode |
| disabled | boolean | (date: Date) => boolean | — | Disable specific dates or entire picker |