skills.rest
ZubairImtiaz3
ZubairImtiaz3COMMUNITY
Explore all skills by this author →
Website𝕏@zubairimtiaz1GitHub

shadcn

Manages shadcn/ui components, presets, and registries through the shadcn CLI.

Updated Sep 2, 2026
Search Tags:#react#cli#registry#tailwind#ui components#shadcn#presets
One-click install
npx skills add https://github.com/ZubairImtiaz3/Safar-E-Iman-Portal --skill shadcn-zubairimtiaz3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/ZubairImtiaz3/Safar-E-Iman-Portal/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/ZubairImtiaz3/Safar-E-Iman-Portal --skill shadcn-zubairimtiaz3

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building UI with shadcn/ui requires knowing the correct component APIs, composition rules, Tailwind conventions, and CLI workflows; this Skill enforces those rules and drives the shadcn CLI so generated code matches the project's actual configuration instead of guessed patterns. ## Core Features & Use Cases - Component lifecycle management: Search registries, preview changes with --dry-run/--diff, add or update components, and smart-merge upstream updates while preserving local edits. - Project-aware code generation: Reads project context (framework, base vs radix, Tailwind version, icon library, aliases) via npx shadcn@latest info and applies enforced rules for forms, composition, icons, styling, and chat UI. - Preset and registry workflows: Initialize projects with named presets or preset codes, switch presets with overwrite/merge/skip strategies, and author or validate custom registries. - Use Case: Ask for a settings form in a Next.js shadcn project and receive code using FieldGroup, Field, ToggleGroup, semantic color tokens, and the project's configured icon library, with components installed through the CLI. ## Quick Start Ask the assistant to add a shadcn component or build a UI pattern, for example: add a login form block to my project using shadcn/ui.

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 namespaces like @magicui/item, or GitHub addresses like owner/repo/item. Use --dry-run to preview changes and --diff to compare against existing files before writing.

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

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

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

The base field in components.json determines the primitive library and component APIs. Radix uses asChild for composition while base uses render, and components like Select, ToggleGroup, Slider, and Accordion have different props between the two.

How do I apply or switch a shadcn preset theme?▼

Use npx shadcn@latest apply <code> to overwrite an existing project's preset, or init --preset <code> --force --no-reinstall to update only config and CSS. Inspect codes with preset decode and the current project state with preset resolve.

Can I use community or private registries with shadcn?▼

Yes, configure namespaced registries in components.json with URLs containing {name}, or reference public GitHub repos directly as owner/repo/item. Authenticated registries support headers with environment variable references.

Why should I not fetch shadcn component files from GitHub manually?▼

The CLI handles registry resolution, file paths, import rewriting, and CSS diffing automatically. Manual fetching bypasses these transforms and can produce mismatched aliases or missing updates; always use add --dry-run, --diff, or --view instead.

Related Skills

Explore More Software Engineering Skills→
yugasunyugasun
1

dev-web

Scaffold modern web frontend projects with Bun, Vite, React 19, and TypeScript 5.

Community
Advanced
HouseGarofaloHouseGarofalo
3

azure-static-web-apps

Deploy and manage static web apps on Azure Static Web Apps.

Official
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

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