SurgeUIVue 3 Design System

Accessible, themeable and performant components for modern interfaces.

♿

WCAG AA Accessibility

Keyboard navigation, ARIA roles, screen readers, 4.5:1 contrast ratios, 44px touch targets and high contrast mode support.

🎨

5 Built-in Themes

Light, Dark, Ocean, Forest and Sunset. Semantic CSS tokens (--su-*) for automatic theme adaptation.

🔧

Native TypeScript

Typed props, explicit interfaces, auto-completion and type safety throughout the entire library.

⚡

Composition API

Built on Vue 3 with script setup, defineModel, defineEmits and reusable composables.

📱

Responsive & RTL

Components adapted to all screen sizes with native support for left-to-right and right-to-left directions.

🧩

34+ Components

From atoms (Button, Input, Badge) to organisms (Dialog, Tabs, Accordion), organized using Atomic Design.

Installation

bash

npm install @surgeui/ds-vue

vue

<script setup>
import { SuButton } from '@surgeui/ds-vue'
import '@surgeui/ds-vue/style.css'
</script>

<template>
  <SuButton variant="primary">My first button</SuButton>
</template>

Browse components