// the find
chakra-ui/zag
Build your design system in React, Solid, Vue or Svelte. Powered by finite state machines
Zag models UI component behavior as finite state machines — things like menus, dialogs, date pickers — then provides thin adapters for React, Vue, Solid, and Svelte so the same logic runs everywhere. It's aimed at teams building their own design system who want correct, accessible primitives without adopting a full component library.
The state machine approach actually earns its complexity: keyboard navigation, focus trapping, and ARIA attribute management are notoriously hard to get right across frameworks, and encoding them once in a machine rather than re-implementing per-framework is the right call. The WAI-ARIA spec compliance is tested with real Playwright e2e suites across all four frameworks, not just unit tests against mocks — that's a meaningful quality signal. Component coverage is genuinely broad: date picker, color picker, image cropper, floating panel, drawer with snap points — these are the hard ones that most headless libraries skip or half-implement. The monorepo structure with per-component packages means you pull in only what you use.
The API surface is verbose — you need to wire up `useMachine`, `connect`, and `normalizeProps` just to render a toggle button, which is more boilerplate than Radix or Headless UI for the common case. The custom state machine implementation diverges from XState, so anyone who already knows XState has to re-learn the API, and you lose the XState tooling ecosystem (visualizer, devtools). Documentation quality is uneven; the core concepts are explained well but edge cases and composition patterns often require reading the source or examples. Bundle size per-component hasn't been publicly benchmarked against alternatives, and with the overhead of a full state machine runtime per component, there's a real question about whether it's appropriate for lightweight apps vs. dedicated design systems.