Forms

Calendar

An accessible date picker calendar supporting single, range, and multiple selection modes.

Preview

'use client';

import { Calendar } from '@brika/clay/components/calendar';
import { useState } from 'react';
export default function CalendarDefaultDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-lg border"
    />
  );
}

01 Installation

Install

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

tsxBarrel1 line

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

tsxGranular1 line

import { Calendar } from "@brika/clay/components/calendar";

02 Usage

A minimal example

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

tsxCalendar.tsx16 lines

'use client';

import { Calendar } from '@brika/clay/components/calendar';
import { useState } from 'react';
export default function CalendarDefaultDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      className="rounded-lg border"
    />
  );
}

03 Examples

Calendar, every way

Range

GitHub

'use client';

import { Calendar } from '@brika/clay/components/calendar';
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';
export default function CalendarRangeDemo() {
  const [range, setRange] = useState<DateRange | undefined>();

  return (
    <Calendar
      mode="range"
      selected={range}
      onSelect={setRange}
      className="rounded-lg border"
    />
  );
}

Range Two Month

GitHub

'use client';

import { Calendar } from '@brika/clay/components/calendar';
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';
export default function CalendarRangeTwoMonthDemo() {
  const [range, setRange] = useState<DateRange | undefined>();

  return (
    <Calendar
      mode="range"
      numberOfMonths={2}
      pagedNavigation
      selected={range}
      onSelect={setRange}
      className="rounded-lg border"
    />
  );
}

04 Accessibility

Accessibility

Full keyboard navigation: arrow keys move between days, Enter/Space selects, Page Up/Down change months.
Screen readers announce the selected date and current month context.
Disabled dates carry aria-disabled and are skipped by arrow key navigation.
For range selection, AT announces the start and end dates as they are selected.

05 Tokens 23 theme-overridable

Theme tokens

Every CSS variable 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 Calendar without touching component code.

Calendar tokens

23 tokens

ColorFill, border, and text colors.15

--calendar-week-separator-colorcolorvar(--border)
components.calendar.weekSeparatorColor
Color of the row separator drawn below each week. Inherits the theme border color by default; only visible when `week-separator-width` is non-zero.
--calendar-range-barcolorcolor-mix(in oklch, var(--primary) 15%, transparent)
components.calendar.rangeBar
Background color of the range highlight bar between the start and end days.
--calendar-range-bar-hovercolorcolor-mix(in oklch, var(--primary) 20%, transparent)
components.calendar.rangeBarHover
Hover background tint applied over the range bar on range_middle days. Should be slightly more opaque than `range-bar` to read as a hover state.
--calendar-pillcolorvar(--primary)
components.calendar.pill
Background color of the solid day pill for single-day selections and range endpoints (start/end).
--calendar-pill-foregroundcolorvar(--primary-foreground)
components.calendar.pillForeground
Text color of the solid day pill.
--calendar-todaycolorvar(--accent)
components.calendar.today
Background color of the today indicator when the day is not selected.
--calendar-today-foregroundcolorvar(--accent-foreground)
components.calendar.todayForeground
Text color of the today indicator when the day is not selected.
--calendar-day-hovercolorvar(--accent)
components.calendar.dayHover
Background color of a day on hover when it is neither today, selected, nor in a range middle.
--calendar-day-hover-foregroundcolorvar(--accent-foreground)
components.calendar.dayHoverForeground
Text color of a day on hover.
--calendar-weekday-foregroundcolorvar(--muted-foreground)
components.calendar.weekdayForeground
Text color of the weekday-name header row (Su, Mo, Tu, …).
--calendar-outside-foregroundcolorvar(--muted-foreground)
components.calendar.outsideForeground
Text color of days that fall outside the visible month (the leading/trailing greyed-out dates).
--calendar-surface-containercolorvar(--card)
components.calendar.surfaceContainer
Background color of the calendar surface. Defaults to the theme `--card` so the calendar reads as a card-shorthand surface.
--calendar-surface-labelcolorvar(--card-foreground)
components.calendar.surfaceLabel
Default text color of the calendar surface (caption, day numbers). Defaults to the theme `--card-foreground`.
--calendar-surface-bordercolorvar(--border)
components.calendar.surfaceBorder
Border color drawn around the calendar surface. Defaults to the theme `--border`.
--calendar-range-middle-foregroundcolorvar(--foreground)
components.calendar.rangeMiddleForeground
Text color of day numbers inside a selected range (excluding the start/end pills). Defaults to the theme `--foreground`.

GeometrySizes, lengths, and corner radii.5

--calendar-range-margin-ysizecalc(var(--spacing) * 1)
components.calendar.rangeMarginY
Vertical margin between the range highlight bar and the cell edges. Increase to leave more breathing room above and below the bar.
--calendar-week-margin-ysizecalc(var(--spacing) * 2)
components.calendar.weekMarginY
Vertical margin between week rows. Adds breathing room between rows independent of the bar height; useful when the range bar fills the full cell.
--calendar-radiusradiusvar(--radius-control)
components.calendar.radius
Calendar day button corner radius.
--calendar-padding-xsizecalc(var(--spacing) * 4)
components.calendar.paddingX
Inline padding inside the calendar.
--calendar-padding-ysizecalc(var(--spacing) * 4)
components.calendar.paddingY
Block padding inside the calendar.

BorderBorder width and style.1

--calendar-week-separator-widthborder-width1px
components.calendar.weekSeparatorWidth
Width of the horizontal divider drawn below each week row. Set to `0px` to hide the separator entirely.

ElevationDrop shadow and depth.2

--calendar-range-backdrop-blurblur0px
components.calendar.rangeBackdropBlur
Backdrop blur applied to the range highlight bar. Set non-zero for a frosted-glass treatment on the bar itself, independent of the surface blur.
--calendar-backdrop-blurblur0px
components.calendar.backdropBlur
Backdrop blur applied to the calendar surface. Set non-zero for a frosted-glass treatment.

Override in a theme

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

jsonmy-theme.json12 lines

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

  "components": {
    "calendar": {
      "paddingX": "calc(var(--spacing) * 4)"
    }
  }
}

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-calendar-…) — see the chips on each token row.

06 API reference

API reference

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

<Calendar />

1 prop

buttonVariantdefault 'ghost'
'ghost' | 'outline'
Variant for the previous/next navigation buttons.

<CalendarChevron />

1 prop

orientation
'up' | 'down' | 'left' | 'right'
No description.

<CalendarDayButton />

passthrough

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