shadcn.io is an independent project built on shadcn/ui
One stored range, two rows, starting on Today. The first row is Today, Yesterday, Last 7 Days, Last 30 Days, and Custom. The second is This Week, This Month, and This Year. Picking This Week clears Today. Custom only selects that preset. It does not open a calendar.
Use presets when the range is one of a few known spans. When Custom is chosen, open a Date Picker for the real dates. In React, Ark UI does not turn Today into a start and end.
Installation
Anatomy
Usage
<div className="flex flex-col gap-4">
<ButtonGroup aria-label="Preset range">
{PRESETS.map((item) => (
<Button
aria-pressed={period === item.value}
key={item.value}
onClick={handleSelect}
size="sm"
value={item.value}
variant={period === item.value ? "default" : "outline"}
>
{item.label}
</Button>
))}
</ButtonGroup>
<ButtonGroup aria-label="Calendar period">
{CALENDAR_PERIODS.map((item) => (
<Button
aria-pressed={period === item.value}
key={item.value}
onClick={handleSelect}
size="sm"
value={item.value}
variant={period === item.value ? "default" : "outline"}
>
{item.label}
</Button>
))}
</ButtonGroup>
</div>FAQ
How is the selected range tracked?
One value, starting at today. Each button carries its own value, such as last7days or thisMonth, and pressing it stores that value. The matching button gets variant="default" and aria-pressed.
What does Custom do?
In the demo it's selected like any other preset. Open a Date Picker with a range when Custom is chosen.
How do I turn a preset into dates?
Map each value to a start and end date where you run the query. The demo only stores the key.
Do the two rows share a selection?
Yes. Picking This Week clears Today. Use separate values if both should be set.
How do I submit the choice with a form?
Put a hidden input with the selected value in the form, or read it in your submit handler. The buttons have type="button", so pressing one doesn't submit.
What if five presets don't fit?
The group doesn't wrap. On narrow screens, use a Select for the presets or drop the less used ones.
API Reference
Button Group
Sets aria-label="Preset range" and aria-label="Calendar period". The rest is on the Button Group page.
Button
Sets aria-pressed={period === item.value}, onClick={handleSelect}, size="sm", value={item.value} and variant={period === item.value ? "default" : "outline"}. The rest is on the Button page.
