The CalendarCard component is a shadcn-styled calendar variant that provides a clean, modern way to pick single dates or ranges. Unlike the standard flat grid design, this component is wrapped inside a subtle card with borders and shadow, giving it a distinct visual hierarchy on the page. Days are displayed in pill-shaped cells, making selections look lighter and more elegant, while the current date is emphasized with a thin primary-colored ring. It supports both single-date and range selection modes, with smooth hover, focus, and disabled states built in. Designed with accessibility through react-aria-components, the CalendarCard integrates seamlessly into shadcn UI projects and can be easily extended with theming, dark mode, or dropdown month/year selectors. This makes it a versatile choice for forms, dashboards, and scheduling interfaces where a compact yet visually appealing calendar is needed.
"use client"
import * as React from "react"
import { Calendar, RangeCalendar } from "@/components/ui/pill-calendar"
export default function CalendarDemo() {
const [date, setDate] = React.useState<any>(null)
const [range, setRange] = React.useState<any>(null)
return (
<div className="flex flex-col gap-10 p-8 max-w-md">
<div>
<h2 className="mb-2 text-lg font-semibold">Pick a Date</h2>
<Calendar value={date} onChange={setDate} />
{date && <p className="mt-2 text-sm">Selected: {date.toString()}</p>}
</div>
<div>
<h2 className="mb-2 text-lg font-semibold">Pick a Date Range</h2>
<RangeCalendar value={range} onChange={setRange} />
{range && (
<p className="mt-2 text-sm">
Range: {range.start?.toString()} → {range.end?.toString()}
</p>
)}
</div>
</div>
)
}
Part of Ruixen UI — browse the full library on 21st.dev.