shadcn/studio
Stars0
GithubXDiscord
Get all accessGet all access

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/ui 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/ui 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.

shadcn CLI Support

Use shadcn CLI v4 for installing and managing components, blocks, and themes.

shadcn CLI v4

Ground-up rewrite focused on registries at scale (namespaces, auth, private/pro) and AI/automation (MCP).

Registry Structure Explanation

We provide multiple registries to organize content by type and access level. Here's why each registry exists:

NamespaceContent Type
@shadcn-studioFree components, blocks, themes
@ss-componentsFree + premium components
@ss-blocksFree + premium blocks
@ss-themesFree + premium + user-generated themes

Key Benefits of Multiple Registries:

  • Simplified Access: Use @shadcn-studio for quick access to any free content
  • Category Organization: Category-specific registries (@ss-components, @ss-blocks, @ss-themes) provide better content management
  • Premium Support: Category-specific registries support both free and premium content with proper authentication
  • User Content: @ss-themes also includes user-generated themes alongside official content

Configuring CLI v4

To use CLI v4 with our custom content, you need to configure the components.json file in your project.

For Free Content Only

Access all free components, blocks, and themes without authentication through the free registry, you can run this command

Or add this to your components.json

For Free + Premium Content

Access both free and premium content. Free content works without authentication, premium content requires your credentials:

Environment Variables Setup

You must create or update your .env file to store your shadcn/studio credentials.

Finding Your Credentials

  1. Email Address: Your email address used during registration (found in your account settings).
  2. License Key: Your license key will be found in your billing page.

shadcn CLI v2

Legacy

Legacy shadcn CLI version.

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.

Free Components Only

Premium Components

Installing Blocks

You can refer to the blocks documentation for more information.

Free Blocks Only

Premium Blocks

Installing Themes

You can refer to the themes documentation for more information.

Free Themes Only

Premium Themes

User-Generated Themes

Package Managers

The Shadcn CLI supports different package managers for your project:

Advanced Usage

Installing Multiple Items

You can install multiple items at once by listing them:

Force Overwriting Existing Files

If you want to overwrite existing files during installation:

Input Size Variants

For components like Input, Select, and Input OTP shadcn/ui does not provide built-in size variants such as sm or lg. Also it is managed by the styles, so you can have different size variants for each style (Nova, Vega, Lyra, etc.). In our blocks, components and templates, we are already utilizing these predefined styles to ensure consistency, and alignment with the selected styles.

To achieve this, add custom size variants in your globals.css.Additionally, make sure to write your CSS according to your selected style (such as Nova, Vega, Lyra, etc.), you can find your style from component.json file.

Button Customization

We have given a fixed horizontal (X-axis) padding to shadcn/ui components like buttons, dropdownTrigger, popoverTrigger, dialogsTrigger, etc. across all styles(Nova, Vega, Luma, etc.) because they were not looking properly aligned with our design system. To maintain a good UI we added this padding and we are utilizing these styles in our blocks, components and templates.

If you would like these components to have consistent spacing and match the appearance you see in our blocks, components and templates, you can override the default styling by adding the following code to your globals.css. You can choose code according to UI library you used and style(Nova, Vega, Luma, etc.) you are using in your project, you can find your style from component.json file.

Cursor

Tailwind v4 switched from cursor: pointer to cursor: default for the button component.

After April 2026, shadcn applies cursor: pointer styling, but it is only compatible with a limited set of components such as Button, Checkbox, Radio, Select, Switch, Tabs, and Toggle. Additionally, some of these components do not include the cursor: pointer style in their Base UI implementation. In our blocks, components, and templates, we are already utilizing these predefined styles to ensure consistency and alignment with the selected styles.

If you want consistent cursor pointer behavior across both Radix UI and Base UI components and ensure compatibility with additional elements like Menu Items, Slider, Combobox, Command, and others you can add the following code to your globals.css:

RTL Support

To migrate your project to RTL, run the following command from the root directory of your project:

This will automatically convert normal utility classes (like ml-*, left-*, etc.) to logical equivalents (like ms-*, start-*, etc.).

Test your UI in RTL mode and manually fix any layout or visual issues if needed.

Troubleshooting

1. Block/Component/Theme Not Found

Solution:

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

2. Access Denied - Missing Credentials

Solution:

  • Ensure your .env file contains EMAIL and LICENSE_KEY.

3. Invalid Credentials

Solution:

  • Double-check your email (it must match your registered account).
  • Verify your license key (check your purchase email).

Best Practices

  1. Use CLI v4 for simplicity and ease of use.
  2. Keep credentials secure by using environment variables or ensuring they aren't saved in command history.
  3. Regularly update your Shadcn CLI to stay up to date with new features.
  4. Customize components after installation to ensure they match your project's design requirements.
PreviousIntroduction
NextComponents