FAQ & troubleshooting

The questions that come up most, and the fixes for the things that usually go wrong.

Using the code

Do I need to install a package?

No. There is no runtime dependency on us. Each item is a native Web Component — you copy one self-contained vs-*.js file into your project, register it once, and it becomes your code.

Can I use it in a commercial product?

Yes, in as many projects as you like, including client work. You may not resell the catalog itself as a component library or template pack. See the terms.

Will my copies get updates?

No — and that is the point. Nothing we ship can break your app. If you want a newer version of something, copy it again.

Does it work with Nuxt / Astro / Vite?

Yes — anywhere. The catalog ships native Web Components (custom elements), so they run in any bundler and any framework, or in a plain HTML page with no build step at all. See Installation.

React or Svelte?

Yes. Every item is a standard custom element — the same vs-*.js file works in React, Svelte, Vue, Angular, Solid or vanilla, with no adapter. You pass string attributes on the tag, set object/array inputs as DOM properties, and listen to emits with addEventListener.

The component looks wrong — wrong colors, wrong sizes

By default it reads your design tokens (var(--…)) and falls back to built-in literals when they are absent — so it renders either way, just un-themed. Define the matching CSS custom properties on :root (or any ancestor) to bind it to your palette and control scale.

The glow and the ripple do nothing

Nothing external is needed — every effect ships inlined inside the component’s own file. If motion is dead everywhere, reduced motion is on (see below).

An import fails after I copy the files

A component is one self-contained file. Some items reuse another tag via a sibling import './vs-button.js'; when you copy from the site or pull over MCP, those siblings come in the same bundle. Keep them next to each other, or fix the one relative import line.

The animation is blank

Give the host element a size. Background animations are absolutely positioned inside a relative parent — with no height on that parent, the canvas is 0px tall. Also check the browser console: WebGL items report a lost or unavailable context there.

Animations don’t move at all

Reduced motion is on — either the OS setting, or data-motion="static" on <html>. That is by design; each animation renders a single static frame instead of looping.

MCP

The tools don’t appear in my editor

Restart the editor, not just the chat panel. MCP servers are loaded at startup in every client. If it still fails, open the client’s MCP log — a 401 there is an auth problem, a network error is a proxy or firewall.

401 Unauthorized

The key is missing, does not start with vsx_, was revoked, or the account is not PRO. Check the header is exactly Authorization: Bearer vsx_….

503 with Retry-After

The auth backend blipped. Retry in a few seconds; nothing is wrong with your key.

I upgraded but MCP still refuses

Plan changes take up to a minute to reach the MCP server. Wait, then retry.

Technically yes, but the key identifies one account and the licence is granted to one developer. Give everyone their own — it is also the only way to know who pulled what.

Which tools cost quota?

Only get_component_source, get_section_source and get_animation_source. Listing, searching and reading docs are unlimited.

The agent keeps pulling the wrong thing

Install the skill. It teaches the model to search first, read the docs tool, and only then pull source — which is also how you stop burning quota on components you don’t keep.

Still stuck?

Email support@vuesax.com with your editor, the config you used and the exact error. If it is an MCP problem, the client’s MCP log is the single most useful thing you can attach.