Guides shadcn/ui CLI usage, component installation, theming, and custom registry workflows.
npx skills add https://github.com/AarnavBaddam/skills --skill shadcn-aarnavbaddam
Please help me install this Agent Skill. Skill: shadcn Source: https://github.com/AarnavBaddam/skills/tree/main/shadcn Command: npx skills add https://github.com/AarnavBaddam/skills --skill shadcn-aarnavbaddam
init, add, build, search, view, docs, and migrate commands, including CLI v4 changes like presets, Base UI support, and the unified radix-ui package. - Theming & Configuration: Set up components.json, CSS variable themes, dark mode, custom colors, and namespaced registries with authentication. - Composition Patterns: Opinionated recipes for dashboards, settings pages, CRUD tables, auth screens, and command palettes, plus anti-patterns to avoid. - Use Case: You are scaffolding a Next.js admin dashboard. The Skill tells you to run npx shadcn@latest init -d, fix the Geist font issue in globals.css, add card, table, and dropdown-menu components, and compose them using the recommended dashboard pattern. ## Quick Start Ask the assistant to initialize shadcn/ui in your Next.js project and add the button, card, and dialog components with dark mode theming.High-intent search queries and answers about installing and using this skill.
Use `npx shadcn@latest init -d` to skip all interactive prompts with default configuration. The `-y` flag alone is not sufficient because it still prompts for component library selection; `-d` is required for CI and agent-driven workflows.
Run `npx shadcn@latest add` followed by component names, such as `npx shadcn@latest add button dialog card`. The CLI copies component source code into your project rather than installing a package, giving you full ownership of the code.
Yes, shadcn/ui supports Base UI as an alternative primitive library since January 2026. Choose it during initialization with `npx shadcn@latest init --base base-ui`; components look and behave the same regardless of the underlying library.
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.
Define a registry.json file listing your components with types like `registry:ui`, then run `npx shadcn@latest build` to generate distributable JSON files. Consumers install items with `npx shadcn@latest add` pointing at your registry URL or namespace.
The Avatar component has no `size` variant prop; passing one causes a TypeScript error or is silently ignored. Control sizing with Tailwind classes like `className="h-12 w-12"`, or add custom variants yourself via `cva` in the component source.
yugasunScaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.
sburlDeploy projects to Railway, Vercel, or GitHub Pages with automatic platform detection.
voidcorp-coreValidates React components against a 7-point accessibility checklist covering semantics, ARIA, keyboard, and contrast.
codedogQBYImplements accessible React UI components with shadcn/ui, Radix UI, and Tailwind CSS.