Date Range Presets
Quick ranges like Last 7 days alongside a month grid where two clicks set a custom range, with live hover preview.
date-range-presets.tsxdate-range-presets.css
Checking access…
Overview
Presets fill the range instantly and highlight it on the calendar. Clicking a start date and hovering shows the range forming before the second click commits it.
The header spells out the range and its length in days.
When to use
- Analytics dashboards, reports, booking searches.
When not to use
- Single dates: use a date picker.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/date-range-presets.json$
npx shadcn@latest add https://sundaeui.dev/r/date-range-presets.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/date-range-presets.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/date-range-presets.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy date-range-presets.tsx and date-range-presets.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { DateRangePresets } from '@/components/sundae/date-range-presets'
<DateRangePresets />Props
| Prop | Type | Default |
|---|---|---|
valueRange. | { from: Date; to: Date } | — |
onValueChangeCalled when a range is complete. | (r: { from: Date; to: Date }) => void | — |
todayReference date. | Date | new Date() |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Presets are a radiogroup; days are buttons with full date labels and aria-pressed for range ends.
- The range summary is a polite live region.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-drp; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Date Range Presets free?
- Date Range Presets is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Date Range Presets?
- Run npx shadcn@latest add https://sundaeui.dev/r/date-range-presets.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Date Range Presets support keyboard and screen readers?
- Presets are a radiogroup; days are buttons with full date labels and aria-pressed for range ends. The range summary is a polite live region.
- Does Date Range Presets respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All forms →Month Picker
Forms · Refined- Pro
Wheel Picker
Forms · Refined Search Field
Forms · RefinedFilter Chips
Forms · RefinedTime Slots
Forms · RefinedWeek Strip
Forms · Refined