shadcn

Manage shadcn/ui components and configuration via the shadcn CLI.

2|Updated Jul 1, 2025
One-click install
npx skills add https://github.com/RinKhimera/NOMAQbanq --skill shadcn-rinkhimera
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/RinKhimera/NOMAQbanq/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/RinKhimera/NOMAQbanq --skill shadcn-rinkhimera

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill centralizes the workflows and best practices for adding, updating, fixing, and composing shadcn/ui components so developers avoid broken imports, styling regressions, and unsafe overwrites when integrating community components or changing presets.

Core Features & Use Cases

  • Project-aware CLI guidance: Uses project context (package manager, aliases, base, tailwind version, isRSC) to select the correct package runner and file targets.
  • Safe install and update workflows: Emphasizes dry-run, diff, and smart merge steps to preview changes, preserve local edits, and avoid manual fetches of raw upstream files.
  • Composition and styling rules: Provides enforceable rules and examples for form composition, spacing, semantic tokens, icon usage, overlays, and accessibility (FieldGroup, no space-y-*, use cn(), data-invalid/aria-invalid, DialogTitle, AvatarFallback).
  • Registry and preset management: Helps search registries, add items, resolve registry commands, and switch/merge presets with clear reinstall/merge/skip strategies.
  • Use case: Add a component from a community registry, preview file diffs, correct aliased imports to match the project's resolvedPaths, and merge upstream changes while preserving local customizations.

Quick Start

Add a button component from the @shadcn registry and preview the exact file and CSS changes using the project's package runner with --dry-run and --diff.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add shadcn/ui components to a Vite or Next.js project without breaking imports?

To add shadcn/ui components without breaking imports, run the official CLI using your project's package runner, which honors context fields like aliasPrefix and tailwindVersion to correctly target files and resolve paths.

Can I preview file changes before updating shadcn/ui components?

Yes, you can preview file changes before updating shadcn/ui components by utilizing the CLI's --dry-run and --diff flags. These safe install workflows help you review modifications and avoid unsafe overwrites of your local customizations.

Does shadcn CLI work with monorepo setups and different package managers?

The shadcn CLI works with monorepo setups across Next.js and Vite by using the project's specific package runner. It reads your project context, including the base directory and resolved paths, to correctly manage component installations in complex architectures.

What's the best way to switch shadcn/ui presets while preserving local edits?

The best way to switch shadcn/ui presets while preserving local edits is to use the CLI's smart merge strategies. By leveraging diff and dry-run steps, you can safely merge upstream changes and skip or reinstall files without overwriting local customizations.

How do I add a component from a community shadcn registry?

To add a component from a community shadcn registry, use the CLI to search registries and resolve registry commands. The tool applies the component using your project's configuration, ensuring aliased imports match your resolvedPaths.

Why should I avoid manually fetching raw files when integrating shadcn/ui components?

You should avoid manually fetching raw files when integrating shadcn/ui components because it bypasses project context awareness. Using the official CLI ensures proper aliasing, applies safe merge workflows, and prevents broken imports and styling regressions.