How to use Shadcn CLI

Learn how to use Shadcn CLI to install our components, blocks, and themes into your project seamlessly.

Overview

shadcn/studio uses the shadcn-svelte CLI, offering an easy way to install our components, blocks, and themes. The CLI is designed to help you quickly add ready-to-use assets without the need for NPM packages, following a simple "copy-and-paste" approach. Please refer to the official shadcn-svelte CLI documentation for more details on its core functionality.

Setup

Before using the shadcn/studio CLI, make sure that you've installed shadcn in your project by following the official installation guide.

Installation

You can install components, blocks, and themes using the CLI commands below.

Installing Components

Components are enhanced versions of shadcn/ui components, with added functionality and styling. You can refer to the components documentation for more information.

pnpm dlx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01.json

npx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01.json

bun x shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01.json

yarn shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01.json

Installing Blocks

You can refer to the blocks documentation for more information.

pnpm dlx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/hero-01.json

npx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/hero-01.json

bun x shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/hero-01.json

yarn shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/hero-01.json

Installing Themes

Only the pre-built themes are available for installation via the CLI.

You need to manually install the font dependencies and add them to your layout file, as they are not included in the themes. You can find the fonts from Google Fonts

Make sure you have @theme inline, :root, and .dark already specified in app.css before adding a theme or it won't add those styles.

pnpm dlx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/themes/art-deco.json

npx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/themes/art-deco.json

bun x shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/themes/art-deco.json

yarn shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/themes/art-deco.json

Advanced Usage

Installing Multiple Items

You can install multiple items at once by listing them:

pnpm dlx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01 hero-01 themes/art-deco.json

npx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01 hero-01 themes/art-deco.json

bun x shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01 hero-01 themes/art-deco.json

yarn shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01 hero-01 themes/art-deco.json

Force Overwriting Existing Files

If you want to overwrite existing files during installation:

pnpm dlx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01.json --overwrite

npx shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01.json --overwrite

bun x shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01.json --overwrite

yarn shadcn-svelte@latest add https://shadcnstudio-svelte.netlify.app/registry/button-01.json --overwrite

Troubleshooting

Block/Component/Theme Not Found

Error: Block/Component/Theme not found

"The requested block/component/theme could not be found. Please check the block/component/theme name and try again."

Solution:

Verify the spelling of the block/component/theme name.
Ensure that the block/component/theme exists in the registry.

Best Practices

Regularly update your Shadcn CLI to stay up to date with new features.
Customize components after installation to ensure they match your project's design requirements.