Headless components for React, Vue, Svelte and Angular. Write it once, run it four ways.
Website · Docs · Compare · Help name it · Early access
Warning
This is work in progress, still research. I'm building it in public. You can follow along on X @productdevbook and on the website.
Focus. Keyboard. ARIA. State. The parts that take months, written once, below the framework. Above it, a thin layer that speaks React, Vue, Svelte and Angular. No styles. Your rules.
Three layers. One behavior.
| Layer | What it holds |
|---|---|
core |
State and logic. No framework, no DOM. |
dom |
Focus, keyboard, pointer, positioning, ARIA. No framework. |
| adapters | Components, props and events in your framework: React, Vue, Svelte, Angular. |
Every adapter runs the same upstream behavior tests, and a parity harness drives the same scenarios with real input in Chromium, Firefox and WebKit and compares the DOM, the events and the focus of all four frameworks. On the Compare page, pick any component and try it in all four frameworks side by side; open one dialog and the other three follow.
On the website now, 35 components in all four frameworks:
- Accordion
- Alert Dialog
- Avatar
- Button
- Checkbox
- Checkbox Group
- Collapsible
- Context Menu
- Dialog
- Drawer
- Field
- Filterable Menu
- Form
- Input
- Menu
- Menubar
- Meter
- Navigation Menu
- Number Field
- OTP Field
- Popover
- Preview Card
- Progress
- Radio
- Radio Group
- Scroll Area
- Separator
- Slider
- Switch
- Tabs
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
- Server rendering and hydration in React, Vue, Svelte and Angular
Coming:
- Autocomplete
- Combobox
- Fieldset
- Select
- A name
The package scope is @▢▢▢▢ for now. Suggest one, vote for the ones you like. The shortlist is decided in public.
No account, no sign-in. Leave your email, the frameworks you use and, if you like, your GitHub username.
The behavior is ported from Base UI by the MUI team, and its test suite is what every adapter is checked against. This project is not affiliated with MUI.
MIT