shadcn.io is an independent project built on shadcn/ui
A month grid sits beside Quick Select. The buttons are Today, Tomorrow, In 3 days, In a week, In 2 weeks, and In a month. Choosing one selects that day and shows its month. Nothing here parses a typed sentence.
Use it when common offsets should be one click. A free-text date belongs in a field, not in this list. Hide the grid in a Date Picker if the page is crowded. In Svelte, Ark UI does not read a phrase like next Tuesday.
Installation
Anatomy
Usage
<Calendar class="flex divide-x overflow-hidden rounded-md border p-0" onValueChange={handleValueChange} value={value}><div class="p-3"><CalendarViewControl><CalendarPrevTrigger /><CalendarViewDate /><CalendarNextTrigger /></CalendarViewControl><CalendarTable><CalendarWeekDays /><CalendarTableDays /></CalendarTable></div><div class="relative w-62 overflow-hidden"><div class="absolute inset-0 flex flex-col gap-4"><p class="px-4 pt-4 text-center font-medium text-sm">Quick Select</p><ScrollArea class="min-h-0 flex-1"><div class="flex flex-col gap-2 px-4 pb-4">{#each shortcuts as shortcut (shortcut.label)}<CalendarPresetTrigger value={[shortcut.date]}>{#snippet asChild(props)}<Button {...props()} size="sm" variant="outline">{shortcut.label}</Button>{/snippet}</CalendarPresetTrigger>{/each}</div></ScrollArea></div></div></Calendar>FAQ
Which shortcuts are in the list?
Today, Tomorrow, In 3 days, In a week, In 2 weeks and In a month.
Each date is today.add with days, weeks or months. today is parseDate(new Date()).
What happens when a shortcut is chosen?
Each shortcut is a CalendarPresetTrigger with that date as value, on a Button through asChild. The trigger sits inside Calendar, so choosing it selects that date.
How do I read the selected date?
value is a list holding the selected date, and onValueChange receives { value }. This demo starts the list from parseDate(new Date()).
API Reference
Calendar
Sets onValueChange={handleValueChange}, value={value} and value={[shortcut.date]}. The rest is on the Calendar page.
Scroll Area
No extra props in this demo. The rest is on the Scroll Area page.
Button
Sets props, size="sm" and variant="outline". The rest is on the Button page.
