Agent skill

Creative Tim UI Blocks

by creativetimofficial in creativetimofficial/ui

Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

MITAuto-check: notesFrontend & Design

Install Creative Tim UI Blocks

skills CLI

$ npx skills add creativetimofficial/ui --skill creative-tim-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install creativetimofficial/ui creative-tim-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/creativetimofficial/ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/creative-tim-ui .claude/skills/creative-tim-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "creative-tim-ui" agent skill from https://github.com/creativetimofficial/ui/tree/main/skills/creative-tim-ui into .claude/skills/creative-tim-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "creative-tim-ui", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/creativetimofficial/ui/tree/main/skills/creative-tim-ui

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add creativetimofficial/ui --skill creative-tim-ui -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install creativetimofficial/ui creative-tim-ui --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/creativetimofficial/ui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/creative-tim-ui .agents/skills/creative-tim-ui && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "creative-tim-ui" agent skill from https://github.com/creativetimofficial/ui/tree/main/skills/creative-tim-ui into .agents/skills/creative-tim-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "creative-tim-ui", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add creativetimofficial/ui --skill creative-tim-ui -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install creativetimofficial/ui creative-tim-ui --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/creativetimofficial/ui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/creative-tim-ui .cursor/skills/creative-tim-ui && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "creative-tim-ui" agent skill from https://github.com/creativetimofficial/ui/tree/main/skills/creative-tim-ui into .cursor/skills/creative-tim-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "creative-tim-ui", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/creativetimofficial/ui.git --path skills/creative-tim-ui

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add creativetimofficial/ui --skill creative-tim-ui -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install creativetimofficial/ui creative-tim-ui --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/creativetimofficial/ui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/creative-tim-ui .gemini/skills/creative-tim-ui && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "creative-tim-ui" agent skill from https://github.com/creativetimofficial/ui/tree/main/skills/creative-tim-ui into .gemini/skills/creative-tim-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "creative-tim-ui", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install creativetimofficial/ui creative-tim-ui

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add creativetimofficial/ui --skill creative-tim-ui -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/creativetimofficial/ui.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/creative-tim-ui .github/skills/creative-tim-ui && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "creative-tim-ui" agent skill from https://github.com/creativetimofficial/ui/tree/main/skills/creative-tim-ui into .github/skills/creative-tim-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "creative-tim-ui", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add creativetimofficial/ui --skill creative-tim-ui -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install creativetimofficial/ui creative-tim-ui --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/creativetimofficial/ui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/creative-tim-ui .opencode/skills/creative-tim-ui && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "creative-tim-ui" agent skill from https://github.com/creativetimofficial/ui/tree/main/skills/creative-tim-ui into .opencode/skills/creative-tim-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "creative-tim-ui", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: creative-tim-ui
GitHub stars: 12k
Token cost: ~2.1k tokens
SKILL.md length: 794 words
Files: 9
Skills in repo: 1
Repo updated: Mar 14, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

Installing a Creative Tim UI block into a Next.js or Vite project
SKILL.md covers Install This Skill, Design Philosophy, When to Apply and Block Categories, plus 5 more sections
Calls npx and claude; reaches creative-tim.com; needs CREATIVE_TIM_UI_API_KEY
Generating a dashboard or form block in the Creative Tim style

What it does

Creative Tim UI is a block library built on shadcn/ui, with more than 390 blocks across over 40 categories, all React and Tailwind CSS and usable with Next.js App Router, Remix and Vite. The skill covers installing or customizing a block, generating new blocks that match the design system, reviewing generated UI against the brand rules, setting up PRO API key access for premium blocks and onboarding a project.

A design philosophy guides generation. The 95% rule says to build the common case thoroughly and skip configuration for rare problems; a block is finished when nothing is left to remove; the agent asks what the viewer is trying to do before rendering; shadcn/ui primitives such as Card, Table, Button and Badge are composed rather than reimplemented; and the test is whether a real team would ship it in production.

Rule files cover brand philosophy, component patterns, the orange brand design, hydration safety, block installation, PRO API keys and Tailwind v4 conventions. The skill itself installs with npx skills add creativetimofficial/ui.

When your agent uses it

Installing a Creative Tim UI block into a Next.js or Vite project
Generating a dashboard or form block in the Creative Tim style
Reviewing generated UI code for brand and style compliance
Setting up PRO API key access for premium blocks

Example prompts

“Add a pricing section block from Creative Tim UI to my Next.js app.”
“Build a settings page from Creative Tim blocks and keep it minimal.”
“Review this dashboard component against the Creative Tim design rules.”
“Set up my PRO API key so I can install the premium blocks.”

Requirements

A React project using shadcn/ui and Tailwind CSS
A PRO API key for premium blocks

What it can do on your machine

Read from SKILL.md and the folder at commit 20eb87b. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- npx
- claude
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- creative-tim.com
Also links to:
- ui.shadcn.com
- skills.sh
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names these keys or tokens, usually read from environment variables:
- CREATIVE_TIM_UI_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Creative Tim UI Blocks loads about 2.1k tokens when it runs. Until then it costs about 106 tokens; SKILL.md has 794 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~106
When it runs · the whole SKILL.md, loaded when a task matches: ~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

NoteMentions a .env fileSKILL.md:130
```
# .env.local
```

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from creativetimofficial/ui at commit 20eb87b, republished under its MIT licence (© creativetimofficial). 794 words, ~2,122 tokens.

Download SKILL.mdSave it as .claude/skills/creative-tim-ui/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.

name: creative-tim-ui
description: 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.
license: MIT
metadata.author: creative-tim
metadata.version: 1.0.0

Creative Tim UI

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 This Skill

bash

# 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

Skill page: https://skills.sh/creativetimofficial/ui/creative-tim-ui

Design Philosophy

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

When to Apply

Use this skill when:

Installing or customising a Creative Tim UI block in a project
Generating new blocks that should match Creative Tim's design system
Reviewing generated UI code for brand/style compliance
Setting up PRO API key access for premium blocks
Onboarding a new project to use the Creative Tim UI library

Block Categories

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]

Installing Blocks

Two methods are fully supported — choose whichever fits your setup.

Option 1 — Creative Tim CLI (recommended)

bash

npx @creative-tim/ui@latest add <block-name>

Initialize a new project first (auto-detects Next.js / Vite / Remix / Astro):

bash

npx @creative-tim/ui@latest init

Examples:

bash

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:

bash

npx creative-tim-ui add hero-01
npx creative-tim add hero-01

Option 2 — shadcn CLI (full URL)

bash

npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json

Example:

bash

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.

Show full SKILL.md (309 more words)Show less

PRO Blocks (API Key)

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.

Setup

Add the key to your environment:

bash

# .env.local
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx

Pass the key when using either CLI:

bash

# 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:

bash

npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx

After setting the key, PRO blocks install identically to free blocks.

Design Rules

See individual rule files for full detail. Quick summary:

Brand Colors

Primary accent: orange (orange-500 / orange-600) — Creative Tim's brand color
Never use violet, purple, or indigo as accent colors — these signal AI-generated defaults
Neutral surfaces: slate, gray, zinc
Status: emerald (success), amber (warning), red (error), blue (info)

Typography

text-sm for all readable body content — labels, descriptions, table cells, list items
text-xs only for: avatar initials, font-mono timestamps, badge pills (status/priority), sidebar group headers (uppercase + tracking-wider), tiny h-6/h-7 action buttons
Never use text-[10px], text-[11px], or any arbitrary font-size values

Tailwind v4 — No Arbitrary Values

Use the numeric scale for spacing/sizing: h-8, w-12, gap-3, p-4 — never h-[32px]
Use standard fractions for widths: max-w-sm, max-w-2xl, w-1/2 — never max-w-[85%]
Responsive breakpoints only: sm:, md:, lg:, xl: — never [@media(min-width:640px)]:

Component Patterns

Prefer Card > CardHeader + CardContent for content grouping
KPI / stat cards: CardContent className="px-4 py-0" (py-0, not default py-6)
Use ScrollArea for any list that can overflow
Sidebar navigation: 64 (w-64), border-r, bg-muted/30
Avoid inline style={{}} — always use Tailwind classes

Hydration Safety

Never use new Date(), Date.now(), or toLocaleTimeString() in useState initializers
Use static/hardcoded strings for SSR-safe initial state; switch to live values inside useEffect / setInterval

Full Design Guide

For 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

Deploying This Skill

This skill lives in the repo at .claude/skills/creative-tim-ui/. Anyone can install it in their own Claude Code setup by running:

bash

claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui

Or by cloning and symlinking manually:

bash

# 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.

Files

SKILL.md and 8 other files in skills/creative-tim-ui of creativetimofficial/ui.

SKILL.md
AGENTS.md
rules/brand-philosophy.md
rules/component-patterns.md
rules/design-brand.md
rules/hydration-safety.md
rules/install-blocks.md
rules/pro-api-key.md
rules/tailwind-rules.md

Open the folder on GitHubat commit 20eb87b

Compare with similar skills

Creative Tim UI Blocks next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Creative Tim UI Blocks compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Creative Tim UI Blocks this skillcreativetimofficial/ui	12k	—	~2.1k	Automated safety check: Notes	MIT	6 mo ago
Shadcn Tailwind UILiarMTTT/TavernWeave	150	—	~1.7k	Automated safety check: Pass	Custom licence	3 days ago
Ss Learnbitjaru/styleseed	972	—	~1.3k	Automated safety check: Pass	MIT	7 days ago
UI Design Systemtry-works/role-model	118	—	~5k	Automated safety check: Pass	MIT	today
Vite Shadcn Tailwind4IgorWarzocha/Opencode-Workflows	122	—	~1.3k	Automated safety check: Pass	None	8 mo ago
Aceternity UITerminalSkills/skills	163	—	~1.8k	Automated safety check: Pass	Apache-2.0	4 days ago

Similar skills

Shadcn Tailwind UI
LiarMTTT/TavernWeave
Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.
150 GitHub stars~1.7k tokensUpdated 3 days ago
Frontend & DesignAuto-check passed
Ss Learn
bitjaru/styleseed
Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…
972 GitHub stars~1.3k tokensUpdated 7 days ago
Frontend & DesignAuto-check passed
UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
118 GitHub stars~5k tokensUpdated today
Frontend & DesignAuto-check passed
Vite Shadcn Tailwind4
IgorWarzocha/Opencode-Workflows
Initialize shadcn/ui + Tailwind CSS v4 in Vite projects (Vite-specific, not Next.js/Remix).
122 GitHub stars~1.3k tokensUpdated 8 mo ago
Frontend & DesignAuto-check passed
Aceternity UI
TerminalSkills/skills
Aceternity UI is a collection of animated React components (3D cards, spotlight, background beams, moving borders, wavy backgrounds) built with Tailwind CSS and the motion library, installed into…
163 GitHub stars~1.8k tokensUpdated 4 days ago
Frontend & DesignAuto-check passed
Tailwind V4 Shadcn
secondsky/claude-skills
| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
227 GitHub stars~4k tokensUpdated 9 days ago
Frontend & DesignAuto-check passed

Works with

Questions about Creative Tim UI Blocks

What does Creative Tim UI Blocks do?

Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy. js App Router, Remix and Vite. The skill covers installing or customizing a block, generating new blocks that match the design system, reviewing generated UI against the brand rules, setting up PRO API key access for premium blocks and onboarding a project.

When should I use Creative Tim UI Blocks?

Creative Tim UI Blocks fits situations like: installing a Creative Tim UI block into a Next.js or Vite project; generating a dashboard or form block in the Creative Tim style; reviewing generated UI code for brand and style compliance; setting up PRO API key access for premium blocks.

How do I install Creative Tim UI Blocks in Claude Code?

Run `npx skills add creativetimofficial/ui --skill creative-tim-ui -a claude-code`. Or copy the skill folder (skills/creative-tim-ui in creativetimofficial/ui) into .claude/skills/creative-tim-ui in your project. Claude Code loads it when a task matches its description.

How do I install Creative Tim UI Blocks in Codex?

Run `npx skills add creativetimofficial/ui --skill creative-tim-ui -a codex`. Or copy the skill folder (skills/creative-tim-ui in creativetimofficial/ui) into .agents/skills/creative-tim-ui in your project. Codex loads it when a task matches its description.

Can I use Creative Tim UI Blocks in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add creativetimofficial/ui --skill creative-tim-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/creative-tim-ui, .gemini/skills/creative-tim-ui, .github/skills/creative-tim-ui and .opencode/skills/creative-tim-ui in your project.

What does Creative Tim UI Blocks need to run?

Going by SKILL.md and its folder, Creative Tim UI Blocks needs the command-line tools its instructions call (npx and claude) and credentials named CREATIVE_TIM_UI_API_KEY. Our summary lists: A React project using shadcn/ui and Tailwind CSS; A PRO API key for premium blocks.

Does Creative Tim UI Blocks access the network?

SKILL.md names 3 domains. In commands or code: creative-tim.com; the agent is likely to contact it when it follows the instructions. As links in the text: ui.shadcn.com and skills.sh. This is read from the text; nothing was executed.

Is Creative Tim UI Blocks safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Creative Tim UI Blocks use?

Creative Tim UI Blocks is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Creative Tim UI Blocks use?

About 2.1k tokens (SKILL.md is roughly 8.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Creative Tim UI Blocks?

Skills that share tags, products or a category with Creative Tim UI Blocks: Shadcn Tailwind UI (LiarMTTT/TavernWeave, 150 stars), Ss Learn (bitjaru/styleseed, 972 stars), UI Design System (try-works/role-model, 118 stars) and Vite Shadcn Tailwind4 (IgorWarzocha/Opencode-Workflows, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Creative Tim UI Blocks?

creativetimofficial (a GitHub organization) maintains it in creativetimofficial/ui, which has 12,076 GitHub stars. The repository was last updated on March 14, 2026.

Source: creativetimofficial/ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Creative Tim UI Blocks

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Creative Tim UI

Install This Skill

Design Philosophy

When to Apply

Block Categories

Installing Blocks

Option 1 — Creative Tim CLI (recommended)

Option 2 — shadcn CLI (full URL)

PRO Blocks (API Key)

Setup

Design Rules

Brand Colors

Typography

Tailwind v4 — No Arbitrary Values

Component Patterns

Hydration Safety

Full Design Guide

Deploying This Skill

Files

Compare with similar skills

Similar skills

Shadcn Tailwind UI

Ss Learn

UI Design System

Vite Shadcn Tailwind4

Aceternity UI

Tailwind V4 Shadcn

Related

Questions about Creative Tim UI Blocks