shadcn Registry

Every preset and section on Shaders is also a shadcn registry item. Point the shadcn CLI at the Shaders registry once, and you can pull any effect into your codebase with a single command:

npx shadcn add @shaders/aurora-hero

The CLI writes real source files into your project — a component for a preset, a full block for a section — with imports from the shaders package. Nothing is bundled from our servers at runtime, and nothing in the installed code points back at us.

Setup

1. Create an API key and add it to your environment

Free items install with no key at all. Paid items need a personal API key belonging to an account that owns them. Any signed-in Shaders account can create keys — you don't need Pro to hold one.

Put the key in .env.local (or wherever your project keeps local secrets — the CLI expands ${SHADERS_API_KEY} from your environment):

# .env.local
SHADERS_API_KEY=sk_live_your_key_here

Don't commit the key. It is tied to your account and can be revoked at any time from the same panel that created it.

2. Register the namespace

Add a @shaders registry to your project's components.json, referencing the key you just created. The framework lives in the URL, so pick the segment that matches your stack:

// components.json
{
  "registries": {
    "@shaders": {
      "url": "https://shaders.com/r/vue/{name}.json",
      "headers": { "Authorization": "Bearer ${SHADERS_API_KEY}" }
    }
  }
}

// components.json
{
  "registries": {
    "@shaders": {
      "url": "https://shaders.com/r/react/{name}.json",
      "headers": { "Authorization": "Bearer ${SHADERS_API_KEY}" }
    }
  }
}

// components.json
{
  "registries": {
    "@shaders": {
      "url": "https://shaders.com/r/svelte/{name}.json",
      "headers": { "Authorization": "Bearer ${SHADERS_API_KEY}" }
    }
  }
}

// components.json
{
  "registries": {
    "@shaders": {
      "url": "https://shaders.com/r/solid/{name}.json",
      "headers": { "Authorization": "Bearer ${SHADERS_API_KEY}" }
    }
  }
}

Use the official shadcn CLI — it is a framework-agnostic file writer, and it is the CLI that understands the registries config block. The shadcn-vue and shadcn-svelte forks have their own CLIs and do not read this configuration.

Installing presets

Preset items are named <collection-slug>-<variant>, matching the collection slug and the variant number shown on the preset page:

npx shadcn add @shaders/liquid-chrome-2

You get a single component file that renders that exact preset, with all non-default props inlined and shaders added to your dependencies. From there it's ordinary source code — change the props, wire them to state, compose it with other effects.

Every preset page on the site has an Install with shadcn link that shows you the exact command for that variant.

Installing sections

Sections are complete, designed page sections rather than a single effect, so they install as a block — layout, copy, and the shader composition together:

npx shadcn add @shaders/prism-pricing

Sections are hand-authored in Vue and ported to React, Svelte, and Solid, so the same slug works in all four namespaces.

Section assets and follow-up steps

The shadcn CLI can only transport text, so a section install arrives in two parts:

• Code and SVG logos are written directly into your project.
• Binary assets — images, video, and SDF files — are fetched once by a small downloader the item ships with. If you are running the install through a coding agent, it will run this for you; otherwise the CLI prints the command.

After the files land, the CLI prints a requirements checklist for that specific section: which logo to swap in, which demo image or video to replace, and whether a shape effect needs an SDF generated from your own SVG. Generating an SDF is a one-liner for any agent connected to Shaders MCP — ask it to generate an SDF from your logo and it will handle the rest.

Free vs paid

Entitlement is checked server-side on every install, so the command itself is public — you can share it, put it in a README, or hand it to an agent. It simply won't complete for an account that doesn't own the item.

Troubleshooting

401 Unauthorized — the registry couldn't read a valid key. Either SHADERS_API_KEY isn't set in the environment the CLI is running in, or the key has been revoked. Check that the variable resolves (echo $SHADERS_API_KEY) and that the Authorization header in components.json is spelled Bearer ${SHADERS_API_KEY}.

403 Forbidden — the key is valid but the account isn't entitled to that item. The response body includes a link to unlock it, either with Pro or as a single purchase. If you just bought it, the entitlement can take a moment to propagate; retry once.

404 Not Found — the item name is wrong. Preset names are <collection-slug>-<variant> and section names are the section slug exactly as it appears in the URL on shaders.com. You can list everything available at https://shaders.com/r/registry.json, which is public and needs no key.

Installed files are for the wrong framework — the framework comes from the URL, not from your project. Check the segment in components.json matches your stack.

Browsing the registry

The index is public:

curl https://shaders.com/r/registry.json

Every entry carries a title, description, category, thumbnail, and whether it's free or paid — enough to build your own picker, or to let an agent browse the catalogue before choosing what to install.