skills.rest
dsgalkar
dsgalkarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

Guides shadcn/ui CLI usage, component installation, theming, and custom registry workflows.

Updated Sep 5, 2026
Search Tags:#theming#react#cli#component library#tailwind css#shadcn#radix ui
One-click install
npx skills add https://github.com/dsgalkar/dnyaneshwar_portfolio --skill shadcn-dsgalkar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/dsgalkar/dnyaneshwar_portfolio/tree/main/.agents/plugins/vercel/skills/shadcn
Command: npx skills add https://github.com/dsgalkar/dnyaneshwar_portfolio --skill shadcn-dsgalkar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working with shadcn/ui involves non-obvious CLI behaviors, configuration pitfalls, and composition decisions that frequently trip up developers and coding agents, such as interactive init prompts breaking CI, font misconfiguration after init, and incorrect component usage patterns. ## Core Features & Use Cases - CLI Command Reference: Covers non-interactive initialization (init -d), adding components, searching registries, building custom registries, and migrations (RTL, unified radix-ui package, icons). - Theming & Configuration: Explains components.json, CSS variable theming with Tailwind v4, dark mode setup, custom colors, presets, and namespaced registries. - Composition Guidance: Provides component selection tables, page composition recipes (settings, dashboards, CRUD tables, auth), and anti-patterns to avoid. - Gotcha Resolution: Documents known issues like the Geist font circular reference after init and the missing Avatar size prop. - Use Case: When scaffolding a Next.js dashboard, use this Skill to initialize shadcn non-interactively, add Table and Card components, configure a dark zinc theme, and compose the page following recommended patterns. ## Quick Start Ask the agent to initialize shadcn/ui in your project and add the button, card, and dialog components with a dark theme.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I install shadcn/ui components in a Next.js project?▼

Run npx shadcn@latest init -d for non-interactive setup, then add components with npx shadcn@latest add button card dialog. The CLI copies component source code into your project rather than installing a package dependency.

How to run shadcn init non-interactively in CI?▼

Use the -d flag: npx shadcn@latest init -d. The -y flag alone does not skip all prompts since it still asks for component library selection. You can also pass --preset or --base radix for explicit configuration.

What is the difference between Radix UI and Base UI in shadcn?▼

shadcn/ui supports both Radix UI and Base UI as underlying primitive libraries, chosen during init with --base radix or --base base-ui. Components look and behave identically; only the implementation changes. Use Radix when working with AI Elements.

Why does Geist font break after running shadcn init?▼

shadcn init can introduce a circular --font-sans: var(--font-sans) reference in globals.css, and Tailwind v4's @theme inline cannot resolve runtime CSS variables. Fix it by using literal font family names in @theme inline and moving font variable classNames to the html element.

Does shadcn Avatar support a size prop?▼

No, the Avatar component has no size variant prop. Control sizing with Tailwind classes like className="h-12 w-12". This applies to most shadcn components, which rely on Tailwind classes rather than size variants.

How do I create a custom shadcn registry?▼

Define a registry.json file listing components with their files and dependencies, then run npx shadcn@latest build to output JSON files. Consumers install from it with npx shadcn@latest add followed by the registry item URL.

Related Skills

Explore More Software Engineering Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
jedmamostojedmamosto

deploy-vercel

Deploy built web apps to Vercel with domain routing and environment configuration.

Community
Intermediate
JaivishChauhanJaivishChauhan
6

dark-mode-theming

Configure next-themes with CSS custom properties and Tailwind for Next.js theming.

Community
Intermediate
aroidoaroido

agent-ui-implementer

Implement React/Chakra UI components, hooks, and routers from specification documents.

Official
Intermediate