@creative-tim/ui

A CLI for adding Creative Tim UI components and blocks to your project.

Built by Creative Tim - Based on shadcn/ui registry system.

Features

✨ Automatic Framework Detection - Works with Next.js, Vite, Astro, and Remix
📁 Smart Path Resolution - Components install in the correct location
🎨 53 UI Components - Beautiful, accessible components
🧩 111 Blocks - Pre-built sections and page templates
🔧 Zero Configuration - Just run init and start using

Installation

Quick Start

# Initialize Creative Tim UI in your project
npx @creative-tim/ui@latest init

# Add your first component
npx @creative-tim/ui@latest add button

Install Specific Version

# Install the latest stable version
npx @creative-tim/ui@latest add button

# Install the beta version
npx @creative-tim/ui@beta add button

# Install a specific version
npx @creative-tim/[email protected] add button

Usage

Initialize your project

npx @creative-tim/ui@latest init

This creates a components.json file in your project with the necessary configuration.

Add components

Add one or more components:

# Add a single component
npx @creative-tim/ui@latest add button

# Add multiple components
npx @creative-tim/ui@latest add button card dialog

# Add blocks
npx @creative-tim/ui@latest add software-purchase-01
npx @creative-tim/ui@latest add testimonials-01

Options

• -y, --yes - Skip confirmation prompts
• -o, --overwrite - Overwrite existing files
• --cwd <path> - Specify working directory
• -p, --path <path> - Specify installation path
• --api-key <key> - API key for accessing private components

Premium Blocks Authentication

Some blocks and components are premium and require authentication. These include advanced testimonial sections, pricing tables, and specialized UI components.

How to Get Your API Key

1. Visit Creative Tim Dashboard
2. Navigate to API Keys section
3. Copy your API key (starts with pk_live_)

Authentication Methods

1. Environment Variable (Recommended for Development)

Set the environment variable in your shell:

# macOS/Linux
export CREATIVE_TIM_UI_API_KEY=pk_live_your_key

# Windows (PowerShell)
$env:CREATIVE_TIM_UI_API_KEY="pk_live_your_key"

# Windows (CMD)
set CREATIVE_TIM_UI_API_KEY=pk_live_your_key

Then install components normally:

npx @creative-tim/ui@latest add testimonials-06

Or set it inline:

CREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add testimonials-06

2. Config File (Recommended for Teams/CI/CD)

Add authentication to your components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@creative-tim": {
      "url": "https://www.creative-tim.com/ui/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${CREATIVE_TIM_UI_API_KEY}"
      }
    }
  }
}

Benefits:

• Team members can use their own API keys
• Works seamlessly in CI/CD pipelines
• No need to pass --api-key flag every time
• Supports environment variable expansion (${VAR_NAME})

Then use with the environment variable:

CREATIVE_TIM_UI_API_KEY=pk_live_your_key npx @creative-tim/ui@latest add testimonials-06

3. Command Flag (Quick Testing)

Pass the API key directly via command line:

npx @creative-tim/ui@latest add testimonials-06 --api-key pk_live_your_key

Use this for:

• Quick testing
• One-off installations
• When you don't want to configure environment variables

CI/CD Setup

For GitHub Actions, GitLab CI, or other CI/CD systems:

GitHub Actions:

- name: Install Premium Blocks
  env:
    CREATIVE_TIM_UI_API_KEY: ${{ secrets.CREATIVE_TIM_UI_API_KEY }}
  run: npx @creative-tim/ui@latest add testimonials-06

GitLab CI:

install:
  script:
    - export CREATIVE_TIM_UI_API_KEY=$CREATIVE_TIM_UI_API_KEY
    - npx @creative-tim/ui@latest add testimonials-06

Premium vs Free Components

| Type | Authentication | Examples | |------|----------------|----------| | Free Components | ❌ Not required | button, card, avatar, testimonials-01 | | Premium Blocks | ✅ Required | testimonials-06, pricing-05, hero-07 |

Troubleshooting

Error: 401 Unauthorized

• Check your API key is valid
• Ensure environment variable is set correctly
• Verify you're using CREATIVE_TIM_UI_API_KEY (not CREATIVE_TIM_API_KEY)

Error: 403 Forbidden

• Your API key doesn't have access to this premium component
• Verify your subscription status at Creative Tim Dashboard

Note: Never commit your API key directly in components.json. Always use environment variables!

Component Types

UI Components

Basic building blocks:

npx @creative-tim/ui@latest add button
npx @creative-tim/ui@latest add card
npx @creative-tim/ui@latest add dialog

Blocks

Pre-built sections:

npx @creative-tim/ui@latest add software-purchase-01
npx @creative-tim/ui@latest add testimonials-01
npx @creative-tim/ui@latest add web3-02

All available components can be found here or explore a list of example blocks here.

Explore our collection of ready-to-use blocks organized by category. Each block is fully customizable and can be added to your project with a single command.

Application UI

Marketing

Ecommerce UI

Ready-to-use blocks for product listings, shopping carts, and checkout flows.

Web 3.0

Innovative sections built for decentralized applications, blockchain projects, and crypto platforms.

Documentation

Visit creative-tim.com/ui for complete documentation.

License

MIT © Creative Tim