Creative Tim UI - Modern Component Library

Language: TypeScript
License: MIT
Stars: ~11,894
Owner: creativetimofficial
Repo: https://github.com/creativetimofficial/ui
Homepage: https://creative-tim.com/ui

Architecture:
- Monorepo: Turborepo workspace
- Build System: Turbo
- Package Manager: pnpm

Core Dependencies:
- React 19.1.2
- Next.js 15.3.6
- shadcn/ui 3.3.1
- Tailwind CSS 4.x (@tailwindcss/postcss)
- Radix UI (all primitives)
- TypeScript
- Zod 3.24+ (validation)

UI & Interaction:
- Framer Motion 12.x (animations)
- lucide-react 0.474.0 (icons)
- @tabler/icons-react 3.31+ (additional icons)
- react-hook-form 7.54+ (forms)
- cmdk 1.1+ (command menu)
- vaul 1.1+ (drawer)
- sonner 2.0+ (toasts)

Specialized Features:
- @react-three/fiber + @react-three/drei (3D graphics)
- recharts 2.15+ (data visualization)
- maplibre-gl 5.15+ (maps)
- @dnd-kit/* (drag-and-drop)
- Vercel AI SDK 5.0+ (AI features)

Documentation:
- fumadocs-ui 15.3+ (docs site)
- react-markdown (MDX rendering)
- rehype-pretty-code + shiki (code highlighting)

# Node.js 18 or later
node --version  # Should be v18.0.0 or higher

# pnpm (recommended) or npm
npm install -g pnpm

# Existing Next.js project with:
# - Tailwind CSS configured
# - shadcn/ui initialized (or will be initialized by CLI)

# Create a new Next.js project
pnpx create-next-app@latest my-app
# When prompted, select:
# ✓ TypeScript: Yes
# ✓ ESLint: Yes
# ✓ Tailwind CSS: Yes
# ✓ App Router: Yes
# ✓ Turbopack: Yes (optional)

cd my-app

# Initialize shadcn/ui
pnpx shadcn@latest init
# Follow the prompts to configure:
# - Choose your preferred style
# - Select base color
# - Configure CSS variables

# Install all components using Creative Tim CLI
pnpx @creative-tim/ui@latest add all

# This command will:
# 1. Set up shadcn/ui if not already configured
# 2. Install all Creative Tim UI components
# 3. Add necessary dependencies to package.json
# 4. Place components in your configured directory

# Install specific components by name
pnpx @creative-tim/ui@latest add card
pnpx @creative-tim/ui@latest add button
pnpx @creative-tim/ui@latest add modal

# Components are added to your components directory
# (typically components/ui/ or src/components/ui/)

# Install all components via shadcn CLI
pnpx shadcn@latest add https://creative-tim.com/ui/r/all.json

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

# Browse all components at:
# https://creative-tim.com/ui/docs/components

Application UI:
- Modals (5 blocks)
- Account sections (7 blocks)
- Billing components (5 blocks)
- Navigation menus
- Forms and inputs
- Data tables

Marketing:
- Testimonials (17 blocks)
- Contact sections (15 blocks)
- Footers (16 blocks)
- FAQs (6 blocks)
- Blog layouts (15 blocks)
- Hero sections
- Feature sections
- Pricing tables

E-commerce:
- Product listings
- Shopping carts
- Checkout flows
- Product cards (14 blocks)

Web 3.0:
- NFT cards
- Blockchain integration UI
- Crypto platform components (5 blocks)

Specialized:
- 3D graphics components (three.js)
- Interactive maps (MapLibre)
- Data visualizations (Recharts)
- Drag-and-drop interfaces

// app/page.tsx
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export default function Home() {
  return (
    <main className="container mx-auto p-8">
      <Card>
        <CardHeader>
          <CardTitle>Welcome to Creative Tim UI</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="mb-4">Beautiful, pre-built components for your app.</p>
          <Button>Get Started</Button>
        </CardContent>
      </Card>
    </main>
  )
}

# Each block page provides:
# 1. Live preview
# 2. Copy-paste code
# 3. Component dependencies
# 4. Usage instructions

# Example: Adding a testimonial section
# 1. Visit https://creative-tim.com/ui/blocks/testimonials
# 2. Choose a block design
# 3. Click "View Code"
# 4. Copy the code into your component file
# 5. Install any missing dependencies shown

// All components accept className for Tailwind overrides
import { Button } from "@/components/ui/button"

<Button className="bg-gradient-to-r from-purple-500 to-pink-500">
  Custom Gradient Button
</Button>

// Modify component variants in components/ui/
// Edit the class-variance-authority definitions

// Override theme colors in tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#your-color',
          foreground: '#your-text-color',
        },
      },
    },
  },
}

// Example: AI chat component
import { useChat } from 'ai/react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

export function ChatComponent() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()

  return (
    <div className="flex flex-col gap-4">
      {messages.map(m => (
        <div key={m.id} className="whitespace-pre-wrap">
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit} className="flex gap-2">
        <Input
          value={input}
          onChange={handleInputChange}
          placeholder="Ask anything..."
        />
        <Button type="submit">Send</Button>
      </form>
    </div>
  )
}

import { Canvas } from '@react-three/fiber'
import { OrbitControls, Box } from '@react-three/drei'

export function Scene3D() {
  return (
    <div className="h-96">
      <Canvas>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        <Box args={[1, 1, 1]}>
          <meshStandardMaterial color="hotpink" />
        </Box>
        <OrbitControls />
      </Canvas>
    </div>
  )
}

import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 600 },
]

export function Chart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  )
}

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import * as z from 'zod'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'

const formSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

export function LoginForm() {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  })

  function onSubmit(values: z.infer<typeof formSchema>) {
    console.log(values)
  }

  return (
    <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
      <Input {...form.register('email')} placeholder="Email" />
      <Input {...form.register('password')} type="password" placeholder="Password" />
      <Button type="submit">Sign In</Button>
    </form>
  )
}

import { motion } from 'framer-motion'
import { Card } from '@/components/ui/card'

export function AnimatedCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5 }}
    >
      <Card>
        <p>This card fades in and slides up!</p>
      </Card>
    </motion.div>
  )
}

# Clone the repository
git clone https://github.com/creativetimofficial/ui.git
cd ui

# Install dependencies
pnpm install

# Start development server
pnpm dev
# Opens http://localhost:3000 with the component documentation

# Build all packages
pnpm build

# Run type checking
pnpm typecheck

# Lint and format
pnpm lint
pnpm format:write

creative-tim-ui/
├── apps/
│   └── www/                    # Documentation website (Next.js 15)
│       ├── app/                # Next.js App Router pages
│       ├── components/         # UI components and registry
│       ├── content/            # Documentation MDX files
│       └── public/             # Static assets
│
├── packages/
│   └── cli/                    # @creative-tim/ui CLI package
│
├── turbo.json                  # Turborepo configuration
├── package.json                # Root package with workspace scripts
└── pnpm-workspace.yaml         # pnpm workspace configuration

# Registry files are JSON descriptors at:
# https://creative-tim.com/ui/r/<component>.json

# Example: button.json contains:
# - Component source code
# - Dependencies
# - Installation instructions
# - Usage examples

# Build registry locally (for contributors)
pnpm build:registry

# The registry is auto-generated from:
# apps/www/components/ui/*

# Install Vercel CLI
pnpm add -g vercel

# Deploy to Vercel
vercel

# Or connect your GitHub repo in Vercel dashboard
# for automatic deployments on push

# Environment variables (if using AI features):
# OPENAI_API_KEY=your_key
# ANTHROPIC_API_KEY=your_key
# Add these in Vercel project settings

✓ 100+ pre-built components from shadcn/ui foundation
✓ 100+ ready-to-use blocks (Marketing, E-commerce, Web3)
✓ TypeScript + Tailwind CSS for full customization
✓ Next.js 15 + React 19 support
✓ AI integration via Vercel AI SDK
✓ 3D graphics with React Three Fiber
✓ Data visualization with Recharts
✓ Form handling with react-hook-form + Zod
✓ Animations with Framer Motion
✓ Interactive maps with MapLibre
✓ Drag-and-drop with @dnd-kit
✓ Dark mode support via next-themes
✓ Accessible components (Radix UI primitives)
✓ Mobile-responsive by default
✓ Production-ready and optimized

Official Website: https://creative-tim.com/ui
GitHub Repository: https://github.com/creativetimofficial/ui
Component Documentation: https://creative-tim.com/ui/docs/components
Block Gallery: https://creative-tim.com/ui/blocks

Related Projects:
- shadcn/ui: https://ui.shadcn.com/
- Material Tailwind: https://material-tailwind.com/v3
- Radix UI: https://www.radix-ui.com/
- Vercel AI SDK: https://sdk.vercel.ai/
- React Three Fiber: https://docs.pmnd.rs/react-three-fiber

Community:
- Issues: https://github.com/creativetimofficial/ui/issues
- Discussions: https://github.com/creativetimofficial/ui/discussions
- Creative Tim: https://creative-tim.com