Forms

Mini Calendar

A compact horizontal strip of selectable days with previous/next navigation, ideal as a space-efficient date picker for toolbars, popovers, and inline forms.

Source Intl.DateTimeFormat

Preview

GitHub

'use client';

import {
  MiniCalendar,
  MiniCalendarDay,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from '@brika/clay/components/mini-calendar';
import { useState } from 'react';

/** A five-day strip with prev/next navigation; selection is controlled. */
export default function MiniCalendarDefaultDemo() {
  const [date, setDate] = useState<Date>(() => new Date());

  return (
    <div className="space-y-3">
      <MiniCalendar value={date} onValueChange={setDate}>
        <MiniCalendarNavigation direction="prev" />
        <MiniCalendarDays>{(day) => <MiniCalendarDay date={day} />}</MiniCalendarDays>
        <MiniCalendarNavigation direction="next" />
      </MiniCalendar>
      <p className="text-clay-subtle text-xs">
        Selected:{' '}
        {date.toLocaleDateString(undefined, {
          weekday: 'long',
          month: 'long',
          day: 'numeric',
          year: 'numeric',
        })}
      </p>
    </div>
  );
}

01 Installation

Install

Pull Mini Calendar from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { MiniCalendar } from "@brika/clay";

tsxGranular1 line

import { MiniCalendar } from "@brika/clay/components/mini-calendar";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxMini Calendar.tsx33 lines

'use client';

import {
  MiniCalendar,
  MiniCalendarDay,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from '@brika/clay/components/mini-calendar';
import { useState } from 'react';

/** A five-day strip with prev/next navigation; selection is controlled. */
export default function MiniCalendarDefaultDemo() {
  const [date, setDate] = useState<Date>(() => new Date());

  return (
    <div className="space-y-3">
      <MiniCalendar value={date} onValueChange={setDate}>
        <MiniCalendarNavigation direction="prev" />
        <MiniCalendarDays>{(day) => <MiniCalendarDay date={day} />}</MiniCalendarDays>
        <MiniCalendarNavigation direction="next" />
      </MiniCalendar>
      <p className="text-clay-subtle text-xs">
        Selected:{' '}
        {date.toLocaleDateString(undefined, {
          weekday: 'long',
          month: 'long',
          day: 'numeric',
          year: 'numeric',
        })}
      </p>
    </div>
  );
}

03 Examples

Mini Calendar, every way

Localized

Weekday and day labels follow the `locale` prop via `Intl.DateTimeFormat`, shown here in French with `days={7}`.

GitHub

'use client';

import {
  MiniCalendar,
  MiniCalendarDay,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from '@brika/clay/components/mini-calendar';
import { useState } from 'react';

/** Weekday and day labels follow the `locale` prop via `Intl.DateTimeFormat`, shown here in French with `days={7}`. */
export default function MiniCalendarLocalizedDemo() {
  const [date, setDate] = useState<Date>(() => new Date());

  return (
    <MiniCalendar value={date} onValueChange={setDate} locale="fr-FR" days={7}>
      <MiniCalendarNavigation direction="prev" />
      <MiniCalendarDays>{(day) => <MiniCalendarDay date={day} />}</MiniCalendarDays>
      <MiniCalendarNavigation direction="next" />
    </MiniCalendar>
  );
}

Preselected

Start with a date already chosen using `defaultValue` (uncontrolled).

GitHub

'use client';

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

/** Start with a date already chosen using `defaultValue` (uncontrolled). */
export default function MiniCalendarPreselectedDemo() {
  return (
    <MiniCalendar defaultValue={new Date()}>
      <MiniCalendarNavigation direction="prev" />
      <MiniCalendarDays>{(day) => <MiniCalendarDay date={day} />}</MiniCalendarDays>
      <MiniCalendarNavigation direction="next" />
    </MiniCalendar>
  );
}

Seven Days

Show a full week at once by setting `days={7}`.

GitHub

'use client';

import {
  MiniCalendar,
  MiniCalendarDay,
  MiniCalendarDays,
  MiniCalendarNavigation,
} from '@brika/clay/components/mini-calendar';
import { useState } from 'react';

/** Show a full week at once by setting `days={7}`. */
export default function MiniCalendarSevenDaysDemo() {
  const [date, setDate] = useState<Date>(() => new Date());

  return (
    <MiniCalendar value={date} onValueChange={setDate} days={7}>
      <MiniCalendarNavigation direction="prev" />
      <MiniCalendarDays>{(day) => <MiniCalendarDay date={day} />}</MiniCalendarDays>
      <MiniCalendarNavigation direction="next" />
    </MiniCalendar>
  );
}

04 Accessibility

Accessibility

The strip is wrapped in role="group" with an aria-label so assistive tech announces it as a single date picker.
Day cells are real <button>s, keyboard-focusable with Enter/Space activating selection.
Each day carries aria-pressed and a localized aria-label (e.g. "Monday, June 8, 2026"); nav buttons are labelled "Previous days" / "Next days".
Weekday and day labels are formatted with Intl.DateTimeFormat, so a locale prop localizes the visible text for assistive tech too.

05 Tokens 8 theme-overridable

Theme tokens

Every CSS variable Mini Calendar reads, with its default and the dotted path you'd write in a ThemeConfig JSON to override it. Set any of these in your theme to retune Mini Calendar without touching component code.

Mini Calendar tokens

8 tokens

ColorFill, border, and text colors.5

--mini-calendar-day-labelcolorvar(--foreground)
components.miniCalendar.dayLabel
Day-number text color at rest.
--mini-calendar-weekdaycolorvar(--muted-foreground)
components.miniCalendar.weekday
Weekday-abbreviation text color at rest.
--mini-calendar-day-hovercolorvar(--accent)
components.miniCalendar.dayHover
Day cell background on hover.
--mini-calendar-day-selectedcolorvar(--primary)
components.miniCalendar.daySelected
Selected day cell background.
--mini-calendar-day-selected-labelcolorvar(--primary-foreground)
components.miniCalendar.daySelectedLabel
Selected day cell text color.

GeometrySizes, lengths, and corner radii.1

--mini-calendar-radiusradiusvar(--radius-control)
components.miniCalendar.radius
Corner radius of a day cell.

MotionAnimation duration and easing.2

--mini-calendar-durationdurationvar(--motion-standard-duration)
components.miniCalendar.duration
Transition duration for mini-calendar state changes.
--mini-calendar-easingeasingvar(--motion-standard-easing)
components.miniCalendar.easing
Transition easing for mini-calendar state changes.

Override in a theme

Authoring a theme is plain JSON. Drop overrides under components.miniCalendar, the names are camelCase versions of the variable suffix.

jsonmy-theme.json12 lines

{
  "id": "my-theme",
  "name": "My Theme",
  "description": "...",
  "accentSwatches": ["#000"],

  "components": {
    "miniCalendar": {
      "radius": "var(--radius-control)"
    }
  }
}

Then apply with applyTheme(myTheme) (see the theming guide), scope it to a subtree with themeToCssVars(myTheme, mode), or consume any token directly in your own JSX with the matching Tailwind utility (e.g. bg-mini-calendar-…) — see the chips on each token row.

06 API reference

API reference

Props specific to Mini Calendar. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<MiniCalendar />

8 props

daysdefault 5
number
Number of days shown at once. Defaults to 5.
defaultStartDate
Date
Left-most visible date on first render (uncontrolled).
defaultValue
Date
Selected date on first render (uncontrolled).
locale
Intl.LocalesArgument
BCP 47 locale(s) used to format the weekday, day number, and accessible label via Intl.DateTimeFormat. Defaults to the runtime's locale.
onStartDateChange
(date: Date) => void
Fires with the new range start when the user navigates.
onValueChange
(date: Date) => void
Fires with the newly selected date.
startDate
Date
Left-most visible date (controlled). Pair with onStartDateChange.
value
Date
Selected date (controlled). Pair with onValueChange.

<MiniCalendarContext />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<MiniCalendarDay />

1 prop

date*
Date
The date this cell represents.

<MiniCalendarDays />

1 prop

className
string
No description.

<MiniCalendarNavigation />

1 prop

direction*
'prev' | 'next'
Which way the strip moves when pressed.