Components
Loading preview...
The MultiSelectCalendarCard is a modern, interactive date selection component that extends the functionality of a traditional calendar by supporting multiple date selections with an intuitive UI. Built entirely with shadcn/ui, it displays a calendar for picking dates and a dynamic list of selected dates shown as removable chips, giving users clear visibility and control over their choices. Each date can be easily removed from the list with a single click, and the built-in confirmation action ensures selections can be reviewed before submission. This makes the component ideal for use cases like booking systems, availability planners, or event scheduling where users need to select and manage multiple dates efficiently.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/multi-select-calendar-card"use client";
import { MultiSelectCalendarCard } from "@/components/ui/multi-select-calendar-card";
export default function MultiSelectCalendarDemoPage() {
return (
<div className="flex min-h-screen flex-col items-center justify-center">
<MultiSelectCalendarCard />
</div>
);
}