@swiss-ui/vue

Vue 3 components for the Swiss UI design system.

Installation

npm install @swiss-ui/vue vue

Architecture

Every component ships in two modes:

• Headless (@swiss-ui/vue) — logic, state, ARIA, no CSS classes
• Styled (@swiss-ui/vue/styled) — headless wrappers with swiss-* classes from @swiss-ui/core

Usage

Headless (default)

<script setup lang="ts">
import { SwissButton, SwissInput } from '@swiss-ui/vue'
</script>

<template>
  <SwissButton variant="solid" size="md">Submit</SwissButton>
  <SwissInput v-model="value" placeholder="Enter text" />
</template>

Styled

<script setup lang="ts">
import { SwissButton } from '@swiss-ui/vue/styled'
</script>

<template>
  <SwissButton variant="solid">Styled Button</SwissButton>
</template>

Global registration via plugin

import { createApp } from 'vue'
import { createSwissUI } from '@swiss-ui/vue/plugin'
import App from './App.vue'

const app = createApp(App)
app.use(createSwissUI({ prefix: 'Swiss' }))
app.mount('#app')

Plugin options:

Option	Type	Default	Description
prefix	string	'Swiss'	Component name prefix. Pass '' to remove it
styled	boolean	false	Register styled variants

Components

Primitives

Component	Props	Slots
SwissBox	is	default
SwissTextPrimitive	is, size, weight, align, truncate	default

Layout

Component	Props	Slots
SwissContainer	size	default
SwissStack	gap, align, justify, direction	default
SwissGrid	cols, gap, align	default
SwissGridItem	colSpan, rowSpan	default

Typography

Component	Props	Slots
SwissHeading	is, level, size, weight, align	default
SwissText	is, size, weight, align, color, truncate	default

Controls

Component	Props	Emits	Slots
SwissButton	is, variant, size, loading, disabled, type	click	default, leftIcon, rightIcon
SwissInput	modelValue, size, disabled, invalid, type, placeholder	update:modelValue, change, blur, focus	leftAddon, rightAddon
SwissTextarea	modelValue, resize, rows, autoResize, disabled, invalid	update:modelValue, change, blur, focus	—
SwissSelect	modelValue, size, disabled, invalid, placeholder	update:modelValue, change, blur	default (option elements)
SwissCheckbox	modelValue, indeterminate, disabled, invalid, label, value	update:modelValue, change	default
SwissRadioGroup	modelValue, name, disabled, orientation	update:modelValue, change	default
SwissRadio	value, disabled, label	—	default
SwissSwitch	modelValue, disabled, label	update:modelValue, change	default

Feedback

Component	Props	Slots
SwissBadge	variant, color	default
SwissAlert	variant	icon, title, description, actions, default
SwissSpinner	size, color, label	—

Overlay

Component	Props	Emits	Slots
SwissModal	open	update:open, open, close	default, portal
SwissModalOverlay	—	—	default
SwissModalContent	—	—	default
SwissModalHeader	—	—	default
SwissModalBody	—	—	default
SwissModalFooter	—	—	default
SwissModalCloseButton	—	—	default
SwissTooltip	open, placement, delay, disabled, content	update:open	default (trigger), content
SwissDropdown	open	update:open, open, close	default, portal
SwissDropdownTrigger	—	—	default
SwissDropdownContent	—	—	default
SwissDropdownItem	disabled, onSelect	select	default
SwissDropdownSeparator	—	—	—
SwissDropdownLabel	—	—	default

Examples

Modal

<script setup lang="ts">
import { ref } from 'vue'
import {
  SwissModal,
  SwissModalOverlay,
  SwissModalContent,
  SwissModalHeader,
  SwissModalBody,
  SwissModalFooter,
  SwissModalCloseButton,
  SwissButton,
} from '@swiss-ui/vue'

const open = ref(false)
</script>

<template>
  <SwissButton @click="open = true">Open Modal</SwissButton>

  <SwissModal v-model:open="open">
    <template #portal>
      <SwissModalOverlay>
        <SwissModalContent>
          <SwissModalHeader>
            <h2>Confirm Action</h2>
            <SwissModalCloseButton />
          </SwissModalHeader>
          <SwissModalBody>
            <p>Are you sure you want to continue?</p>
          </SwissModalBody>
          <SwissModalFooter>
            <SwissButton variant="ghost" @click="open = false">Cancel</SwissButton>
            <SwissButton variant="solid">Confirm</SwissButton>
          </SwissModalFooter>
        </SwissModalContent>
      </SwissModalOverlay>
    </template>
  </SwissModal>
</template>

Dropdown

<script setup lang="ts">
import {
  SwissDropdown,
  SwissDropdownTrigger,
  SwissDropdownContent,
  SwissDropdownItem,
  SwissDropdownSeparator,
} from '@swiss-ui/vue'
</script>

<template>
  <SwissDropdown>
    <SwissDropdownTrigger>Actions</SwissDropdownTrigger>
    <template #portal>
      <SwissDropdownContent>
        <SwissDropdownItem @select="handleEdit">Edit</SwissDropdownItem>
        <SwissDropdownItem @select="handleDuplicate">Duplicate</SwissDropdownItem>
        <SwissDropdownSeparator />
        <SwissDropdownItem :disabled="true">Delete</SwissDropdownItem>
      </SwissDropdownContent>
    </template>
  </SwissDropdown>
</template>

RadioGroup

<script setup lang="ts">
import { ref } from 'vue'
import { SwissRadioGroup, SwissRadio } from '@swiss-ui/vue'

const size = ref('md')
</script>

<template>
  <SwissRadioGroup v-model="size" name="size" orientation="horizontal">
    <SwissRadio value="sm" label="Small" />
    <SwissRadio value="md" label="Medium" />
    <SwissRadio value="lg" label="Large" />
  </SwissRadioGroup>
</template>

Vue Router integration

SwissButton accepts any component via :is, including RouterLink:

<script setup lang="ts">
import { RouterLink } from 'vue-router'
import { SwissButton } from '@swiss-ui/vue'
</script>

<template>
  <SwissButton :is="RouterLink" to="/dashboard" variant="link">
    Go to Dashboard
  </SwissButton>
</template>

Accessibility

All components follow WCAG 2.1 AA:

• Keyboard navigable: Tab, Enter, Space, Arrow keys, Escape, Home, End
• Proper ARIA roles: dialog, alert, switch, radiogroup, menu, menuitem, tooltip
• Focus trap in SwissModal — focus stays inside the dialog while open
• SwissSpinner includes a visible label via aria-label and <title>
• SwissCheckbox supports indeterminate state via aria-checked="mixed"
• SwissAlert uses aria-live="assertive" for errors, "polite" for others

SSR / Nuxt

Overlay components (SwissModal, SwissTooltip, SwissDropdown) use <Teleport to="body"> with an onMounted guard, making them safe for SSR. No document access happens during server-side rendering.

Build

npm run build      # compile to dist/
npm run test       # run Vitest
npm run typecheck  # vue-tsc check