Component · C-063

Calendar

A dependency-free monthly date grid. It uses a table with weekday headers, roving tabindex and full keyboard navigation; the KotenProvider locale decides the week start and the Intl names.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/date-picker.json

Requirements

• KotenProvider: useKoten supplies labels.previous/next and the locale; useKotenFormatters builds the month, weekdays and each date's accessible name with Intl.

Accessibility

• The grid is a table with weekday headers and a full accessible name on every date.
• Roving tabindex: only the focused day has tabindex=0, so the grid is a single tab stop.
• Arrows, Home/End, PageUp/PageDown, Enter and Space are supported; aria-pressed marks selection and aria-current="date" marks today.
• The KotenProvider locale decides the week start and the month and weekday names.

Read the whole page

• Markdown page
• Agent index (llms.txt)
• Full documentation (llms-full.txt)

Koten UI · llms.txt · llms-full.txt · Markdown