skills.rest
sharad07072007
sharad07072007COMMUNITY
Explore all skills by this author →
GitHub

shadcn

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working with shadcn/ui involves non-obvious CLI behaviors (interactive prompts, deprecated flags, registry formats) and common pitfalls like broken Geist fonts after init or missing Avatar size props. This Skill provides expert guidance so agents and developers initialize projects, add components, and configure themes correctly the first time. ## Core Features & Use Cases - CLI Command Reference: Covers init (non-interactive with -d), add, search, build, view, docs, info, and migrate commands with correct flags and deprecation warnings. - Theming & Design Guidance: Explains CSS variable theming, dark mode setup, custom colors, and composition recipes for dashboards, settings pages, and CRUD tables. - Custom Registries: Shows how to define registry.json, build registry items, and consume namespaced or private registries. - Use Case: When scaffolding a Next.js dashboard, use this Skill to run a non-interactive shadcn init with the radix base, add Table and Card components, and apply a dark-mode zinc theme without hitting the Geist font bug. ## Quick Start Ask the AI to initialize shadcn/ui non-interactively in your Next.js project and add the button, card, and dialog components.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I run shadcn init non-interactively?▼

Use npx shadcn@latest init -d to skip all interactive prompts with default configuration. The -y flag alone does not skip the component library selection prompt, so -d is required for CI and agent workflows.

How do I add shadcn components to my project?▼

Run npx shadcn@latest add followed by component names, such as npx shadcn@latest add button dialog card. You can also add from custom registries with namespace syntax like @acme/header or a full registry URL.

Should I use Radix UI or Base UI with shadcn?▼

Radix UI is the default and recommended base, especially if the project uses AI Elements, which rely on Radix-specific APIs. Choose Base UI during init with --base base-ui only when you specifically need that primitive library.

Why does shadcn init break Geist font in Next.js?▼

The init command rewrites globals.css and can introduce a circular --font-sans: var(--font-sans) reference, 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 the shadcn Avatar component have a size prop?▼

No, the Avatar component does not accept a size variant prop. Control sizing with Tailwind classes like className="h-12 w-12", or add your own size variants via cva in the component source.

How do I create a custom shadcn registry?▼

Define a registry.json file listing items with types like registry:ui, registry:base, or registry:font, then run npx shadcn@latest build to output JSON files. Consumers install items with npx shadcn@latest add pointing at your hosted registry URL.

Related Skills

Explore More Software Engineering Skills→
ever-worksever-works
21

tailwind-v4-shadcn

Automate Tailwind CSS v4 setup with shadcn/ui and Vite for React projects.

Official
Advanced
ronjunevaldozronjunevaldoz
2

kmp-shadcn-compose-layouts

Composes shadcn-compose components into verified login, form, table, and dashboard layouts.

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

building-with-shadcn

Create accessible React UIs with shadcn/ui components and Radix primitives.

Community
Intermediate
aashahinaashahin

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Community
Intermediate