Mini Calendar
A composable mini calendar component for picking dates close to today.
lucide
date-fnsInstallation
npx shadcn@latest add @redpanda/mini-calendarpnpm dlx shadcn@latest add @redpanda/mini-calendaryarn dlx shadcn@latest add @redpanda/mini-calendarbunx shadcn@latest add @redpanda/mini-calendarnubx shadcn@latest add @redpanda/mini-calendaraube dlx shadcn@latest add @redpanda/mini-calendarWhen to use
The Mini Calendar component provides compact date selection for recent dates. Use this decision tree to determine when it’s appropriate:
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 dates with the selected color tokens
- Announces selected dates with
aria-pressedand supports native keyboard activation - Keeps date-action appearance fixed; use containing elements for layout spacing
- 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
This example displays seven days and disables weekends.
Usage
import { MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation,} from '@/components/redpanda-ui/mini-calendar';<MiniCalendar> <MiniCalendarNavigation direction="prev" /> <MiniCalendarDays>{(date) => <MiniCalendarDay date={date} key={date.toISOString()} />}</MiniCalendarDays> <MiniCalendarNavigation direction="next" /></MiniCalendar>Date-action behavior
MiniCalendarDay owns its month/day label, selected and today appearance, focus feedback, and loading treatment.
It supports native button attributes, refs, render, nativeButton, focusableWhenDisabled, disabled,
isLoading, and testId. The default native type is button, so selecting a date does not submit an enclosing form.
Loading keeps the date’s accessible name, marks it busy, and prevents selection.
The day action does not accept general Button variant, size, weight, shape, icon, navigation aliases,
className, style, or replacement children. Put layout spacing on a containing element. Control selection with
MiniCalendar’s value, defaultValue, and onValueChange, rather than setting aria-pressed yourself.
MiniCalendarNavigation remains an ordinary Button-based navigation control; custom render elements keep their
existing appearance API and should provide an accessible name when they contain only an icon.
A day action calls a supplied onClick before changing the selected date. Use event.preventDefault() or
event.preventBaseUIHandler() to cancel selection. An ordinary click handler no longer replaces the internal
selection handler:
<MiniCalendarDay date={date} onClick={(event) => { if (!canSelectDate(date)) { event.preventDefault(); } }}/>Credits
- We take our inspiration from Kibo UI for the mini calendar component and style.