shadcn

Manage shadcn/ui components and projects via CLI operations.

Updated Mar 15, 2026

Search Tags:#shadcn/ui #tailwind css #frontend development #ui development #react components #component management

Ready to run

npx skills add https://github.com/brGuirra/funkonation --skill shadcn-brguirra

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/brGuirra/funkonation/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/brGuirra/funkonation --skill shadcn-brguirra

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of working with shadcn/ui components, from initial setup and adding new components to debugging, styling, and composing complex UI elements.

Core Features & Use Cases

Component Management: Add, search, and update shadcn/ui components using the CLI.
UI Composition: Follow best practices for building consistent and accessible user interfaces with shadcn/ui.
Styling & Theming: Customize component appearance using semantic tokens, Tailwind CSS, and CSS variables.
Use Case: When building a new feature, use this Skill to quickly add a Dialog and Button component, ensuring they adhere to the project's established styling and accessibility guidelines.

Quick Start

Use the shadcn skill to add the 'dialog' and 'button' components to the project.

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 a React project?▼

You can add and manage shadcn/ui components using CLI commands like 'shadcn init' or adding specific components, ensuring they adhere to project styling and accessibility guidelines. The skill handles component search and updates directly.

Can I customize shadcn/ui component styling with Tailwind CSS and semantic tokens?▼

Yes, you can customize shadcn/ui component appearance by applying semantic tokens, Tailwind CSS utilities, and CSS variables to maintain consistent theming across your React user interface components.

What is the best way to compose accessible user interfaces using shadcn/ui?▼

The best way to compose accessible user interfaces with shadcn/ui is by following best practices for component composition, utilizing provided component documentation and usage examples to build consistent UI elements.

Does this work with projects using a custom component registry or preset?▼

Yes, it applies when working with shadcn/ui, custom component registries, presets, or any project containing a components.json file, and triggers for commands like 'create an app with --preset'.

How do I debug and fix shadcn/ui component issues in my frontend application?▼

To debug and fix shadcn/ui component issues, the skill provides project context, component documentation, and usage examples to help identify and resolve styling or composition problems in your frontend development environment.