Components
Calendar
A date picker built on React DayPicker.
Calendar is built on React DayPicker. It renders an accessible monthly calendar for selecting single dates, ranges, or multiple dates.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/calendar.jsonUsage
"use client";
import { useState } from "react";
import { Calendar } from "@/components/ui/calendar";
export default function Example() {
const [date, setDate] = useState<Date | undefined>(new Date());
return <Calendar mode="single" selected={date} onSelect={setDate} />;
}Examples
Default
Multiple
Range
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
Changelog
- v0.3.0Calendar keeps day buttons mounted across renders and renders week numbers as row headers.minor
- v0.1.0Accessibility, correctness, and token fixes across the kit, from a full code-smell audit.minor
Last updated on