║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Mini Calendar description: A composable mini calendar component for picking dates close to today. icon: Calendar dependencies:

• https://lucide.dev/
• https://date-fns.org/ installer: mini-calendar

---

Features

• Displays a configurable number of consecutive days (default: 5) in a compact horizontal layout
• Navigation with chevron buttons to move between date ranges by the configured number of days
• Fully composable with separate components for navigation, days container, and individual days
• Supports both controlled and uncontrolled usage with value/defaultValue and onValueChange props
• Highlights today's date with accent background and selected date with default button variant
• Built with accessibility in mind using semantic HTML and ARIA attributes
• Customizable styling through className props on all components
• Context-based state management between components using React Context
• Supports custom start dates with startDate/defaultStartDate and onStartDateChange props

Examples

Basic Usage

<Preview path="mini-calendar" />

Controlled

<Preview path="mini-calendar-controlled" />

Custom Layout

<Preview path="mini-calendar-custom" />

Custom Days

<Preview path="mini-calendar-days" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║