Components

The SurgeUI Design System provides a Vue 3 component library organized using Atomic Design principles. Every component is accessible, themeable, and designed to work with all 5 built-in themes (light, dark, ocean, forest, sunset).

Principles

• Accessibility - ARIA roles, keyboard navigation, screen reader support and WCAG AA contrast
• Theming - Semantic CSS tokens (--su-*) for automatic adaptation to each theme
• Composition - From atoms to organisms, components combine to build rich interfaces
• TypeScript - Typed props with explicit interfaces and auto-completion

Browse by category

Display - 15 components

Headings, images, avatars, badges, modals, tabs, accordions, progress indicators. See all display components →

Actions - 8 components

Buttons, links, toggles, dropdown menus, floating button. See all action components →

Forms - 11 components

Input fields, selectors, switches, file uploads, validation. See all form components →

Layouts - 9 components

Single column, sidebar, split screen, Holy Grail, magazine, grid, masonry, hero, full screen. Mobile first, driven by container width. See all layouts →