skills.rest
dvegaa20
dvegaa20COMMUNITY
Explore all skills by this author →
WebsiteGitHub

shadcn

Manage shadcn/ui components and presets via CLI workflows.

Updated Mar 20, 2026
Search Tags:#ui#frontend#components#cli#shadcn#presets
One-click install
npx skills add https://github.com/dvegaa20/alia --skill shadcn-dvegaa20
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/dvegaa20/alia/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/dvegaa20/alia --skill shadcn-dvegaa20

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the management of shadcn/ui components and presets across projects, providing a centralized way to discover, document, and reuse components and configurations.

Core Features & Use Cases

  • Centralizes project context, component docs, and usage examples for shadcn/ui.
  • Supports CLI workflows such as init, apply presets, switch presets, and add/update components across multiple apps.
  • Triggers for common workflows include "shadcn init", "create an app with --preset", and "switch to --preset" to streamline onboarding and maintenance.

Quick Start

Run the CLI in your project, first using npx shadcn@latest info to inspect context, then add components with npx shadcn@latest add.

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 an existing frontend project?▼

To add shadcn/ui components, run npx shadcn@latest info to inspect your repository context, then use npx shadcn@latest add to install components. The CLI reads your Tailwind setup and aliases to place files correctly.

What is the best way to manage shadcn/ui presets across multiple apps?▼

Managing shadcn/ui presets across apps is done by applying and switching presets via CLI commands like init and apply. This provides a centralized way to reuse component configurations across different frontend projects.

Can I initialize a new app with a specific shadcn/ui preset?▼

Yes, you can initialize a new app with a specific shadcn/ui preset. Use the CLI workflow trigger 'create an app with --preset' to apply a preset configuration during project initialization.

Does the shadcn CLI work with my existing Tailwind setup and path aliases?▼

The shadcn CLI parses repository context including your Tailwind setup and path aliases before executing commands. It reads this configuration to ensure added components are placed correctly within your framework.

How do I switch shadcn/ui presets in an ongoing project?▼

To switch shadcn/ui presets in an ongoing project, use the CLI workflow trigger 'switch to --preset'. This executes the apply command to update your project's component configurations.

Why does shadcn init fail to read my project context correctly?▼

shadcn init fails to read project context when repository metadata like framework type, Tailwind setup, or path aliases is missing or misconfigured. The CLI parses this frontmatter context to execute commands properly.

Related Skills

Explore More Software Engineering Skills→
azlekovazlekov
1

shadcn

Implement shadcn/ui components with theming in React/Next.js projects.

Community
Intermediate
ApothecaryManApothecaryMan

frontend-design

Design and implement custom frontend interfaces with specified aesthetics and functionality.

Community
Advanced
billydeeii136billydeeii136

ui-styling

Generate UI components using shadcn/ui and Tailwind CSS utility classes.

Community
Intermediate
project-axproject-ax
1

shadcn

Manage shadcn/ui component workflows via CLI registry operations with dry-run safety.

Official
Intermediate