Registry

vivid-layer uses the shadcn registry protocol. Components 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:

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

You can then install a component with a short name:

pnpm dlx shadcn@latest add @vivid-layer/button

Every component page also provides a direct registry URL for projects that do not want to save the namespace.

Installing examples#

Install an Example directly; it already includes its core vivid-layer component. If that core file is already present from another Registry locator, shadcn may ask whether it should overwrite the existing file. Keep the current file when it is already up to date.

Requirements#

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

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

Image-filter and logo-animation Examples reference public vivid-layer demo assets. Their core components have no remote default and can use local project images without depending on the vivid-layer site.