MiniDev UI vs Headless UI: which should you use?
Facts checked October 15, 2026
@headlessui/react (v2.1 on the site) and @headlessui/vue (documented at v1.7), MIT licensed and free. The React docs list 16 components: Dropdown Menu, Disclosure, Dialog, Popover, Tabs and Transition, plus form pieces such as Combobox, Listbox, Switch and Radio Group, all styled by you through data attributes and render props. MiniDev UI is a styled layer: 548 free, MIT, shadcn-compatible items built on Base UI, Tailwind CSS v4 and motion, copied into your repo. Pick Headless UI if you want a small, dependable set of primitives for a design system of your own, or you work in Vue. Pick MiniDev UI if you want finished components and screens that already look like a product, built on Base UI rather than Headless UI.At a glance
| Feature | MiniDev UI | Headless UI |
|---|---|---|
| Price | Free, everything | Free |
| License | MIT | MIT |
| What it is | Styled components, full page blocks, motion pieces and templates | Unstyled, accessible primitives designed to integrate with Tailwind CSS |
| Scope | 548 items: 397 UI components, 108 motion components, 43 blocks and pages | 16 React components (Dropdown Menu, Disclosure, Dialog, Popover, Tabs, Transition, Button, Checkbox, Combobox, Fieldset, Input, Listbox, Radio Group, Select, Switch, Textarea); 10 for Vue |
| Install | npx shadcn@latest add @minidev/<name>, or npm minidev-ui-kit | npm install @headlessui/react or npm install @headlessui/vue |
| Frameworks | React | React and Vue |
| Styling | Tailwind CSS v4 utilities with semantic OKLCH tokens, already applied | None shipped; you style states through data-open, data-focus, data-active and similar attributes or render props, for example data-focus:bg-blue-100 |
| Primitives | Base UI (@base-ui/react) | Headless UI is itself the primitive layer; the Menu docs show a built in transition prop and anchor positioning |
| Maintainer | MiniDev | Tailwind Labs |
What each one is
Headless UI is Tailwind Labs' set of completely unstyled, fully accessible UI components, designed to integrate with Tailwind CSS. The React package, @headlessui/react, is at v2.1 on the site and covers 16 components: six interaction pieces (Dropdown Menu, Disclosure, Dialog, Popover, Tabs, Transition) and ten form pieces (Button, Checkbox, Combobox, Fieldset, Input, Listbox, Radio Group, Select, Switch, Textarea). You bring every visual decision, usually as Tailwind classes keyed to state attributes such as data-open and data-focus, and the Menu docs show a built in transition prop and anchor positioning for the dropdown. A Vue package, @headlessui/vue, is documented at v1.7 with ten components. It is MIT licensed and free. MiniDev UI lives one layer up: a free, MIT licensed shadcn-compatible registry of 548 items built on Base UI, Tailwind CSS v4 and motion, where buttons, dialogs, menus, data tables, billing pages and AI chat screens arrive styled and ready, as source in your repo.
Where each one is the better pick
- Pick Headless UI to build your own design system. A small, stable set of primitives with no visual opinions is the right base when every pixel is yours to decide.
- Pick Headless UI for Vue.
@headlessui/vuegives Vue projects the same unstyled, accessible components. MiniDev UI is React only. - Pick Headless UI if you already use Tailwind Labs' tooling. It is made by the Tailwind CSS team and its examples use Tailwind variants directly.
- Pick MiniDev UI when you want finished components. Dialogs, menus, comboboxes, command palettes, data tables and 43 full pages are styled with one token set and dark mode, so there is nothing to design before you ship.
- Pick MiniDev UI for the shadcn ecosystem. It installs with the shadcn CLI, maps shadcn token names, works with the shadcn MCP server, and sits on Base UI, a headless library many shadcn projects already use.
MiniDev UI is not built on Headless UI; its behavior comes from Base UI. If you already use Headless UI with Tailwind, you can add MiniDev blocks route by route, since both are Tailwind. Overlay components such as Dialog and Menu will then exist twice (Headless UI and Base UI), so decide which library owns overlays to keep focus management and the bundle simple.
Frequently asked questions
Is MiniDev UI built on Headless UI?
No. MiniDev UI uses Base UI for behavior and accessibility. Headless UI is a separate primitive library from Tailwind Labs.
Does Headless UI include styles?
No. It is completely unstyled by design; you add classes, often Tailwind utilities keyed to its data attributes such as data-open and data-focus. MiniDev UI ships styled components with a token system and dark mode.
Which should I use with Vue?
Headless UI, which publishes @headlessui/vue. MiniDev UI is React only.
Sources
- Headless UI home
- Headless UI Menu docs (React)
- Headless UI for Vue (v1)
- tailwindlabs/headlessui on GitHub
Headless UI is a trademark of its owner. This page is our own summary, checked on October 15, 2026. Pricing and features change, so confirm on their site.