ui

[![Creative Tim UI](https://raw.githubusercontent.com/creativetimofficial/ui/refs/heads/main/apps/www/public/opengraph-image.png)](https://creative-tim.com/ui)

# Creative Tim UI

[Creative Tim UI](https://creative-tim.com/ui) is a comprehensive component library built on top of [shadcn/ui](https://ui.shadcn.com/) to help you build modern web applications faster.

## Overview

Creative Tim UI provides pre-built, customizable React components and blocks designed for building beautiful, production-ready web applications. 
The CLI makes it easy to add these components to your Next.js project.

## Installation
You can use the Creative Tim UI CLI directly with npx, or install it globally:
```bash
# Use directly (recommended)
npx @creative-tim/ui@latest add <component-name>

# Or using shadcn cli
npx shadcn@latest add https://creative-tim.com/ui/r/all.json
```

## Prerequisites
Before using Creative Tim UI, ensure your Next.js project meets these requirements:
- **Node.js 18** or later
- **shadcn/ui** initialized in your project (npx shadcn@latest init)
- **Tailwind CSS** configured

## Usage

### Install All Components
Install all available Creative Tim UI components at once:
```bash
npx @creative-tim/ui@latest add all
```
This command will:
- Set up shadcn/ui if not already configured
- Install all Creative Tim UI components to your configured components directory
- Add necessary dependencies to your project

### Install Specific Components
Install individual components using the `components add` command:
```bash
npx @creative-tim/ui@latest add <component-name>
```
Examples:
```bash
# Install the orb component
npx @creative-tim/ui@latest add card
```

### Alternative: Use with shadcn CLI
You can also install components using the standard shadcn/ui CLI:
```bash
# Install all components
npx shadcn@latest add https://creative-tim.com/ui/r/all.json

# Install a specific component
npx shadcn@latest add https://creative-tim.com/ui/r/button.json
```

All available components can be found [here](https://creative-tim.com/ui/docs/components) or explore a list of example blocks [here](https://creative-tim.com/ui/blocks).

## Blocks

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

<table>
<tr>
<td width="25%">
<a href="https://creative-tim.com/ui/blocks/modals">
<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/modals-thumbnail.jpg" alt="Modals" />
<br/>
<strong>Modals</strong><br/>
<em>5 Blocks</em>
</a>
</td>
<td width="25%">
<a href="https://creative-tim.com/ui/blocks/account">
<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/account-thumbnail.jpg" alt="Account" />
<br/>
<strong>Account</strong><br/>
<em>7 Blocks</em>
</a>
</td>
<td width="25%">
<a href="https://creative-tim.com/ui/blocks/billing">
<img src=