shadcn-ui

Overview

shadcn/ui is a collection of reusable components built with Radix UI and Tailwind CSS. Components are copied into your project, not installed as dependencies — giving you full control over customization.

Capabilities

• CLI-based component installation into your project
• Full source code ownership — components live in your codebase
• Theming via CSS variables and Tailwind config
• Dark mode support out of the box
• Forms with React Hook Form + Zod validation
• Data tables with TanStack Table integration

When to Use

Trigger phrases:

• "shadcn ui"

• "Starting a new React/Next"

• "Need accessible components without vendor lock-in"

• "Want Tailwind-native components with full customization"

• Starting a new React/Next.js project with polished UI

• Need accessible components without vendor lock-in

• Want Tailwind-native components with full customization

• Building admin dashboards, SaaS apps, or marketing sites

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The shadcn-ui workflow follows a standard pipeline pattern.

Core flow:

# shadcn-ui primary flow
input = prepare(raw_data)
result = process(input, config={component, components, copy, library, paste})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# shadcn-ui primary flow
input = prepare(raw_data)
result = process(input, config={component, components, copy, library, paste})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()