Package coverage
Every component is documented on this site, but not every component ships as a ready-to-use React or web-component package yet. Use the matrix below to confirm what each package provides before installing.
Summary
- @kaharagia/design-system (CSS classes + tokens) — 50/50 components covered.
- @kaharagia/react — 19/50 components covered.
- @kaharagia/web-components — 11/50 components covered.
Components without a React or web-component implementation can still be used: compose them in plain JSX/HTML using the CSS classes documented on each component page. Adding more components to the framework-specific packages is an ongoing effort — see Updates for the latest additions.
Coverage matrix
| Component | CSS | React | Web Component |
|---|---|---|---|
| Accordion | ✓ | — | — |
| Alerts | ✓ | ✓ | ✓ |
| Autocomplete | ✓ | — | — |
| Avatar | ✓ | — | — |
| Back Link | ✓ | ✓ | ✓ |
| Badge | ✓ | — | — |
| Breadcrumbs | ✓ | ✓ | — |
| Buttons | ✓ | ✓ | ✓ |
| Cards | ✓ | — | — |
| Character Count | ✓ | — | — |
| Checkboxes | ✓ | ✓ | — |
| Cookie Banner | ✓ | — | — |
| Date Input | ✓ | — | — |
| Details | ✓ | ✓ | — |
| Empty States | ✓ | — | — |
| Error Message | ✓ | ✓ | ✓ |
| Error Summary | ✓ | ✓ | — |
| Exit This Page | ✓ | — | — |
| Fieldset | ✓ | — | — |
| File Download | ✓ | — | — |
| File Upload | ✓ | — | — |
| Hint | ✓ | ✓ | ✓ |
| Inset Text | ✓ | ✓ | ✓ |
| Label | ✓ | ✓ | ✓ |
| Lists | ✓ | — | — |
| Modal | ✓ | — | — |
| Notification | ✓ | — | — |
| Pagination | ✓ | — | — |
| Panel | ✓ | ✓ | ✓ |
| Password Input | ✓ | — | — |
| Phase Banner | ✓ | — | — |
| Progress Indicator | ✓ | — | — |
| Radios | ✓ | ✓ | — |
| Search Box | ✓ | — | — |
| Select | ✓ | ✓ | — |
| Service Navigation | ✓ | — | — |
| Signature Pad | ✓ | — | — |
| Skip Link | ✓ | — | — |
| Spinner | ✓ | — | — |
| Status Dot | ✓ | — | — |
| Summary List | ✓ | ✓ | — |
| Tables | ✓ | — | — |
| Tabs | ✓ | — | — |
| Tags | ✓ | ✓ | ✓ |
| Task List | ✓ | — | — |
| Text Input | ✓ | ✓ | ✓ |
| Textarea | ✓ | ✓ | — |
| Timeline | ✓ | — | — |
| Tooltip | ✓ | — | — |
| Warning Text | ✓ | ✓ | ✓ |
If a component you need isn't in your package
- Read the component's showcase page to see the documented HTML and CSS class structure.
- Use those classes directly in your application's JSX/templates — the CSS ships in
@kaharagia/design-systemand is available on every page that imports it. - For interactive components (Modal, Tabs, Accordion, Tooltip), the showcase uses Radix UI primitives underneath. You can adopt the same approach in your own codebase until a first-party React component lands.
Roadmap
Framework-package parity with the CSS layer is the v2 medium-term goal. Priority order for new React/web-component implementations is roughly:
- Modal, Tabs, Accordion, Tooltip (high-traffic interactives currently CSS+Radix only).
- Avatar, Cards, Pagination, Status Dot (common composition primitives).
- Date Input, File Upload, Search Box, Autocomplete (form primitives beyond the basics).
- Notification, Cookie Banner, Empty States (page-level feedback patterns).