Registry Component
Calendar
Compact calendar card with animated month transitions, inline day selection, and a built-in selected-date summary.
Live Playground
Move between months, choose a day, and test the controlled selected/onSelect API while keeping the same card visuals and transitions.
Selected
Saturday, April 25, 2026
Install And Iterate
Install the component directly into your codebase, then branch into v0 if you want to iterate on variations.
Install
Build with v0
Send the registry bundle into v0 when you want to explore new colorways, copy, or layout directions quickly.
Usage
Use controlled or uncontrolled props depending on your form flow. The visual shell and animation behavior stay the same either way.
import { Calendar } from "@/components/ui/calendar";
import { useState } from "react";
export function DatePanel() {
const [selected, setSelected] = useState<Date>(new Date());
return (
<Calendar
selected={selected}
onSelect={setSelected}
defaultMonth={selected}
/>
);
}API Details
Each item below expands into implementation notes, API behavior, and any direct registry file install needed for related assets.