Documentation

Vuesax docs

A catalog of Web Component UI, sections and animations you copy into your project — usable in any framework, by hand or through your AI editor over MCP.

Quick start
Connect MCP

No install · no dependency · yours to edit once pasted

TL;DR

  • Vuesax is not a dependency. You copy the source and it becomes your code.
  • Every piece is one native Web Component, so it turns into whatever your stack is.
  • Take it from the site or let your AI editor pull it over MCP. Same files.

There is no npm install vuesax, no wrapper API to learn and no version of ours to upgrade. You browse the catalog, take the source of what you need, and from that moment it’s yours — editable, renamable, deletable.

The usual way vs this one

A UI library

  1. A package in your lockfile, forever.
  2. A wrapper API between you and the markup.
  3. Breaking changes on someone else's schedule.
  4. Styling it means fighting its CSS.

Vuesax

  1. One file per piece, in your repo.
  2. A real HTML tag, with attributes and events.
  3. Nothing to upgrade. Nothing we ship can break your app.
  4. Styling it means editing your own file.

Four catalogs

  • Components — buttons, inputs, selects, dialogs, tooltips, tables. Themed for light and dark, with proximity light and press effects already wired.
  • Blocks — several components already assembled: login popups, mini dashboards, swap cards, widgets.
  • Sections — full page blocks: heroes, pricing tables, FAQs, navbars, footers.
  • Animations — canvas and WebGL effects, viewport-gated and reduced-motion aware.

Two ways to use it

Copy from the sitePreview it, tune the props, copy the source Pull it over MCPYour AI editor reads the catalog directly

Both hand you the same files. The MCP route just skips the browser: you describe what you want, and your assistant pulls the real source and wires it into your project.

YouUse the vuesax MCP: add a pricing section with a monthly/annual toggle to the landing page.

Your editorFound vs-sec-pricing-toggle. Pulled it into src/components/, registered it in main.js and bound it to your three plans.

What you should know first

Every component is a native Web Component (a standard custom element) in one self-contained .js file — no framework, no utility CSS, no build step. It runs the same in all of these:

  • React
  • Vue
  • Svelte
  • Angular
  • Solid
  • Astro
  • Plain HTML

It expects one thing from your project:

  1. The design tokens — CSS custom properties like --text, --border, --ctrl-h-md.

And even that isn’t a hard requirement. Every token reference ships with a literal fallback (var(--ctrl-h-md, 40px)), so a component dropped into a project with no tokens still renders correctly — it just stops following your theme. See Installation.

Where to go next

Five minutes from now, you're one of us.

Start with the Quick start if you want something on screen right now. If you already know you’ll work from your editor, jump straight to the MCP server. Everything else is reference you can come back to.

Quick startFirst component in your app in five minutes ThemingTokens, light and dark, your own brand ComponentsProps, sizes, tones, effects AnimationsHow the canvas pattern works MCP serverSetup for every editor Free vs PROWhat is gated and what is not