repository·main·Indexed 11 days ago
https://github.com/creativetimofficial/uiA component library built on top of shadcn/ui, providing pre-built, customizable React components and blocks for modern web applications. It features a dedicated CLI for installing components as source code, a system for managing active themes via ActiveThemeProvider and useThemeConfig, and specialized blocks for Application UI, Marketing, Ecommerce, and Web 3.0.
Creative Tim UI provides ready-to-use, customizable blocks organized by use case. These can be added to your project to quickly build complex sections.
Available categories include:
Once the creative-tim-ui skill is installed, your AI agent gains the following capabilities:
npx @creative-tim/ui@latest add <block>.CREATIVE_TIM_UI_API_KEY environment variable.shadcn/ui primitives without attempting to reimplement them.shadcn/ui pattern. Instead of installing components as immutable external npm dependencies, the registry delivers component source code directly into your project. This allows for full customization, as the components become part of your own codebase.When you execute an installation command via the CLI, the following lifecycle occurs:
Focus on solving the most common use cases (the 95%) exceptionally well rather than over-engineering for rare specializations (the 5%). Common elements include buttons, tables, cards, sidebars, charts, forms, modals, and notifications.
Avoid complex abstractions for simple problems. A developer should be able to modify a component (like changing a label) without unwrapping multiple layers of abstraction. Use direct, obvious, and complete implementations for common tasks.
// WRONG — solves a hypothetical future problem with excessive abstraction
<DataTable
columns={columns}
data={data}
sortable
filterable
paginated
exportable
selectable
onRowClick={handleRowClick}
onSelectionChange={handleSelection}
renderCustomCell={(cell) => <CustomCell {...cell} />}
/>
// RIGHT — solves the actual problem using direct, composable primitives
<Table>
<TableHeader>...</TableHeader>
<TableBody>
{items.map((item) => (
<TableRow key={item.id}>
<TableCell>{item.name}</TableCell>
<TableCell>{item.status}</TableCell>
</TableRow>
))}
</TableBody>
</Table>To prevent hydration mismatches in Next.js or other SSR frameworks, follow these rules when using Creative Tim UI components:
new Date(), Date.now(), or toLocaleTimeString() inside useState initializers.useEffect hook or a setInterval after the component has mounted.When customizing or generating blocks, adhere to these core design principles to maintain brand consistency:
orange-500 or orange-600.violet, purple, or indigo as accent colors (these are associated with default AI generation).slate, gray, or zinc.emerald (success), amber (warning), red (error), blue (info).text-sm for labels, descriptions, table cells, and list items.text-xs): Reserved for avatar initials, font-mono timestamps, badge pills, sidebar group headers (with uppercase + tracking-wider), and tiny action buttons.text-[10px] or text-[11px].h-8, w-12, gap-3, p-4). Avoid h-[32px].max-w-sm, max-w-2xl, or w-1/2 instead of max-w-[85%].sm:, md:, lg:, xl:) instead of arbitrary media queries.Card > CardHeader + CardContent.CardContent className="px-4 py-0" (specifically py-0 instead of the default py-6).ScrollArea for lists that may overflow.w-64, border-r, and bg-muted/30.style={{}} objects; always use Tailwind classes.To maintain visual hierarchy and theme compatibility, follow these conventions for backgrounds, borders, and text:
bg-muted/30.bg-background (the Card component handles this automatically).border theme token. Never use hardcoded colors like border-gray-200.text-foreground for primary text and text-muted-foreground for secondary text or captions.A component or block is considered "done" when there is nothing left to remove. Minimize cognitive and technical weight by avoiding unnecessary additions.
Guidelines for "Light" design:
divs that do not serve a functional purpose.// WRONG — wrapping for the sake of wrapping
<SectionWrapper>
<ContentContainer>
<InnerContent>
<Card>...</Card>
</InnerContent>
</ContentContainer>
</SectionWrapper>
// RIGHT — as flat as the problem allows
<Card>...</Card>Unlike traditional UI libraries that are installed as locked dependencies in node_modules, Creative Tim UI components are integrated directly into your project as source code.
This architecture provides several advantages:
The registry supports private components for PRO features. Access to these components is gated and requires authentication.
"pro": true.{
"pro": true
}