Prerequisites
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.
Install a registry entry
-
Prepare shadcn
Initialize the matching shadcn CLI in your Svelte, React, or Vue project so the registry knows where to write components.
-
Choose a component
Open its documentation page and select your framework. The install command, target path, example, and API update together.
-
Install and review
Run the generated command from the project root, then inspect the added source and declared dependencies before integrating it.
The command on a component page is the source of truth. It installs the framework-native component file and 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.
Updating installed source
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.