shadcn-ui

---

name: shadcn-ui description: Modern React component library built on Radix UI and Tailwind CSS license: MIT compatibility: opencode metadata: framework: react styling: tailwind accessibility: radix-ui

What I do

I provide up-to-date knowledge and implementation guidance for Shadcn/UI, a modern React component library. I help you:

• Find and implement the right components for your use case
• Understand component APIs, props, and customization options
• Set up and configure Shadcn/UI in your project
• Follow best practices for component composition and theming
• Integrate with Tailwind CSS and design tokens

When to use me

Load this skill when you're:

• Building React applications with Shadcn/UI components
• Need to research component APIs or implementation patterns
• Setting up a new project with Shadcn/UI
• Customizing or extending Shadcn/UI components
• Troubleshooting component behavior or styling issues

How I work

I use the Context7 MCP to fetch the latest documentation and examples from Shadcn/UI. This ensures you always get current information about:

• Component installation and setup
• API documentation and prop interfaces
• Usage examples and code snippets
• Theming and customization guides
• Integration patterns with other libraries

Key Areas of Expertise

Component Library

• Form components (Input, Select, Checkbox, etc.)
• Navigation (Tabs, Breadcrumb, Pagination)
• Feedback (Alert, Toast, Dialog, Sheet)
• Data display (Table, Card, Badge, Avatar)
• Layout components (Separator, Aspect Ratio)

Setup & Configuration

• CLI installation and component addition
• Tailwind CSS configuration
• TypeScript integration
• Theme customization with CSS variables
• Dark mode implementation

Best Practices

• Component composition patterns
• Accessibility considerations
• Performance optimization
• Testing strategies
• Design system integration

Usage Instructions

When you load this skill, I will:

1. Research First: Use context7_resolve-library-id to find the correct Shadcn/UI library ID
2. Query Documentation: Use context7_query-docs to fetch relevant information based on your specific needs
3. Provide Context: Give you current, accurate information about components, setup, and best practices
4. Generate Code: Create implementation examples based on the latest documentation

Example Queries I Can Help With

• "How do I set up Shadcn/UI in a new Next.js project?"
• "Show me how to create a form with validation using Shadcn/UI components"
• "What are the props for the Dialog component and how do I customize its styling?"
• "How do I implement a data table with sorting and filtering?"
• "What's the best way to theme Shadcn/UI components for a custom design system?"

Integration Notes

This skill works best when combined with:

• tailwind-css skill for advanced styling
• typescript-advanced-types skill for complex type definitions
• atomic-design skill for component architecture
• nextjs-patterns skill for Next.js integration

Always use Context7 to get the most current information rather than relying on potentially outdated knowledge.