Vite: source that belongs to your app.

Install

npx shadcn@latest add https://gummyui.dev/r/gummy-base.json https://gummyui.dev/r/gummy-button.json

Import the generated components/gummy-theme.css and component stylesheet from src/index.css. Import the component from ../components/ui/gummy-button or your configured alias.

Required alias

Keep the @/* TypeScript alias and matching Vite resolution aligned with components.json. This lets the registry place public UI source predictably without reaching back into this website.

Align the three paths

The alias in the application TypeScript configuration, the resolver alias in vite.config, and the aliases in components.json must describe the same source directory. Test the alias from both application code and a test file: an editor can appear satisfied while the production bundler or test runner uses a different resolver.

Keep generated UI source inside the repository and import it locally. The registry endpoint is an installation input, not a browser runtime dependency, so a deployed application should continue to render if the catalogue site is unavailable.

Load styles in a stable order

Import the shared theme before the component stylesheet and application overrides. Loading the shared file more than once can make cascade order difficult to reason about; importing it from one root CSS entry makes light, dark, direction and reduced-motion behavior consistent across routes.

If the component appears structurally correct but visually plain, inspect the built CSS request and computed custom properties before changing the component. If only one state is wrong, look for an application selector with greater specificity or a later source order.

Integrate and update

Render the installed component through the application's normal React root and providers. Preserve native labels, refs and keyboard events when wrapping it. For an update, inspect the registry diff before replacing editable source, retain intentional local modifications, and rerun the documented behavior checks instead of judging compatibility from a screenshot.

Verify

Run strict type checking and a production Vite build. The committed clean fixture repeats both checks after a real shadcn installation in an isolated temporary project.