About the shadcn/ui Date Picker Component
The Date Picker component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add date-picker` and copy it directly into your project.
Date Picker Component — Frequently Asked Questions
How do I create a date range picker with shadcn?
Use Calendar with `mode="range"` inside a Popover. The range calendar example shows the pattern. Combine with two DateFormatter instances for start/end display.
How do I format the displayed date in a shadcn Date Picker?
Use `date-fns` format: `format(date, 'PPP')` gives 'April 29th, 2023'. Import `{ format }` from 'date-fns' and apply it to the selected date value.
How do I add preset dates (Today, Tomorrow, Next week) to a Date Picker?
Add a sidebar with `<Button variant="ghost" onClick={() => setDate(addDays(new Date(), 7))}>Next week</Button>` patterns. The presets example demonstrates this pattern.