Installation

Start with an application using Svelte, React, or Vue. The project must already have Tailwind CSS and the corresponding shadcn CLI configured; registry commands rely on that configuration to resolve your component path and dependencies.

You can use another package manager, but keep the framework-specific CLI. If shadcn is already configured, do not initialize it again.

Godsend registry requests use a personal bearer token. Sign in, open Account → Registry access, create a token, and copy it before closing the confirmation. The token is not shown again.

Save it in the consuming project’s .env.local file:

GODSEND_REGISTRY_TOKEN=godsend_live_v1_your_token

GODSEND_REGISTRY_TOKEN=godsend_live_v1_your_token

Keep .env.local out of version control. components.json contains only the environment-variable reference, so it can be committed safely.

Add the Godsend namespace to components.json. Use the endpoint for your framework.

{
  "registries": {
    "@godsend": {
      "url": "https://godsend.work/r/react/{name}.json",
      "headers": {
        "Authorization": "Bearer ${GODSEND_REGISTRY_TOKEN}"
      }
    }
  }
}

{
  "registries": {
    "@godsend": {
      "url": "https://godsend.work/r/react/{name}.json",
      "headers": {
        "Authorization": "Bearer ${GODSEND_REGISTRY_TOKEN}"
      }
    }
  }
}

For Vue, replace /r/react/ with /r/vue/. Keep the {name} placeholder unchanged. The CLI replaces it with the component slug and expands GODSEND_REGISTRY_TOKEN when it sends the request.

Private Svelte installation uses a tested temporary CLI with authenticated registry namespaces. Its npm release is still pending, so the Svelte command is not available yet. Registry tokens belong in the authorization header, never in a URL.

After the namespace is configured, a component command looks like this:

pnpm dlx shadcn@4.19.1 add @godsend/liquid-glass

pnpm dlx shadcn@4.19.1 add @godsend/liquid-glass

Use the command shown on the component page. It selects the correct CLI and installs the framework-native component file with its declared runtime packages; you do not need to copy shader programs or install PixiJS separately.

The target path shown below the installation tabs is the import path expected by the usage example. If your shadcn aliases differ, use the path written by your local configuration.

If the CLI reports a missing environment variable, check that .env.local is in the same project where you run the command. A 401 means the token is invalid or expired. A 403 means the account does not currently have access to that component. Create, renew, and revoke tokens under Account → Registry access.

Registry components become part of your codebase. If you run an add command again after editing one, treat the result as a source update: review the diff before accepting an overwrite and reapply only the upstream changes you need.

Continue with Using shaders for layout, motion, texture, and performance constraints that apply after installation.