Creative Tim UI block library assistant. Use when adding, generating, or modifying UI blocks/components/pages from creative-tim.com/ui. Covers design philosophy (minimalism, the 95% rule, research-first), block discovery, both CLI install methods, PRO API key setup, and Creative Tim design rules (orange brand, shadcn/ui base, Tailwind v4). Generates blocks that are deliberate and restrained, not maximal.
A comprehensive block library built on top of shadcn/ui, with 390+ production-ready blocks across 40+ categories. All blocks are React + Tailwind CSS, compatible with Next.js (App Router), Remix, and Vite.
Browse the full library: https://www.creative-tim.com/ui AI-readable index: https://www.creative-tim.com/ui/llms.txt
# Install via skills CLI (recommended)
npx skills add creativetimofficial/ui
# Install globally (available in all projects)
npx skills add creativetimofficial/ui -g
# Or install to a specific agent only
npx skills add creativetimofficial/ui --agent claude-code
Across 300+ products and categories, Creative Tim has applied the same discipline: identify what developers actually need, build that exceptionally well, and cut everything else. That restraint is the core of the library.
When generating or modifying blocks, follow these principles:
The 95% Rule — build the common case exceptionally well. Don't add configuration, abstraction, or flexibility for problems that rarely exist. A developer should be able to read a block and immediately understand what it does.
The "Light" Principle — a block is finished when there is nothing left to remove, not when there is nothing left to add. Question every wrapper div, every prop, every animation, every icon. If the block works without it, it probably should.
Research before rendering — ask what the person looking at this screen is trying to do. A dashboard surfaces the number someone needs to act on. A form collects information with the least possible resistance. Design toward the purpose, not toward the surface.
Build on foundations — shadcn/ui primitives (Card, Table, Button, Badge) are well-designed and maintained. Compose them; don't reimplement them. The Creative Tim contribution is in the composition and the judgment, not in the primitives.
Real use, not demo use — the standard is: would a real team ship this in a production app? Avoid visual complexity that doesn't carry information. Communication beats decoration every time.
Full detail with code examples: rules/brand-philosophy.md
Use this skill when:
| Category | Slug | Description |
|---|---|---|
| AI Agents | ai-agents | Chat interfaces, activity feeds, tool use, transcription |
| Pages | pages | Full-page agent management layouts |
| Account | account | Profile, settings, billing management |
| Authentication | authentication | Login, register, 2FA flows |
| Hero | hero | Landing page hero sections |
| Pricing | pricing | Pricing tables and billing plans |
| Charts | charts | Data visualisation |
| KPI | kpi | Metric cards and dashboards |
| Stats | stats | Statistics sections |
| Tables | table | Data tables with sorting/filtering |
| Ecommerce | ecommerce | Product listings, carts, checkout |
| Blog | blog | Article lists, post layouts |
| Testimonials | testimonials | Social proof sections |
| ... | [Full list at /ui/llms.txt] |
Two methods are fully supported — choose whichever fits your setup.
npx @creative-tim/ui@latest add <block-name>
Initialize a new project first (auto-detects Next.js / Vite / Remix / Astro):
npx @creative-tim/ui@latest init
Examples:
npx @creative-tim/ui@latest add hero-01
npx @creative-tim/ui@latest add ai-agent-activity-01
npx @creative-tim/ui@latest add agent-management-list-01
The package also ships named binaries (creative-tim-ui, creative-tim) — same commands:
npx creative-tim-ui add hero-01
npx creative-tim add hero-01
npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json
Example:
npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
npx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json
Both methods copy the component source into your project and install all required shadcn/ui primitives (Button, Card, Badge, etc.) automatically.
Some blocks are marked PRO and require a Creative Tim API key. You can get a free key at https://www.creative-tim.com/ui.
Add the key to your environment:
# .env.local
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx
Pass the key when using either CLI:
# Creative Tim CLI
npx @creative-tim/ui@latest add pro-block-name --api-key $CREATIVE_TIM_UI_API_KEY
# shadcn CLI — set Authorization header via registry config
Or set it globally via the Creative Tim CLI config:
npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx
After setting the key, PRO blocks install identically to free blocks.
See individual rule files for full detail. Quick summary:
orange-500 / orange-600) — Creative Tim's brand colorviolet, purple, or indigo as accent colors — these signal AI-generated defaultsslate, gray, zincemerald (success), amber (warning), red (error), blue (info)text-sm for all readable body content — labels, descriptions, table cells, list itemstext-xs only for: avatar initials, font-mono timestamps, badge pills (status/priority), sidebar group headers (uppercase + tracking-wider), tiny h-6/h-7 action buttonstext-[10px], text-[11px], or any arbitrary font-size valuesh-8, w-12, gap-3, p-4 — never h-[32px]max-w-sm, max-w-2xl, w-1/2 — never max-w-[85%]sm:, md:, lg:, xl: — never [@media(min-width:640px)]:Card > CardHeader + CardContent for content groupingCardContent className="px-4 py-0" (py-0, not default py-6)ScrollArea for any list that can overfloww-64), border-r, bg-muted/30style={{}} — always use Tailwind classesnew Date(), Date.now(), or toLocaleTimeString() in useState initializersuseEffect / setIntervalFor the complete rules with code examples: AGENTS.md
Individual rules:
rules/install-blocks.md — CLI install walkthrough
rules/pro-api-key.md — PRO key setup and auth
rules/design-brand.md — Brand colors and identity
rules/tailwind-rules.md — Tailwind v4 coding constraints
rules/component-patterns.md — Preferred component patterns
rules/hydration-safety.md — SSR/CSR hydration rules
This skill lives in the repo at .claude/skills/creative-tim-ui/. Anyone can install it in their own Claude Code setup by running:
claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui
Or by cloning and symlinking manually:
# Clone or copy the skills directory into your project
cp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui
Once installed the skill is available as /creative-tim-ui in any Claude Code session inside that project.