Vue 3 components and design system | Weini UI

Component library

Browse the components used across Weini interfaces. Each page documents behavior, accessibility, public API, and practical Vue examples.

Actions

08

ButtonA native button with five variants, three sizes, and a loading state.IconButtonAn icon-only button with an accessible label, loading state, and three sizes.ButtonGroupGroups related controls horizontally or vertically without changing their behavior.ToggleA native two-state button with pressed semantics.

Forms

22

InputA text field that keeps native input behavior and supports prefix and suffix slots.NumberInputA native number field with step buttons and optional units.CheckboxA native checkbox for boolean or array models, including mixed state.RadioGroupNative radios grouped by a fieldset and legend.

Display

09

CardA composable surface for related content and actions.BadgeA compact status or category label.SeparatorA horizontal or vertical rule between related sections.AvatarAn image that shows your fallback content while loading or when the image fails.

Overlays

10

PopoverA non-modal panel for a few interactive controls.DropdownMenuA keyboard accessible list of actions.TooltipShort, non-interactive help on hover or focus.ToastBrief, non-blocking notifications for actions and status updates.

Navigation

09

TabsSwitch related views while keeping each panel mounted.BreadcrumbA native breadcrumb navigation composition with real links and a current page.PaginationButton-based page navigation with compact sibling and boundary ranges.AccordionA keyboard-navigable disclosure group with single or multiple open sections.

Layout

04

AspectRatioA CSS aspect-ratio wrapper for media and previews.CollapsibleA controlled or uncontrolled disclosure region with native trigger semantics.ScrollAreaA styled native scrolling viewport with reactive edge state.ResizableKeyboard- and pointer-resizable horizontal or vertical panel groups.

Data

03

TableCompose responsive data tables with semantic rows, headers, and cells.VirtualListRender long lists efficiently with fixed-height rows and native scrolling.TreeA finite hierarchical collection with expansion, selection, roving focus, and typeahead.

Utilities

02

KbdA native keyboard-input hint for shortcuts and commands.VisuallyHiddenVisually hide text while keeping it available to assistive technology.

A selection from each category

Foundations

The visual and behavioral decisions that keep every component part of the same Weini interface language.

Color and themes

Semantic tokens for light and dark interfaces, with product-level overrides.

Typography

Nebula Sans, type roles, weights, and readable interface rhythm.

Design foundations

A consistent scale for control sizes, spacing, surfaces, and interaction.

Form patterns

Labels, validation, native form behavior, and consistent field composition.

Aa

Nebula Sans · interface typeface

Shared radius scale

Using Weini UI

Components are distributed as readable source. Add only what your interface needs, keep native behavior, and adapt the implementation inside your own project.

Open the getting-started guide ↗

Button.vue

<script setup lang="ts">
import Button from './components/ui/button/Button.vue'
</script>

<template>
  <Button>Save changes</Button>
</template>