skills.rest
Ikaleio
IkaleioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

Manages shadcn/ui components through CLI-driven adding, searching, styling, and composition.

9|Updated Aug 10, 2026
Search Tags:#react#cli#registry#tailwind#ui components#shadcn#preset
One-click install
npx skills add https://github.com/Ikaleio/skills --skill shadcn-ikaleio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Ikaleio/skills/tree/main/shadcn
Command: npx skills add https://github.com/Ikaleio/skills --skill shadcn-ikaleio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Working with shadcn/ui requires knowing the correct CLI commands, component composition rules, and styling conventions; this Skill provides project-aware context and enforced rules so generated UI code follows shadcn/ui best practices instead of reinventing markup. ## Core Features & Use Cases - CLI-driven component management: Add, search, view, diff, and update components from official, namespaced, or GitHub registries using the project's own package runner. - Enforced composition and styling rules: Critical rules for forms (FieldGroup/Field), icons (data-icon), semantic colors, gap-based spacing, and base-vs-radix API differences with Incorrect/Correct code pairs. - Preset and theme workflows: Initialize projects with named presets or preset codes, apply or merge presets into existing projects, and customize themes via CSS variables. - Use Case: When asked to build a settings form in a Next.js project with a components.json file, the Skill reads project context via npx shadcn@latest info, fetches component docs, and generates code using FieldGroup, ToggleGroup, and semantic tokens. ## Quick Start Ask the agent to add a shadcn/ui component such as a dialog or build a settings form in a project that contains a components.json file.

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 my project?▼

Run npx shadcn@latest add followed by component names, registry-prefixed names like @magicui/shimmer-button, or GitHub addresses like owner/repo/item. Use the package runner matching your project, such as pnpm dlx or bunx, and preview changes first with --dry-run or --diff.

How do I search shadcn registries for components?▼

Use npx shadcn@latest search with an optional registry namespace and -q query flag, for example npx shadcn@latest search @shadcn -q "sidebar". Without a registry argument it searches every registry configured in components.json, and -t filters by item type like ui or block.

What is the difference between base and radix in shadcn/ui?▼

The base field in project context determines the primitive library, which changes component APIs. Radix uses asChild and type="single"/"multiple" props, while base uses render, a multiple boolean, items props on Select, and scalar Slider values. Check the base field from npx shadcn@latest info before writing component code.

How do I update shadcn components without losing local changes?▼

Run npx shadcn@latest add <component> --dry-run to see affected files, then --diff <file> to compare upstream changes against local modifications. Apply upstream updates per file while preserving local edits, and never use --overwrite without explicit approval.

How do I apply or switch shadcn presets in an existing project?▼

Use npx shadcn@latest apply <code> to overwrite preset-driven config, fonts, and CSS variables, or --only theme,font for partial updates. To preserve customized components, run init --preset <code> --force --no-reinstall and merge components individually with the dry-run diff workflow.

Why should I avoid space-y and raw colors in shadcn/ui code?▼

The Skill's styling rules require gap-* with flex layouts instead of space-x-*/space-y-*, and semantic tokens like bg-primary or text-muted-foreground instead of raw colors like bg-blue-500. Semantic tokens handle dark mode automatically through CSS variables, while raw values break theming.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

shadcn

Configure shadcn/ui components and registries across supported frameworks.

Community
Advanced
offers-pngoffers-png

fullstack-js

Define architecture, data modeling, and end-to-end conventions for full-stack JavaScript applications.

Community
Advanced
binfen1binfen1

design-style

Apply brand design systems to UI projects by reading DESIGN.md guidelines.

Community
Intermediate
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate