Description
Accessible UI Component Library is the Tier-1 implementation of Dots interaction patterns. It includes buttons, fields, dialogs, drawers, popovers, menus, comboboxes, tabs, tooltips, toasts, state views, drag/drop affordances, timeline and data patterns, semantic layout helpers, typography, status indicators, and shell overlay anatomy. Components are owned source built on proven accessibility primitives and wired to the Dots token system.
The library carries behavior modules should not re-decide: focus restoration, overlay stacking, visible focus, invalid-field relationships, keyboard roving, reduced motion, accessible names, state announcements, and semantic empty/error presentation. Consumers import stable subpaths and compose application-specific copy and data rather than rebuilding interaction foundations.
Selling Points
- Gives product teams production-ready interaction building blocks that already match Dots visual and accessibility rules.
- Centralizes difficult focus, keyboard, overlay, and validation behavior, reducing regressions across modules.
- Speeds feature delivery without sacrificing a distinctive product identity to generic component defaults.
- Keeps layout, typography, state, and form anatomy consistent for users moving between modules.
- Provides composable source and typed props, allowing developers to build new workflows without forking primitives.
User Story
An internal or SDK developer builds a permission editor using FieldShell, inputs, switches, a popover, status badges, and a confirmation dialog. Keyboard navigation, focus restoration, validation relationships, overlay order, token styling, and reduced motion work consistently because each concern comes from the shared library.
Extension Surface
The library is extensible through composition and typed component contracts. packages/ui/src/components/primitives/index.ts publishes the primitive roster, packages/ui/src/components/layout/index.ts supplies semantic layout building blocks, and packages/ui/src/lib/overlay-layer.tsx offers the central overlay band seam. It is designed for in-repo and SDK consumption but does not accept runtime component registrations.
Capabilities & Limits
- Supplies reusable form, navigation, overlay, feedback, layout, typography, state, and shell components.
- Encodes keyboard, focus, validation, reduced-motion, and accessible-name behavior.
- Exposes stable package subpaths for focused consumption.
- Limit: Tier-1 primitives carry no module-specific data client or chrome copy, and brand component defaults are not general theme variants.
Implementation Map
packages/ui/src/components/primitives/index.tspackages/ui/src/components/patterns/FieldShell.tsxpackages/ui/src/lib/overlay-layer.tsxpackages/ui/src/hooks/useRovingFocus.tspackages/ui/src/components/layout/index.ts