āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/creativetimofficial/ui/(root)/how-it-works ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
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.
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.
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." />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā