or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

examples

edge-cases.mdreal-world-scenarios.md

guides

quick-start.md

reference

cli-commands.mdmcp.mdregistry-api.mdschemas.mdtransformers.md
index.md
tile.json

quick-start.mddocs/guides/

Quick Start Guide

Get started with shadcn CLI in minutes.

Installation

shadcn can be used directly with npx or installed as a dependency:

# Use directly (recommended)
npx shadcn init

# Or install globally
npm install -g shadcn

# Or install as project dependency
npm install shadcn

Initialize Project

Initialize a new project with shadcn/ui configuration:

npx shadcn init

This command:

  • Installs required dependencies (Tailwind CSS, class-variance-authority, clsx, tailwind-merge)
  • Creates components.json configuration file
  • Adds the cn utility function for className merging
  • Configures Tailwind CSS with selected style and base color
  • Sets up CSS variables for theming

The command will prompt you for:

  • Style selection (default, new-york)
  • Base color (slate, zinc, stone, etc.)
  • TypeScript/JavaScript choice
  • Path configuration

Add Components

Add components to your project:

# Add single component
npx shadcn add button

# Add multiple components
npx shadcn add button card dialog

# Non-interactive mode (for automation)
npx shadcn add button --yes --overwrite

Components are added to your project with:

  • All required dependencies automatically installed
  • Code transformations applied (imports, CSS variables, icons)
  • Tailwind configuration updated if needed
  • CSS files updated with component styles

Search Components

Search for available components:

# List all components
npx shadcn search @shadcn

# Search with query
npx shadcn search @shadcn --query button

# Search multiple registries
npx shadcn search @shadcn @acme

View Component Details

View detailed information about components:

# View single component
npx shadcn view @shadcn/button

# View multiple components
npx shadcn view @shadcn/button @shadcn/card

Programmatic Usage

Use the programmatic API in your code:

import { getRegistryItems, resolveRegistryItems } from 'shadcn';

// Fetch components
const items = await getRegistryItems(['@shadcn/button', '@shadcn/card']);

// Resolve with all dependencies
const resolved = await resolveRegistryItems(['@shadcn/button']);
console.log(resolved.dependencies); // npm dependencies
console.log(resolved.files); // component files

Configuration

The components.json file contains your project configuration:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  },
  "iconLibrary": "lucide",
  "registries": {
    "@shadcn": "https://ui.shadcn.com/r/{name}.json"
  }
}

Next Steps

  • Read Real-World Scenarios for advanced usage
  • Check CLI Commands Reference for all commands
  • Review Registry API Reference for programmatic API
  • Explore Edge Cases for error handling