Command Menu

Search documentation, components, and switch theme.

Atoms

Calendar

A date picker calendar component.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/calendar

Install the following dependencies:

npm install react-day-picker lucide-react class-variance-authority radix-ui

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { Calendar } from '@/components/ui/calendar'
const [date, setDate] = React.useState<Date | undefined>(new Date())

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
  />
)

Examples#

Range#

Presets#

Week Numbers#

Disabled Dates#

Disabled Function#

Default Month#

Responsive#

Date Picker#