Calendar

A date picker component for selecting single or multiple dates, or a date range.

Improve on GitHub

Installation

Add this component to your project using the npui CLI:

npx npui add calendar

Variants & Examples

Default Calendar (Single Select)

A calendar for selecting a single date.

August 2025

Code for Default Calendar (Single Select)

1import { Calendar } from "@/components/ui/calendar";
2import { useState } from "react";
3
4export function SingleSelectCalendar() {
5  const [date, setDate] = useState<Date | undefined>(new Date());
6
7  return (
8    <Calendar
9      mode="single"
10      selected={date}
11      onSelect={setDate}
12      initialFocus
13      className="rounded-md border"
14    />
15  );
16}

Range Select Calendar

A calendar for selecting a range of dates.

August 2025

Code for Range Select Calendar

1import { Calendar } from "@/components/ui/calendar";
2import { useState } from "react";
3import { DateRange } from "react-day-picker"; // Import type
4
5export function RangeSelectCalendar() {
6  const [range, setRange] = useState<DateRange | undefined>({
7    from: new Date(),
8    to: new Date(new Date().setDate(new Date().getDate() + 7)),
9  });
10
11  return (
12    <Calendar
13      mode="range"
14      selected={range}
15      onSelect={setRange}
16      initialFocus
17      className="rounded-md border"
18    />
19  );
20}

Props

These are the available props for the Calendar component:

Prop	Type	Description	Default
mode	"single" \| "multiple" \| "range"	The selection mode of the calendar.	"single"
selected	Date \| Date[] \| { from: Date; to?: Date }	The selected date(s).	-
onSelect	(date: Date \| Date[] \| { from: Date; to?: Date }) => void	Callback function when a date is selected.	-
initialFocus	boolean	Whether the calendar should receive focus on mount.	false
disabled	boolean \| ((date: Date) => boolean)	Disables specific dates or the entire calendar.	false

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa