Creative Tim UICreative Tim UI

Introduction

Next

Introduction

Creative Tim UI is a comprehensive component library and custom registry built on top of shadcn/ui to help you build beautiful, modern web applications faster. It provides pre-built, customizable React components and blocks designed for production-ready applications.

Some Examples of Components

Here are some examples of what you can build with Creative Tim UI components:

Cards

Versatile card components for displaying content in various formats - from simple content cards to blog posts and e-commerce products.

This is a plain card with simple content. Perfect for displaying basic information.

"use client"

import { Card, CardContent } from "@/components/ui/card"

export function CardPlain() {
  return (
    <Card className="w-full max-w-md">
      <CardContent className="pt-6">
        <p className="text-muted-foreground text-sm">
          This is a plain card with simple content. Perfect for displaying basic
          information.
        </p>
      </CardContent>
    </Card>
  )
}
Card Title
This is a brief description of the card content.

More detailed information goes here in the card content area.

"use client"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export function CardWithButton() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Card Title</CardTitle>
        <CardDescription>
          This is a brief description of the card content.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-muted-foreground text-sm">
          More detailed information goes here in the card content area.
        </p>
      </CardContent>
      <CardFooter>
        <Button>Learn More</Button>
      </CardFooter>
    </Card>
  )
}
March 15, 2025•5 min read
Getting Started with Next.js
Learn how to build modern web applications with Next.js, React, and TypeScript.
"use client"

import { Calendar } from "lucide-react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export function CardBlog() {
  return (
    <Card className="w-full max-w-md overflow-hidden">
      <div className="aspect-video w-full bg-gradient-to-br from-blue-500 to-purple-600" />
      <CardHeader>
        <div className="text-muted-foreground flex items-center gap-2 text-sm">
          <Calendar className="h-4 w-4" />
          <span>March 15, 2025</span>
          <span>•</span>
          <span>5 min read</span>
        </div>
        <CardTitle>Getting Started with Next.js</CardTitle>
        <CardDescription>
          Learn how to build modern web applications with Next.js, React, and
          TypeScript.
        </CardDescription>
      </CardHeader>
      <CardFooter>
        <Button variant="ghost">Read More</Button>
      </CardFooter>
    </Card>
  )
}
New
Premium Wireless Headphones
High-quality audio with active noise cancellation
(128)
$299
"use client"

import { Heart, ShoppingCart, Star } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export function CardEcommerce() {
  return (
    <Card className="w-full max-w-sm overflow-hidden">
      <div className="relative">
        <div className="aspect-video w-full bg-gradient-to-br from-amber-400 to-orange-500" />
        <Badge className="absolute top-2 right-2">New</Badge>
      </div>
      <CardHeader>
        <CardTitle>Premium Wireless Headphones</CardTitle>
        <CardDescription>
          High-quality audio with active noise cancellation
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-1">
            {[...Array(4)].map((_, i) => (
              <Star
                key={i}
                className="h-4 w-4 fill-yellow-400 text-yellow-400"
              />
            ))}
            <Star className="h-4 w-4" />
            <span className="text-muted-foreground text-sm">(128)</span>
          </div>
          <div className="text-2xl font-bold">$299</div>
        </div>
      </CardContent>
      <CardFooter className="gap-2">
        <Button className="flex-1">
          <ShoppingCart className="mr-2 h-4 w-4" />
          Add to Cart
        </Button>
        <Button variant="outline" size="icon">
          <Heart className="h-4 w-4" />
        </Button>
      </CardFooter>
    </Card>
  )
}

View Card Documentation

Resources

You can explore all available blocks here, view the full component library, or check out the source code on GitHub.

Copyrights and Licenses

Creative Tim UI is built upon the incredible work of the open source community:

We are grateful to these projects for making their work available under open source licenses.