@doitrix/headless

Unstyled, accessible Vue 3 behaviour for the Doitrix design system — dialog, popover, tooltip, menu, select, tabs, form controls and data-table state. Zero dependencies, tree-shakable.
1,356
vue vue3 menu accessibility headless dialog wai-aria design-system select
Install
npm install @doitrix/headless
Latest Version:1.5.0
Vue:3
License:MIT
Last Updated:Oct 8, 2026
Links: npm
Maintainer: venomous-maker-org

@doitrix/headless

Unstyled, accessible behaviour for Vue 3 — the part of a component that is hard to get right and should never be written twice. No styles, no dependencies, one module per file so an app ships only what it imports.

bun add @doitrix/headless

What is in it

Area Exports
Overlays Dialog* (dialog and alertdialog), Popover*, Tooltip*, DropdownMenu*
Form controls Select*, Checkbox*, Switch*, RadioGroup*
Navigation Tabs*
Display Avatar*
Composition Primitive (as, asChild), Slot, Portal
Composables useFocusTrap, useDismissable, useScrollLock, useFloating, usePresence, useCollection, useControllable, useDataTable
Pure core computeFloating, createTypeahead, moveFromKey, paginate, sortRows, selectionState, cardLayout, …

Behaviour it guarantees

  • Keyboard: WAI-ARIA patterns throughout — roving tab stops, arrow keys by orientation (swapped in RTL), Home/End, typeahead in menus and selects.
  • Focus: moved in on open, trapped in modals, returned to the trigger on close — but never stolen back if the user has already moved on.
  • Dismissal: Escape and outside presses go to the topmost layer only, so a select inside a dialog closes the select alone. Both are cancelable.
  • ARIA wiring: ids are generated, and follow your own id if you pass one.
  • Motion: content stays mounted through its exit animation, then unmounts; with no animation it unmounts at once.
  • State: every stateful part works with v-model or uncontrolled with a default* prop. Everything exposes data-state, data-disabled, data-highlighted, data-side for styling.

Styling

Target the data attributes:

<DialogContent class="data-[state=open]:animate-pop-in data-[state=closed]:animate-pop-out">

For styled, ready-made components built on this package, see @doitrix/ui.

Related Packages

@trevoreyre/autocomplete

Simple autocomplete component in vanilla JS and Vue

62,090 437
accessibility select wai-aria a11y autocomplete combobox search typeahead
@elvora/vue

Elvora UI components for Vue 3 — same headless API as the React adapter, idiomat...

745
accessibility design-system headless vue vue3 components elvora ui
@vuetify/v0

Headless, unstyled, accessible Vue 3 primitives and composables — a meta UI fram...

711,847 739
accessibility design-system headless vue vue3 wai-aria a11y accessible component-library composables +5
@trevoreyre/autocomplete-vue

Simple autocomplete component in vanilla JS and Vue

388,169 437
accessibility select vue wai-aria a11y autocomplete combobox search typeahead
@trevoreyre/autocomplete-js

Simple autocomplete component in vanilla JS and Vue

224,366 437
accessibility select wai-aria a11y autocomplete combobox search typeahead vanilla js

Version History

Version Released Vue License
1.5.0 ^3.5.0 MIT
1.4.1 ^3.5.0 MIT
1.4.0 ^3.5.0 MIT
1.3.0 ^3.5.0 MIT
1.2.0 ^3.5.0 MIT