# Rokkit UI Component Library
> Data-driven, accessible UI components for Svelte 5
Rokkit is a component library built around the principle that **data should drive the interface**. Components adapt to any data structure via field mapping — no transformation required. All selection components share a consistent API: `options`/`items`, `value`, `fields`, callbacks.
## Packages
| Package | Description |
|---------|-------------|
| `@rokkit/ui` | Main UI components (30+ components) |
| `@rokkit/forms` | Dynamic form generation from JSON schema |
| `@rokkit/states` | State management (ProxyItem, ProxyTree, Wrapper, ListController, NestedController) |
| `@rokkit/actions` | Svelte actions (navigator, hoverLift, magnetic, ripple) |
| `@rokkit/core` | Core utilities and field mapping |
| `@rokkit/data` | Data manipulation utilities |
| `@rokkit/themes` | CSS themes (rokkit, minimal, material) |
| `@rokkit/icons` | Icon system with Iconify integration |
## Quick Start
```svelte
```
## Standard API Pattern
Most selection components share this pattern:
```svelte
bind:value
fields={{ text: 'name' }}
onchange={(v, item) => {}}
/>
```
## Field Mapping System
Map any data structure without transforming data:
```svelte
```
## Themes
```html
```
Available themes: `rokkit` | `minimal` | `material`
## Component Index
### Selection & Navigation
- [List](/llms/components/list.txt) — vertical list with selection, grouping, lazy loading
- [Tree](/llms/components/tree.txt) — hierarchical tree view with expand/collapse
- [Select](/llms/components/select.txt) — dropdown single-selection with typeahead filter
- [MultiSelect](/llms/components/multiselect.txt) — dropdown multi-selection with pills
- [Toggle](/llms/components/toggle.txt) — radio-style button group
- [Tabs](/llms/components/tabs.txt) — tabbed content panels (horizontal/vertical)
- [Table](/llms/components/table.txt) — sortable data table with row selection
### Menus & Actions
- [Menu](/llms/components/dropdown.txt) — dropdown menu with grouped options
- [Toolbar](/llms/components/toolbar.txt) — horizontal action bar with sections
- [FloatingActions](/llms/components/floating-actions.txt) — floating action button (FAB)
### Form Inputs
- [Form](/llms/components/form.txt) — schema-driven dynamic form
- [CheckBox](/llms/components/checkbox.txt) — checkbox input
- [Switch](/llms/components/switch.txt) — boolean on/off toggle
- [RadioGroup](/llms/components/radiogroup.txt) — radio button group
- [Range](/llms/components/range.txt) — range slider
- [Rating](/llms/components/rating.txt) — star rating input
- [SearchFilter](/llms/components/search-filter.txt) — structured filter parser
### Upload
- [UploadTarget](/llms/components/upload-target.txt) — drag-and-drop file zone with validation
- [UploadProgress](/llms/components/upload-progress.txt) — file upload status orchestrator
### Layout & Display
- [Card](/llms/components/card.txt) — content card container
- [Stepper](/llms/components/stepper.txt) — step indicator / wizard progress
- [ProgressBar](/llms/components/progress-bar.txt) — progress indicator
- [BreadCrumbs](/llms/components/breadcrumbs.txt) — breadcrumb navigation
## Keyboard Navigation
All interactive components support:
| Key | Action |
|-----|--------|
| `Tab` | Move focus between components |
| `ArrowUp/Down` | Navigate items |
| `ArrowLeft/Right` | Expand/collapse or navigate tabs |
| `Enter/Space` | Select/activate |
| `Escape` | Close overlays |
| `Home/End` | Jump to first/last item |
## Import
```javascript
import { List, Tree, Select, MultiSelect, Tabs, Toggle, Table, Toolbar, Menu } from '@rokkit/ui'
import { UploadTarget, UploadProgress } from '@rokkit/ui'
import { FloatingAction } from '@rokkit/ui'
import { Form, FormRenderer } from '@rokkit/forms'
```