Component Overview
The Kikumi3n Design System provides 46 production-ready components organized into categories.
Categories
Form Controls
| Component | Description | Radix UI |
|---|---|---|
| Button | Primary action trigger | — |
| IconButton | Icon-only button | — |
| Input | Text input field | — |
| Textarea | Multi-line text input | — |
| Checkbox | Checkbox control | ✅ |
| Radio | Radio group | ✅ |
| Select | Dropdown select | ✅ |
| Switch | Toggle switch | ✅ |
| Label | Form label | ✅ |
| DatePicker | Date selection | — |
| FileUpload | File upload area | — |
| Form | Form wrapper with validation | — |
Data Display
| Component | Description | Radix UI |
|---|---|---|
| Card | Content container | — |
| Badge | Status indicator | — |
| Tag | Categorization label | — |
| Avatar | User/entity avatar | — |
| Table | Data table | — |
| StatCard | Metric display card | — |
| Code | Code display | — |
| EmptyState | No data placeholder | — |
Feedback
| Component | Description | Radix UI |
|---|---|---|
| Spinner | Loading spinner | — |
| Skeleton | Content placeholder | — |
| Progress | Progress indicator | — |
| Alert | Alert message | — |
| Toast | Notification toast | ✅ |
| Tooltip | Hover tooltip | ✅ |
Navigation
| Component | Description | Radix UI |
|---|---|---|
| Tabs | Tab navigation | ✅ |
| Breadcrumb | Page breadcrumbs | — |
| Pagination | Page navigation | — |
| Navbar | Application navbar | — |
| Sidebar | Side navigation | — |
| Link | Styled link | — |
| Stepper | Multi-step progress | — |
Overlay
| Component | Description | Radix UI |
|---|---|---|
| Modal | Dialog modal | ✅ |
| Drawer | Slide-out panel | — |
| DropdownMenu | Dropdown menu | ✅ |
| ContextMenu | Right-click menu | ✅ |
| Popover | Popover content | ✅ |
| Command | Command palette | — |
Layout
| Component | Description |
|---|---|
| Container | Max-width container |
| Stack | Flex layout (vertical/horizontal) |
| Grid | Grid layout |
| Divider | Visual separator |
Theming
| Component | Description |
|---|---|
| ThemeProvider | Theme context provider |
Component Pattern
Every component follows the same pattern:
import { forwardRef } from 'react';
import clsx from 'clsx';
import styles from './Component.module.css';
export interface ComponentProps { /* typed props */ }
export const Component = forwardRef<HTMLElement, ComponentProps>(
(props, ref) => { /* implementation */ }
);
- ✅
forwardReffor composition - ✅ Typed props interface (exported)
- ✅ CSS Modules (scoped
k3n-*class names) - ✅ Radix UI for complex interactive components