skills.rest
oscartejera
oscartejeraCOMMUNITY
Explore all skills by this author →
GitHub

shadcn-ui

Guide integrating and customizing shadcn/ui components in React applications.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides expert guidance for integrating and building applications with shadcn/ui components, streamlining the development process for modern web interfaces.

Core Features & Use Cases

  • Component Discovery: Easily find and understand available shadcn/ui components.
  • Installation & Setup: Guides through adding components to your project and initial setup.
  • Customization: Offers best practices for theming, variants, and creating composite components.
  • Use Case: A developer needs to quickly add a data table with sorting and filtering to their React application. They can use this Skill to discover the table component, understand its integration with @tanstack/react-table, and implement it following best practices.

Quick Start

Use the shadcn-ui skill to add the 'button' component to your project.

Frequently Asked Questions about shadcn-ui

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

FAQPage Schema
How do I add shadcn/ui components to my React project?▼

You can add shadcn/ui components to your React project by using the CLI for installation. This Skill guides you through the setup process, including theming with CSS variables and integrating components like buttons.

What's the best way to customize shadcn/ui component variants?▼

The best way to customize shadcn/ui component variants is by using class-variance-authority. This Skill offers best practices for theming, defining variants, and building composite components in your React application.

Can I use shadcn/ui primitives with Base UI and Radix UI?▼

Yes, you can use shadcn/ui with Base UI and Radix UI primitives. This Skill provides comprehensive guidance on integrating and utilizing components built on both primitive layers within your React application.

How do I build a React data table with sorting and filtering using shadcn/ui?▼

To build a React data table with sorting and filtering, this Skill helps you discover the shadcn/ui table component and understand its integration with @tanstack/react-table to implement the feature following best practices.

Does shadcn/ui support theming with Tailwind CSS?▼

Yes, shadcn/ui supports theming with Tailwind CSS. This Skill provides guidance on configuring project setup and customizing themes using CSS variables to style your React application components.

Related Skills

Explore More Software Engineering Skills→
justinlevinedotmejustinlevinedotme
7

vite-shadcn-tailwind4

Initialize shadcn/ui with Tailwind v4 in Vite projects.

Community
Advanced
HokageZHokageZ
2

shadcn-ui-expert

Develop accessible React components with shadcn-ui, Tailwind CSS, and Radix UI.

Community
Intermediate
global-osglobal-os

shadcn

Integrate and customize shadcn/ui components using the shadcn CLI.

Official
Intermediate
awardsappawardsapp

building-compound-components

Design unstyled compound React component APIs with context and render props.

Official
Intermediate