skills.rest
Adithiya-S
Adithiya-SCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Installs, configures, and composes shadcn/ui components via CLI for React interfaces.

Updated Aug 21, 2025
Search Tags:#theming#react#cli#component library#tailwind css#shadcn#radix ui
One-click install
npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill shadcn-adithiya-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Adithiya-S/AI-Study-Companion/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Adithiya-S/AI-Study-Companion --skill shadcn-adithiya-s

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Setting up shadcn/ui correctly involves non-obvious CLI flags, framework detection, theming configuration, and component composition decisions that are easy to get wrong, such as interactive init prompts breaking CI runs or font variables breaking after init. ## Core Features & Use Cases - CLI Guidance: Covers non-interactive init (-d flag), adding components, searching registries, building custom registries, and running migrations for RTL or the unified radix-ui package. - Theming & Configuration: Explains components.json setup, CSS variable theming with Tailwind v4, dark mode, custom colors, and design system presets. - Composition Patterns: Provides recipes for dashboards, settings pages, CRUD tables, auth screens, and command palettes, plus anti-patterns to avoid. - Use Case: When scaffolding a Next.js dashboard, use this Skill to initialize shadcn non-interactively, add Table, Card, and Dialog components, and apply a consistent dark-mode theme without breaking Geist fonts. ## Quick Start Ask the agent to initialize shadcn/ui in your React 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 React 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 do I run shadcn init non-interactively in CI?▼

Use the -d or --defaults flag: npx shadcn@latest init -d. The -y flag alone does not skip all prompts since it still asks for component library selection, so -d is required for fully automated runs.

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

shadcn/ui supports both Radix UI (default) and Base UI as underlying primitive libraries, chosen during init with the --base flag. Components look identical either way, but AI Elements components require Radix due to API dependencies like asChild.

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

The init command rewrites globals.css and can create a circular --font-sans: var(--font-sans) reference that Tailwind v4 cannot resolve. Fix it by using literal font family names in @theme inline and moving font variable classNames from body to html.

Does shadcn/ui work with Vite and frameworks other than Next.js?▼

Yes, shadcn/ui fully supports Vite, React Router, Astro, Laravel via Inertia, and TanStack Start in addition to Next.js. The CLI auto-detects your framework during initialization and configures paths accordingly.

How do I create a custom shadcn component registry?▼

Define a registry.json file listing your components with their files and dependencies, then run npx shadcn@latest build to generate JSON output. Others can install from it using npx shadcn@latest add with your registry URL.

Related Skills

Explore More Software Engineering Skills→
designbycodedesignbycode

shadcn

Manages shadcn/ui components via CLI for adding, searching, styling, and composing React UI.

Official
Advanced
aryan083aryan083
1

express-serverless-api

Build, test, and deploy Express.js REST APIs with MongoDB on Vercel.

Community
Advanced
GemachDAOGemachDAO
4

gdex-ui-theming

Provide CSS variables, dark/light modes, and Tailwind integration for trading UI theming.

Official
Advanced
google-labs-codegoogle-labs-code
8.2k

shadcn-ui

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

Official
Advanced