Quick start

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

Getting started 3 min read

1. Find
2. Copy
3. Drop the file
4. Import once
5. Use the tag

1. Find something

Open Components, Blocks, 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:

3. Drop the file in

A component arrives as one (occasionally two) files:

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. In React or Next.js, use the generated VsX.tsx wrapper from the code panel instead — typed props and on… events, server rendering included (Frameworks). 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 with one sentence: