Components
Loading preview...
The CalendarTwin is a unique, shadcn-inspired calendar component designed for a richer date selection experience. Unlike traditional single-month calendars, it displays two consecutive months side by side, making it ideal for scenarios like travel booking or scheduling across weeks. What sets it apart is its year selection grid: instead of a simple dropdown, users can toggle into a year view that presents a 12-year block in a calendar-like layout, allowing quick jumps across years with a single click. Built with shadcn’s Button and utility classes, it keeps a consistent design language while remaining fully customizable. Developers can control the selected date via props, configure the year range, and easily integrate it into forms or dashboards. Its clean UI, flexible navigation, and intuitive design make the CalendarTwin a perfect fit for applications where both precision and speed in date selection are essential.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/calendar-twin"use client"
import * as React from "react"
import { CalendarTwin } from "@/components/ui/calendar-twin"
export default function CalendarTwinDemo() {
const [date, setDate] = React.useState<Date>()
return (
<div className="p-8 flex flex-col items-start space-y-4">
<CalendarTwin value={date} onChange={setDate} />
<p className="text-xs text-muted-foreground mt-2">
{date ? `Selected: ${date.toDateString()}` : "No date selected"} —{" "}
<a
href="https://www.ruixen.com/"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
ruixen.com
</a>
</p>
</div>
)
}