React Date Picker
An input trigger with a popover month calendar: previous / next navigation, a today marker, the selected day highlighted, out-of-month days dimmed, and optional min / max bounds. Controlled with value + onChange, or uncontrolled with defaultValue. Closes on select, outside click, or Escape.
No date selected
Installation
npx shadcn@latest add "https://kelvinui.com/registry/date-picker.json"
Props
| Prop | Type | Description |
|---|---|---|
| value | Date | Controlled selected date |
| defaultValue | Date | Initial date when uncontrolled |
| onChange | (date: Date) => void | Fires when a day is selected |
| placeholder | string | Trigger text when nothing is chosen |
| min / max | Date | Selectable range bounds |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.