Vui Starter
npm

Calendar

Calendar is a date picker for selecting a single date, several dates, or a range.

August 2026

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/calendar.

Usage

Built on react-day-picker. Use mode of single, multiple, or range.

calendar-demo.tsx
import { Calendar } from "@viliha/vui-ui/calendar";

export function Example() {
  const [date, setDate] = React.useState<Date | undefined>(new Date());
  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-lg border"
    />
  );
}