Search documentation

Find a vivid-layer page or product.

Registry

Configure the vivid-layer registry once, then install components and shaders by name.

vivid-layer uses the shadcn registry protocol. Components and Shaders are copied into your project as editable TypeScript and Tailwind source.

Configure the namespace

Add the vivid-layer registry to your existing components.json file:

components.json
{
  "registries": {
    "@vivid-layer": "https://www.vivid-layer.com/r/{name}.json"
  }
}

Merge the registries field into the existing configuration.

You can then install an item with a short name:

pnpm dlx shadcn@latest add @vivid-layer/install-command

Requirements

  • React 19
  • TypeScript
  • Tailwind CSS 4
  • A project initialized with shadcn and a components.json file

The registry declares runtime dependencies and installs them with the selected package manager. Example items also install their core vivid-layer item.