ui-lab
Testable UI specifications with a React reference implementation, delivered as a shadcn/ui registry.
Components
Forms & inputs
- Switch
- Radio Group
- Slider
- Range Slider
- Color Area
- Color Picker
- Swatch Picker
- Stepper
- Hold Stepper
- Scrubber
- Combobox
- Debounced Search
- Hotkey Search
- Listbox
- Typeahead Listbox
- Multi Combobox
- Mention Input
- Tag Input
- OTP Input
- Password Field
- Dropzone
- Masked Input
- Submit Field
- Validated Field
- Async Validation
- Async Combobox
- Error Summary
- Char Counter
- Inline Edit
- Date Picker
- Date Range Picker
- Range Calendar
- Time Field
- Toggle Group
- Rating
Buttons & menus
Navigation
Data display
Editing & canvas
Disclosure & layout
Accessibility foundations
Examples
Whole-app compositions assembled from the certified components above.
- Finder — a file browser (menubar + toolbar + breadcrumb + tree sidebar + tree-grid details)
- Settings — a preferences panel (radio group + stepper + toggle group + validated field + switches)
- Mail — an inbox (toolbar + split button + radio group + select table)
- Dashboard — a metrics view (toolbar + meter + progress bar + rating + sortable table)
- Studio — a productivity workspace (toolbar + rich text + spreadsheet + kanban + range calendar)
- Planner — a project-planning workspace (toolbar + gantt + reorder columns + tree reorder + crop frame)
How it works
Each component is defined by a normative specification and a suite of implementation-agnostic Playwright conformance tests. Any implementation that serves the fixture contract can be certified, the way Web Platform Tests certify browsers. The React reference implementation is one such conforming implementation.