skills.rest
MohammedHTahir
MohammedHTahirCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Initialize shadcn/ui components and theming in React projects.

Updated May 16, 2026
Search Tags:#theming#shadcn/ui#tailwind css#radix#components.json#component installation#custom registry
One-click install
npx skills add https://github.com/MohammedHTahir/vibe-coding-platform --skill shadcn-mohammedhtahir
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/MohammedHTahir/vibe-coding-platform/tree/main/.kiro/vercel-plugin/skills/shadcn
Command: npx skills add https://github.com/MohammedHTahir/vibe-coding-platform --skill shadcn-mohammedhtahir

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents design-system drift and repetitive UI setup by guiding you to correctly initialize shadcn/ui, install components, and apply consistent theming in a production React codebase.

Core Features & Use Cases

  • Non-interactive initialization: Run shadcn init safely in agent/CI environments using the required flags to generate components.json and configure the project.
  • Component installation & composition: Add individual components or entire sets from shadcn registries and custom registries, ensuring correct Radix-based APIs and Tailwind integration.
  • Theming and registry workflows: Configure registries, understand components.json options, and compose high-quality UI patterns (including tokens, CSS variables, and RTL migrations) for dashboard and product surfaces.

Quick Start

Initialize a shadcn/ui setup with defaults and Radix primitives by running: npx shadcn@latest init -d --base radix

Frequently Asked Questions about shadcn

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I initialize shadcn/ui non-interactively in a CI environment?▼

To initialize shadcn/ui non-interactively, run `npx shadcn@latest init -d --base radix` using the required CLI flags to generate components.json and configure your React project without interactive prompts.

How do I install individual shadcn components from a custom registry?▼

Install individual shadcn components from a custom registry by using the CLI to add primitives, ensuring correct Radix-based APIs and Tailwind integration for consistent UI composition.

How do I configure design-system theming and CSS variables in shadcn/ui?▼

Configure design-system theming in shadcn/ui by adjusting components.json options and applying CSS variables, tokens, and RTL migrations to compose high-quality dashboard and product surfaces.

Does shadcn/ui work with Radix primitives and Tailwind CSS?▼

Yes, shadcn/ui works with Radix primitives and Tailwind CSS by adhering to Radix-based patterns during component installation and ensuring proper Tailwind integration for styling.

Why does shadcn CLI fail in automated agent environments?▼

The shadcn CLI fails in automated agent environments if required flags for non-interactive runs are missing, preventing proper initialization of components.json and project configuration.

Related Skills

Explore More Software Engineering Skills→
chrishuffman5chrishuffman5

shadcn-ui

Integrate shadcn/ui components into React applications with Tailwind CSS.

Community
Advanced
bychrisrbychrisr

design-guide

Standardize frontend components with Tailwind CSS tokens and Radix UI primitives.

Community
Intermediate
MajesteitBartMajesteitBart
2

shadcn-ui-expert

Build accessible React UI components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
anicca-labsanicca-labs

coding-standards

Enforce React Native coding standards with TypeScript, Prettier, and custom rules.

Official
Intermediate