Quick start

From the catalog to a working component in any app, in five minutes.

1. Find something

Open Components, Sections or Animations. Every card is a live preview — not a screenshot. Search with / or ⌘K, filter by family in the left rail.

Click a card to open its page: the component runs full size, and the control bar on the right changes its real props. Whatever you set there is what the copied code will do.

2. Take the source

Use the Code button on the preview. You get every file the component needs: one self-contained vs-*.js custom element, plus any sibling tag it reuses (a vs-icon.js or vs-fx.js travels with it automatically). No npm packages, no helper folders.

The copy also includes a ready-made prompt, so you can paste the whole thing into your AI editor and let it place the files:

Create these files in my project, keep the props API exactly as is,
then show me a minimal usage example.

3. Drop the file in

A component arrives as one (occasionally two) files:

vs-button.js
vs-fx.js        ← only when the component reuses shared effects

Drop them anywhere in your project — keep the siblings next to each other so the one relative import './vs-fx.js' still resolves. There is no folder structure to mirror and no build config to touch.

4. Register it once

A custom element registers itself the first time its file is imported. Import it once, anywhere that runs before the tag is used:

// wherever your app boots — main.js, a layout, even a <script type="module">
import './vs-button.js';

From then on <vs-button> is a real HTML tag everywhere in the app.

5. Use it

Because it is a native element, the same tag works in any framework — or in plain HTML with no build step:

<vs-button label="Save changes" variant="primary" size="md"></vs-button>

document.querySelector('vs-button')
  .addEventListener('click', save);

String props go on the tag as attributes; object/array inputs are set as DOM properties (el.items = [...]), and emits are plain DOM events you addEventListener to. Every prop the control bar showed maps to an attribute of the same name, with the same default. Theming is optional — it reads your CSS custom properties when present and falls back to sensible literals when not, so it renders correctly with zero extra CSS. See Theming.

Doing all of this from your editor

If you have PRO, the MCP server replaces steps 1–4:

Use the vuesax MCP: search for a button with a loading state, pull its
source into src/components/ui/, register it, and show me a usage example.