Calendar

A month to pick dates from, every day a small slab cut on both sides, so a week is a row of nesting parallelograms.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/calendar

Examples

One day, and a range with month and year menus

calendar-shift.tsx

import { Suspense, useState } from "react";import type { DateRange } from "react-day-picker";import { Calendar } from "@/components/zero/calendar";import { Skeleton } from "@/components/zero/skeleton";function Calendars() {  const [day, setDay] = useState<Date | undefined>(new Date(2026, 9, 24));  const [range, setRange] = useState<DateRange | undefined>({    from: new Date(2026, 9, 20),    to: new Date(2026, 9, 24),  });  return (    <div className="flex flex-wrap gap-6">      <div className="panel">        <Calendar          mode="single"          selected={day}          onSelect={setDay}          defaultMonth={new Date(2026, 9)}        />      </div>      <div className="panel">        <Calendar          mode="range"          selected={range}          onSelect={setRange}          defaultMonth={new Date(2026, 9)}          captionLayout="dropdown"        />      </div>    </div>  );}export default function CalendarShift() {  return (    <Suspense      fallback={<Skeleton className="h-[18rem] w-[36rem] max-w-full" />}    >      <Calendars />    </Suspense>  );}

Behaviour

The chosen day fills with the accent; a range is its two ends in the accent with the days between on the raised grey. Today's number is in the accent and underlined. Arrow keys move between days.

It is react-day-picker underneath, so every DayPicker prop works: mode, selected, disabled, numberOfMonths, locale. It reads the current date to mark today, so with Next's cacheComponents render it inside a Suspense boundary, as the example does.

Props

Calendar

Prop	Type	Default	Description
mode	"single" \| "multiple" \| "range"	—	What can be chosen.
captionLayout	"label" \| "dropdown" \| "dropdown-months" \| "dropdown-years"	"label"	The month's name, or menus to jump.
showOutsideDays	boolean	true	Days of the months before and after, in grey.