Mini Calendar

Powered by

lucidedate-fns

When to use

The Mini Calendar component provides compact date selection for recent dates. Use this decision tree to determine when it's appropriate:

Installation

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

Controlled

Custom Layout

Custom Days

Usage

import {
  MiniCalendar,
  MiniCalendarDay,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from '@/registry/components/mini-calendar';

  <MiniCalendar>
    <MiniCalendarNavigation direction="prev" />
    <MiniCalendarDays>{(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}</MiniCalendarDays>
    <MiniCalendarNavigation direction="next" />
  </MiniCalendar>

Props

Credits

• We use Radix UI for the mini calendar component.
• We take our inspiration from Kibo UI for the mini calendar component and style.