Krawma Design System

Calendar

uistable

Calendar — extracted 1:1 from WEM-App.

npx shadcn add @krawma/calendar

npm: lucide-react@^1.22.0, react-day-picker@^9.14.0 · registry: @krawma/button, @krawma/utils

Preview

July 2026
States
selectedtodaydisabledoutsidefocus-visible
Keyboard
ArrowLeftArrowRightArrowUpArrowDownEnterHomeEndPageUpPageDown
Depends on
buttonutils

Purpose

An inline month-grid date picker (built on react-day-picker). For a compact field that opens a calendar in a popover and emits an ISO string, use date-picker — which composes this.

Anatomy

Calendar (+ CalendarDayButton). Modes: single, multiple, range. Navigation chevrons reuse the button styling.

Style

No variants — token-backed grid. Selected day uses --primary; today, outside-month, and disabled days have distinct token treatments.

Behavior & functionality

Controlled (selected + onSelect) or uncontrolled; mode sets single/multiple/ range selection. Works in local Date objects — convert at the boundary (see the date lib / date-picker).

Accessibility

  • Grid semantics with full keyboard nav: arrows move by day, Home/End week edges, PageUp/PageDown months, Enter selects. Disabled days are skipped; the focused day is announced.

Do / Don't

  • ✅ Use inline for always-visible date selection (e.g. a scheduling panel).
  • ❌ Don't hand-roll ISO conversion at call sites — prefer date-picker for form fields.