Calendar
A date picker component with range and multi-select support.
Calendar wraps @daypicker/react with kosori's styling,
supports single, multiple and range selection, and marks itself with
data-slot.
Installation
npx shadcn@latest add @kosori/calendarExample
calendar-example.tsx
October 2026
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
'use client';
import type { DateRange } from '@daypicker/react';
import { useState } from 'react';
import { Calendar } from '@/components/ui/calendar';
const CalendarExample = () => {
const [range, setRange] = useState<DateRange | undefined>({
from: new Date(),
to: new Date(new Date().setDate(new Date().getDate() + 7)),
});
return <Calendar mode='range' onSelect={setRange} selected={range} />;
};
export default CalendarExample;
Usage
'use client';
import { useState } from 'react';
import { Calendar } from '@/components/ui/calendar';
const CalendarDemo = () => {
const [date, setDate] = useState<Date | undefined>();
return <Calendar mode='single' onSelect={setDate} selected={date} />;
};