---
title: How It Works
description: 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:

<ComponentPreview
  name="form-card-demo"
  title="Form Card Example"
  defaultTab="code"
  description="A card component with form inputs for user registration."
/>

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:

<ComponentPreview
  name="testimonials-09"
  align="start"
  marginOff={true}
  title="Testimonials Block"
  description="A customer story section with large heading, blockquote, and avatar details."
/>
