Zag.js coverage
Manti UI adapts Zag.js machines through @manti-ui/folds. React components
connect those machines and render the public anatomy; CSS owns appearance.
const service = useMachine(component.machine, { id: useId(), ...props });
const api = component.connect(service, normalizeProps);Status
✅ shipped · ⬜ not implemented · 📦 built, then shelved
| Area | Components |
|---|---|
| Inline behavior | ✅ Toggle, Switch, Checkbox, RadioGroup, Collapsible, Accordion, Tabs, Tooltip |
| Overlays | ✅ Dialog, Popover, HoverCard, Menu, Toast |
| Form inputs | ✅ NumberInput, PinInput, Slider, TagsInput, Editable, ToggleGroup |
| Selection | ✅ Select, Combobox, Listbox, TreeView, Pagination |
| Display and media | ✅ Avatar, Progress, RatingGroup, Carousel, Clipboard, FileUpload, SignaturePad · 📦 QrCode |
| Date and advanced | ✅ DatePicker, TimePicker, Steps, Tour, Splitter, ColorPicker, NavigationMenu, FloatingPanel · 📦 Timer · ⬜ AngleSlider |
Reused machines
Some components reuse an existing adapter:
| Component | Machine |
|---|---|
| Calendar | DatePicker |
| ContextMenu | Menu |
| Drawer | Dialog |
| SegmentedControl | RadioGroup |
Manti also authors framework-agnostic behavior for Shortcut, Swipe, and DataTable. Marquee and ScrollArea are Manti components without Zag machines.
Shelved source remains under backlog/ and ships in no package. See the
component catalog for currently available React components.
Last updated