# Universal Date Picker

> The UniversalDatePicker is a powerful and flexible date selection component designed to cover a wide range of use cases in a single, unified interface. It combines the simplicity of single-date selection with the versatility of range selection, while also offering quick-access presets like “Last 7 days,” “Last Month,” or “This Year” for efficiency. To make navigation effortless, it includes a year-selection card for jumping across years quickly, and can easily be extended to support month selection. Built entirely with shadcn/ui and React DayPicker, it provides a modern, accessible, and user-friendly experience that adapts seamlessly to dashboards, analytics, booking systems, and any application where robust date handling is essential. The UniversalDatePicker delivers both convenience and clarity, ensuring users can select dates with confidence and precision.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: date-fns, lucide-react, react-day-picker
- Live preview: https://21st.dev/@ruixen.ui/components/universal-date-picker

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/universal-date-picker?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt