primitives

DatePicker

A Popover calendar over an Input-styled trigger — replaces the native `<input type="date">` / OS picker so it's on-brand and theme-able. i18n-library-neutral: pass `locale` + your own labels.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/date-picker.json

Or import from the workspace package:

import { DatePicker } from "@8maverik8/design";

Examples

Calendar field

An empty value means no date. Month nav, Monday-start grid (set `weekStartsOn`), today ring, and clear/today actions. The value is an ISO `YYYY-MM-DD` string.

const [value, setValue] = useState("");

<DatePicker
  className="w-56"
  value={value}
  onChange={setValue}
  placeholder="No date"
  locale="en-US"
/>

Guidelines

Use for any date a user picks in a form (campaign expiry, start/end dates).
Use a raw `<input type="date">` — it opens the OS picker, which ignores your theme and locale rules.The trigger carries data-slot="input" so it matches (and is skinned like) every other field; the calendar paints in your tokens.
Pass `locale` (BCP-47) so month/weekday names follow the active language, and `clearLabel`/`todayLabel` from your i18n catalog.
Couple it to one i18n library — it takes plain `locale`/label props on purpose, so it stays framework-neutral.