Creative Tim UICreative Tim UI

How It Works

PreviousNext

Learn how Creative Tim UI components work within your application.

Creative Tim UI components integrate directly into your project as source code, not as dependencies locked in external packages. This means each component lives in your codebase, giving you complete control to customize, extend, or modify them to match your exact requirements.

Example

Once you've installed a component, simply import it like any other React component in your application. Here's a practical example showing a form card with inputs:

Create Account
Enter your information to get started with Creative Tim UI
"use client"

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

export function FormCardDemo() {
  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Create Account</CardTitle>
        <CardDescription>
          Enter your information to get started with Creative Tim UI
        </CardDescription>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Full Name</Label>
          <Input id="name" placeholder="John Doe" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="email">Email Address</Label>
          <Input id="email" type="email" placeholder="[email protected]" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" placeholder="••••••••" />
        </div>
      </CardContent>
      <CardFooter>
        <Button className="w-full">Sign Up</Button>
      </CardFooter>
    </Card>
  )
}

You can use the installed components throughout your application with full flexibility to adapt them to your needs.

Block Example

Blocks are larger, pre-built sections that combine multiple components together. Here's a testimonial block that showcases customer stories with rich typography and layout:

user profile

Customer Story

Revolutionary component library for modern design

"This component library has transformed how our design team works. The attention to detail, seamless integration, and production-ready components have accelerated our development workflow by 10x."
SP

Sarah Johnson

Design Director, Spotify

import Testimonials09 from "@/components/creative-tim/blocks/testimonials-09"

export default function Page() {
  return <Testimonials09 />
}