Headless, accessible Vue 3 components.
bun add @humanonlyweb/uiCopy commandNot on npm yet, so this command won't work. It will once the package is published.
The components handle keyboard, focus and ARIA, following the WAI-ARIA Authoring Practices. How they look is up to you: every element has a data-part attribute, and states are attributes too.
core.cssis required, but it only positions and hides things. No visual styles.- Works with server rendering in Vue and Nuxt.
- No dependencies besides
vue, and you only ship what you import.
Needs a browser with the Popover API, CSS anchor positioning and @starting-style.
Components 28
- AccordionExpandable sections.
- AvatarA user image with an initials fallback.
- Avatar GroupStacked avatars with an overflow count.
- ButtonA button, or a link styled as one.
- CheckboxA checkbox, alone or in a group.
- ComboboxA text input that filters a list of options as you type.
- Confirm DialogAsks to confirm or cancel an action.
- Context MenuA menu opened at the pointer by right-click or long-press.
- DialogA modal dialog.
- Icon ButtonA button with only an icon.
- InputA text input with label, hint and error.
- KbdA keyboard shortcut, shown with the user's platform keys.
- MenuA list of actions opened from a button.
- OTP InputA one-time code input, with a slot per character.
- PopoverA non-modal panel anchored to a trigger.
- Radio GroupA single choice from a list.
- SegmentedA single choice shown as a row of buttons.
- SelectA single or multiple choice from a dropdown.
- SliderPick a number, or a range, by dragging or with the keyboard.
- Spin ButtonA number input with step buttons.
- Split ButtonA main action with a menu of alternatives.
- SwitchAn on/off toggle.
- TableA data table with custom cells.
- TabsPanels switched by tabs.
- TextareaA multi-line input with an optional character limit.
- ToastTemporary notifications.
- ToolbarA row of controls with a single tab stop.
- TooltipA short label shown on hover and focus.