Date Picker

Install

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

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

import { DatePicker } from "@brika/clay/components/date-picker";

A minimal example

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

'use client';

import { DatePicker } from '@brika/clay/components/date-picker';

/**
 * Uncontrolled trigger, opens a single-month calendar and shows the placeholder until a date is picked.
 */
export default function DatePickerDefaultDemo() {
  return <DatePicker placeholder="Pick a date" />;
}

Date Picker, every way

'use client';

import { DatePicker } from '@brika/clay/components/date-picker';
import { useState } from 'react';

/** Controlled with `useState`, the parent owns the selected date and can read or reset it at any time. */
export default function DatePickerControlledDemo() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return <DatePicker value={date} onValueChange={setDate} />;
}

'use client';

import { DatePicker } from '@brika/clay/components/date-picker';

/** Pass any date-fns format string via `formatStr` to change how the trigger label renders. */
export default function DatePickerCustomFormatDemo() {
  return <DatePicker formatStr="yyyy-MM-dd" placeholder="YYYY-MM-DD" />;
}

'use client';

import { DateRangePicker } from '@brika/clay/components/date-picker';
import { useState } from 'react';
import type { DateRange } from 'react-day-picker';

/** `DateRangePicker` selects a `from`/`to` pair and renders two months by default. */
export default function DateRangePickerDemo() {
  const [range, setRange] = useState<DateRange | undefined>();

  return <DateRangePicker value={range} onValueChange={setRange} />;
}

Accessibility

• › Trigger is a real <button> carrying aria-expanded and aria-controls for the popover.
• › Calendar inside inherits full keyboard navigation from react-day-picker (arrows, Enter/Space, Page Up/Down).
• › Selecting a date closes the popover and returns focus to the trigger.
• › Provide an external aria-label on the trigger when the formatted date alone does not describe the field.

Theme tokens

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

Override in a theme

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

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

  "components": {
    "datePicker": {
      "triggerPlaceholderColor": "var(--muted-foreground)"
    }
  }
}

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

API reference

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