Command Palette

Search for a command to run...

Calendar

shadcn/ui

A date field component that allows users to enter and edit date.

Calendar
January 2026

import { Calendar } from "@/components/optics/calendar";<Calendar  className="rounded-md border !bg-background"  mode="single"/>

Installation

pnpm dlx shadcn@latest add @optics/calendar

Props

<Calendar />
Name
Type
classNames
string(default: undefined)
showOutsideDays
boolean(default: true)
captionLayout
string(default: label)
buttonVariant
string(default: ghost)
formatters
string(default: undefined)
components
string(default: undefined)

<CalendarDayButton />
Name
Type
day
object(default: { ... })
modifiers
object(default: { ... })