skills.rest
leonvanzyl
leonvanzylCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

Manage shadcn/ui components and presets via the npx CLI.

426|199|Updated Aug 13, 2025
Search Tags:#automation#ui#docs#shadcn#presets#component-management#registries
One-click install
npx skills add https://github.com/leonvanzyl/agentic-coding-starter-kit --skill shadcn-leonvanzyl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/leonvanzyl/agentic-coding-starter-kit/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/leonvanzyl/agentic-coding-starter-kit --skill shadcn-leonvanzyl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Manages shadcn/ui components, presets, and documentation within a project to ensure consistent UI tooling and efficient onboarding for new apps.

Core Features & Use Cases

  • Provides project context, component docs, and usage examples for shadcn/ui components.
  • Supports actions like adding, searching, fixing, debugging, styling, and composing UI across registries and presets.
  • Triggers for initialization and preset switching (e.g., "shadcn init", "create an app with --preset", or "switch to --preset").

Quick Start

Run the CLI in your project to initialize or update shadcn/ui components and presets.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I add and manage shadcn/ui components in an existing project?▼

Initialize and manage shadcn/ui components by running CLI-driven operations via npx shadcn@latest within a project containing a components.json file, enabling actions such as adding, searching, and styling components.

What is a shadcn/ui preset and when do I need to switch presets?▼

A shadcn/ui preset defines component configurations and styling. You switch presets when initializing new apps or changing UI tooling approaches using triggers like 'switch to --preset'.

Can I use shadcn/ui component registries without a components.json file?▼

No, shadcn/ui component registries require a components.json file to provide project context awareness. This file ensures consistent UI tooling and enables actions like composing UI across registries and presets.

How do I debug and fix styling issues in shadcn/ui components?▼

Debug and fix shadcn/ui component styling issues using CLI-driven debugging actions. This workflow leverages project context and component documentation to resolve styling inconsistencies across registries.

What's the best way to find usage examples for shadcn/ui components?▼

Find usage examples for shadcn/ui components by using CLI search and documentation features. This supplies project context and component docs directly within your working environment.

Why does my shadcn init command fail when creating a new app?▼

Your shadcn init command may fail if the project lacks proper setup for component registries or if the components.json file is missing. Ensure your project environment supports CLI-driven operations before initializing.

Related Skills

Explore More Software Engineering Skills→
openstatusHQopenstatusHQ
2.2k

shadcn

Manage shadcn/ui components and project contexts via registries and presets.

Official
Advanced
kvnwolfkvnwolf
4

shadcn

Manage shadcn/ui components and projects with styling and documentation.

Community
Intermediate
hulusi-tunchulusi-tunc
3

shadcn-ui

Provide ready-made shadcn/ui component patterns for React projects.

Community
Advanced
quanngynxquanngynx

ai-elements

Create AI chat interface components for Next.js and shadcn/ui projects.

Community
Basic