Components
Overview
All 250+ Officina UI components by category — start here to find the right primitive.
Every component below ships in @officina/ui. Pages include a live demo and a
props table generated from the component source.
Compound components are documented on one page, not one page per part: Card
covers CardHeader, CardTitle, CardDescription, CardContent, and
CardFooter; Table covers its seven section and cell parts; List, Form,
AppBar, and Page layout work the same way.
Categories
| Category | What's in it | Start with |
|---|---|---|
| Inputs & Forms | Text, number, date, and selection controls, plus the Form composition and validation wiring | Form, Input, Select |
| Buttons & Actions | Buttons, toggles, menus, and action toolbars | Button, ActionMenu |
| Navigation | Tabs, menus, breadcrumbs, steppers, and app chrome | Tabs, AppBar |
| Overlays & Popups | Modals, drawers, popovers, tooltips, and context menus | Modal, Popover |
| Feedback & Status | Alerts, banners, loading and empty states, progress, badges | Alert, EmptyState |
| Data Display | Lists, cards, avatars, timelines, boards, and code/text viewers | Card, List |
| Tables & Data Grids | Hand-composed Table plus the data-driven DataTable and DataGrid | Table, DataTable |
| Filters | The filter model, builder UI, chips, and per-type filter controls | FilterBar |
| Charts | 18 chart types built on ECharts | LineChart, BarChart |
| Media | Images, lightbox, cropper, map, player, QR and barcodes | ImageList |
| Layout | Boxes, grids, stacks, panels, and the page layout parts | Stack, Page layout |
| Content & Typography | Text styling, links, animated numbers | Typography |
| Motion & Effects | Animation presets and decorative effects | MotionPreset |
| Utilities | SSR guards, copy fields, top progress bar | NoSSR |
Choosing a table
Three components render tabular data, and picking the wrong one is the most common false start:
- Table — you write the markup by hand. Right for small, static datasets where you want full control.
- DataTable — sorting, filtering, pagination, and selection, driven by a TanStack Table instance you own.
- DataGrid — virtualized, spreadsheet-style grid for large datasets.
DataTable and DataGrid need @tanstack/react-table installed; see
Peer dependencies.