BLD8 / ui
Forms

Calendar.

Dates with predictable keyboard navigation and clear selection.

LIVE PREVIEWTry it. It works.
October 2026

Selected 13/10/2026

Install the source

Terminal
npx shadcn@latest add https://ui.bld8.dev/r/calendar.json

Registry setup · Open the playground

Usage

React / TypeScript
<Calendar label="Review date" value={date} onValueChange={setDate}
  minDate={new Date(2026,9,5)} />
<Calendar mode="range" value={range} onValueChange={setRange} />

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Styled React DayPicker 10.0.2, using the shared light/dark tokens. Controlled single-date or range selection, defaultMonth, minDate/maxDate, locale, weekStartsOn and disabled. Arrow/Home/End/PageUp/PageDown navigation is maintained upstream. Values are local Date objects; use formatDateValue for date-only YYYY-MM-DD values. No time or timezone scheduling is implied.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.