Loading...
Installation
Usage
import { CalendarLume } from "@/components/ruixen/calendar-lume";
import { useState } from "react";
export default function App() {
const [date, setDate] = useState<Date>();
return (
<CalendarLume
initialDate={date}
onChange={setDate}
startYear={2000}
endYear={2030}
className="max-w-md"
/>
);
}
Props
Prop | Type | Default | Description |
---|---|---|---|
startYear | number | 1900 | Minimum selectable year |
endYear | number | 2100 | Maximum selectable year |
initialDate | Date | - | Initial selected date |
onChange | (date: Date | undefined) => void | - | Callback when date changes |
className | string | - | Additional CSS classes |
showYearSelector | boolean | true | Show year selection step |
showMonthSelector | boolean | true | Show month selection step |
Features
- Step Navigation: Year → Month → Day progression
- Smooth Animations: Framer Motion powered transitions
- Breadcrumb Controls: Easy navigation between steps
- Configurable Range: Set custom year ranges
- Backdrop Blur: Modern glassmorphism design
- Responsive Grid: Adaptive layout for all screen sizes