Calendar

Browse dates in a clear, compact month view.

npx shadcn@latest add @silicon-ui/calendar
datefield
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/calendar

Manually

  1. Install the dependencies.

    npm install lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/calendar/calendar.tsx
    • components/silicon-ui/lib/use-today.ts shared
    • components/silicon-ui/calendar/calendar.module.css

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { Calendar } from "@/components/silicon-ui/calendar/calendar";

API reference

PropTypeDefault
valueDate—
onChange(date: Date) => void—
monthDate—
onMonthChange(month: Date) => void—
minDateDate—
maxDateDate—
disabledDatesCalendarDateMatcher—
localestring"en-US"
classNamestring—
showToday

Adds a Today button that slides back to the current month and selects today when it is available.

booleanfalse

Dependencies

npm
lucide-reactmotion
Registry
silicon-motion-tokens