shadcn

Manage shadcn/ui components and project configurations via CLI operations.

Updated May 24, 2026
One-click install
npx skills add https://github.com/sAkuraOfficial/.agents --skill shadcn-sakuraofficial
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/sAkuraOfficial/.agents/tree/main/skills/shadcn
Command: npx skills add https://github.com/sAkuraOfficial/.agents --skill shadcn-sakuraofficial

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill enables AI assistants to manage shadcn/ui components and project configurations, reducing manual boilerplate when adding, searching, fixing, debugging, styling, and composing UI across a project.

Core Features & Use Cases

  • Add, search, fix, and debug shadcn components and presets from registries and the local project context.
  • Generate and reference component docs, usage examples, and project context to accelerate UI scaffolding.
  • Switch presets and adapt a project’s UI system (base/radix, Nova/Vega styles) via the CLI, especially when a components.json file defines the workspace.

Quick Start

Initialize or update your project's shadcn UI by running the CLI commands shown in the SKILL.md, starting with npx shadcn@latest init --preset <code>.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add and configure shadcn UI components in my project?

To add shadcn UI components, run the CLI commands starting with npx shadcn@latest init. This automates component installation, applies frontmatter-defined metadata, and configures your workspace using a components.json file.

Can I switch design presets for an existing shadcn/ui workspace?

Yes, you can switch shadcn/ui presets to adapt your project's UI system. Run the CLI with your desired preset code, such as base/radix or Nova/Vega styles, to update the design system configuration defined in your components.json file.

What is the best way to generate usage docs for shadcn components?

The best way to generate shadcn component documentation is through an AI assistant managing your project context. It references local components, presets, and optional resources under scripts/references/assets to produce usage examples and accelerate UI scaffolding.

Do I need a components.json file to manage shadcn UI configurations?

Yes, a components.json file is required to manage shadcn UI configurations. It defines the workspace context, enabling the CLI to accurately discover, activate, and apply configurations for adding, fixing, and composing UI components.

Why are my shadcn UI components not applying the correct styling?

Incorrect shadcn UI styling often occurs when the project context or preset configuration is mismatched. You can debug and fix component styling by leveraging CLI-driven operations to realign the UI system with base/radix or Nova/Vega style presets.

Does the shadcn CLI support searching for components across different registries?

Yes, the shadcn CLI supports searching for components across registries and your local project context. This allows you to discover, add, and compose UI elements while automatically applying the required frontmatter-defined metadata.