Components
CalendarLume
The CalendarLume component is a modern, three-level date picker that allows users to navigate seamlessly from years to months and then down to individual days. Unlike a standard calendar, it begins with a scrollable year grid ranging from 1900 to 2100, letting users quickly select a year. Once a year is chosen, the component transitions smoothly into a month grid, and selecting a month reveals the familiar day calendar. Breadcrumb-style buttons for Year and Month are positioned in the header, making it easy to jump directly between levels without needing back navigation. With a clean layout, subtle animations, and intuitive flow, CalendarLume offers a clear and user-friendly way to explore dates across large ranges of time.
"use client";
import { CalendarLume } from "@/components/ui/calendar-lume";
export default function CalendarDemoPage() {
return (
<div className="min-h-screen flex items-center justify-center to-slate-200 p-6">
<div className="w-full max-w-xl">
<h1 className="text-3xl font-semibold text-center mb-6">
Better Calendar Demo
</h1>
<CalendarLume />
</div>
</div>
);
}
Dependencies
Published
Similar components
Explore more
Part of Ruixen UI — browse the full library on 21st.dev.