Pro

Mini calendar

A strip of days for choosing one close to now. The arrows turn a whole strip, arrow keys move the choice a day at a time and turn the strip at its edge, today carries the accent and days with something on them carry a mark.

Pro

pnpm dlx shadcn@latest add @caliper/mini-calendar

Book a review with Amara

30 minutes · video call

October – November 2026

Installs components/ui/mini-calendar.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

When to use

Use it for

Booking steps, agendas and day-filtered feeds where the next week or two is what matters.
Narrow spaces where a month grid is too tall.

Skip it when

Dates far away or in the past; use the date picker.
Ranges; use the date range picker.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Radio group keys: The days are one radio group: Tab reaches the chosen day, arrows move and choose, Home and End jump to the strip's ends.
Turns follow direction: A new strip slides in from the side you moved toward, by 10px, so the change is felt without travelling.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/mini-calendar

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { MiniCalendar } from "@/components/ui/mini-calendar"

The worked example comes with Pro

The 40-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

MiniCalendar

component

PropTypeDefaultDescription

labelstring"Choose a day"

selectedstring | null—ISO date, e.g. "2026-10-21".

defaultSelectedstring—

onSelect((iso: string) => void)—

startstring—The first day in view. Defaults to the selected day, or today.

daysnumber7How many days the strip shows.

minstring—

maxstring—

marks((iso: string) => string | undefined)—A short note for a day with something on it ("2 bookings"); the day shows a mark and the note is read with it.

localestring"en-US"

classNamestring—

It exposes radiogroup and radio semantics, with aria-live, aria-label, aria-checked and aria-disabled kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour

←Moves to the previous item or value.

→Moves to the next item or value.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.