Using Components

Documentation layout

Every component page follows the same structure:

1. Live example — rendered with the same API you use in apps
2. Code tabs — template / script / style snippets you can copy
3. API table — props, events, slots, and exposes generated from frontmatter

Newly migrated components are marked with a green New label in the sidebar.

Basic usage pattern

Copied

<template>
  <s-button color="primary" type="flat">Save</s-button>
</template>

Import styles once in your entry file (see Getting Started).

Configure with props

Most visual changes are prop-driven — no extra CSS required:

Copied

<s-alert color="success" closable v-model="open">
  Saved successfully.
</s-alert>

Open the component doc, find the prop in the API section, and use the linked example anchor (e.g. #color).

Preview in Playground

Before integrating into your repo, open the Playground and select the component demo. The playground uses the same workspace build as this documentation site.

Design note

Visual language is inherited from Vuesax. Sax Design Vue keeps that expressive look while targeting Vue 3 tooling and modern documentation workflows.