Forms · Application UI
Calendar
Date picker built on react-day-picker, dressed in byronwade/ui tokens, selection follows --brand, the range bar uses bg-accent, and nav + day cells reuse buttonVariants. Supports single, multiple, and range modes.
@byronwade/foundation@byronwade/utils@byronwade/buttonreact-day-pickerdate-fns@phosphor-icons/react
Feature showcase
Installation
Features
4 examples
Default, Range Presets, Appointment, Pricing.
API
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | registry | Installed through the byronwade/ui registry. |
| react-day-picker | npm | Installed from npm. |
| date-fns | npm | Installed from npm. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/ui/calendar.tsx |
| Default example | content/examples/calendar/default.tsx |
| Range Presets example | content/examples/calendar/range-presets.tsx |
| Appointment example | content/examples/calendar/appointment.tsx |
| Pricing example | content/examples/calendar/pricing.tsx |