Command Palette

Search for a command to run...

Docs
Calendar Lume

Calendar Lume

An animated calendar with year/month/day step navigation and smooth transitions

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

PropTypeDefaultDescription
startYearnumber1900Minimum selectable year
endYearnumber2100Maximum selectable year
initialDateDate-Initial selected date
onChange(date: Date | undefined) => void-Callback when date changes
classNamestring-Additional CSS classes
showYearSelectorbooleantrueShow year selection step
showMonthSelectorbooleantrueShow 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