Components · UI Primitives
Calendar
Date picker; selected day uses the purple accent.
‹July 2026›
SMTWTFS
12345
6789101112
13141516171819
Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode | single | range | multiple | single | Selection behavior. |
selected | Date | DateRange | — | Current selection. |
onSelect | (date) => void | — | Selection callback. |
disabled | matcher | — | Days to disable. |
Reference API for the design concept — align names and types with your implementation.
Guidelines
- Use in the active theme; the component adapts to light and dark automatically.
- Keep the purple accent for interactive states only — never as a fill or background.
- Copy the markup from the Code tab and wire it to
base.csstokens.