Installation

Here’s how to install Creative Tim UI components in your project:

Step 1: How to install shadcn/ui

Use the official shadcn/ui guides based on your stack:

Next.js

Vite

Astro

Step 2: How to install Creative Tim UI

You can add Creative Tim UI components using the CLI:

Components are available via the @creative-tim/ui command.

pnpmnpmyarnbun
pnpm dlx @creative-tim/ui@latest add <component>
Copy

For example, to install a button component, you can run:

pnpmnpmyarnbun
pnpm dlx @creative-tim/ui@latest add button
Copy

To install a block, simply use the same CLI and specify the block's name. For example, to install the testimonials-01 block:

pnpmnpmyarnbun
pnpm dlx @creative-tim/ui@latest add testimonials-01
Copy

Installing Specific Versions

Copy# 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

Alternatively, you can use the standard shadcn CLI:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://creative-tim.com/ui/r/<component>.json
Copy

Step 3: Premium Blocks Authentication

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

Getting Your API Key

1. Get a Creative Tim UI License
2. Visit your Creative Tim Dashboard
3. Navigate to the API Keys section
4. Copy your API key (starts with pk_live_)

Authentication Methods

Copy# macOS/Linux
export CREATIVE_TIM_UI_API_KEY=pk_live_your_key
 
# Windows (PowerShell)
$env:CREATIVE_TIM_UI_API_KEY="pk_live_your_key"

pnpmnpmyarnbun
pnpm dlx @creative-tim/ui@latest add testimonials-06
Copy

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

CI/CD Setup

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

GitHub Actions:

Copy- 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:

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

Premium vs Free Components