skills.rest
bjorkgard
bjorkgardCOMMUNITY
Explore all skills by this author →
GitHub

shadcn

Manages shadcn/ui components including adding, searching, debugging, styling, and composing UI elements within a project context.

Updated Mar 5, 2026
Search Tags:#react#component library#shadcn/ui#tailwind css#frontend development#ui components
One-click install
npx skills add https://github.com/bjorkgard/convention-hosts --skill shadcn-bjorkgard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/bjorkgard/convention-hosts/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/bjorkgard/convention-hosts --skill shadcn-bjorkgard

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 building user interfaces by managing shadcn/ui components, ensuring consistency, and providing quick access to documentation and best practices.

Core Features & Use Cases

  • Component Management: Add, search, fix, debug, style, and compose shadcn/ui components.
  • Project Context: Understands your project's configuration (e.g., preset, icon library, framework) for accurate component usage.
  • Best Practices Enforcement: Guides users to follow established rules for styling, forms, and component composition.
  • Use Case: When you need to add a new button to your React application using shadcn/ui, this Skill can help you find the right button variant, add it to your project, and ensure it's styled correctly according to your project's theme.

Quick Start

Use the shadcn skill to add the 'button' and 'card' components to your 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 style shadcn/ui components in a React project?▼

To add and style shadcn/ui components, use the Skill to search component registries, add elements like buttons or cards, and ensure styling adheres to your project's specific configuration and theme.

What is the best way to manage shadcn/ui component composition and presets?▼

Managing shadcn/ui composition involves applying established rules for styling and forms, leveraging project-specific configurations like presets, icon libraries, and framework details defined in your components.json file.

Can I use shadcn/ui with my existing Tailwind CSS framework setup?▼

Yes, you can use shadcn/ui with Tailwind CSS. The Skill reads your project context, including framework details and icon libraries, to ensure component styling aligns with your existing Tailwind configuration.

How do I debug shadcn/ui components when they are not rendering correctly?▼

To debug shadcn/ui components, the Skill identifies project context from your components.json file and applies best practices for styling and composition to isolate and fix rendering issues within your React application.

Do I need a components.json file to manage shadcn/ui components?▼

Yes, a components.json file is needed to manage shadcn/ui components effectively. The Skill uses this file to understand your project's configuration, including presets and framework details, for accurate component usage.

Related Skills

Explore More Software Engineering Skills→
jubalmjubalm
1

shadcn-init

Initialize shadcn/ui in React projects with Tailwind CSS v4 configuration.

Community
Advanced
impact-initiativesimpact-initiatives

frontend-design

Design production-grade frontend interfaces with cohesive CSS and UI patterns.

Official
Advanced
liamtran96liamtran96

tailwindcss

Apply utility classes to style web interfaces across React, Vue, Svelte, and HTML.

Community
Intermediate
amarnath3003amarnath3003
4

Dataset Lab UI Kit - Replication Skill

Recreate a neumorphic Control Console design system with Tailwind CSS and React components.

Community
Advanced