skills.rest
Yoodaddy0311
Yoodaddy0311COMMUNITY
Explore all skills by this author →
GitHub

library-shadcn

Implements shadcn/ui component patterns for React with theming, dark mode, and CVA variants.

3|2|Updated Feb 13, 2026
Search Tags:#react#component library#tailwind css#dark mode#shadcn#radix ui#cva variants
One-click install
npx skills add https://github.com/Yoodaddy0311/artibot --skill library-shadcn-yoodaddy0311
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: library-shadcn
Source: https://github.com/Yoodaddy0311/artibot/tree/main/plugins/artibot/skills/library-shadcn
Command: npx skills add https://github.com/Yoodaddy0311/artibot --skill library-shadcn-yoodaddy0311

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building consistent, accessible React UIs from scratch is slow and error-prone, especially when handling theming, dark mode, form validation, and accessibility. This Skill provides proven shadcn/ui patterns so you can compose production interfaces without reinventing component architecture. ## Core Features & Use Cases - Component Setup & Composition: Install shadcn/ui primitives via CLI and compose forms, dialogs, data tables, and dashboards from copied source code you fully own. - Theming & Dark Mode: Customize CSS variable tokens in globals.css and implement dark mode with next-themes and class-based toggling. - Variants & Accessibility: Extend components with CVA variants, merge classes with the cn() utility, and meet accessibility requirements through Radix UI primitives. - Use Case: You are building an admin panel in Next.js. Use this Skill to scaffold a CRUD data table with a dialog-based edit form validated by React Hook Form and Zod, styled with a custom theme and dark mode toggle. ## Quick Start Ask the AI to set up shadcn/ui in your React project and build a validated user form with dark mode support.

Frequently Asked Questions about library-shadcn

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

FAQPage Schema
How do I install shadcn/ui components in a React project?▼

Run npx shadcn@latest init to set up the project, then add individual components with npx shadcn@latest add button. Components are copied into your project as source code, not installed as an npm dependency, so you own and can modify them freely.

How do I add dark mode to shadcn/ui with Next.js?▼

Use the next-themes package with a ThemeProvider configured with attribute="class" and enableSystem. Define a .dark class in globals.css overriding the CSS variables, then add a toggle button that calls setTheme from the useTheme hook.

Does shadcn/ui work with Vue, Svelte, or Angular?▼

No, shadcn/ui is built specifically for React with Tailwind CSS and Radix UI primitives. For non-React stacks or projects without Tailwind CSS, these component patterns cannot be directly applied and you should use a framework-native library instead.

How do I customize shadcn/ui component styles?▼

Modify the CSS variables in globals.css rather than overriding with !important, since all components reference these tokens via Tailwind classes. For structural changes, edit the copied component source directly or add CVA variants.

Why does my shadcn/ui dialog show accessibility warnings?▼

Dialogs require a DialogTitle and DialogDescription for screen readers; missing them triggers warnings. Also add sr-only labels to icon-only buttons and aria-label attributes on interactive elements without visible text.

Related Skills

Explore More Software Engineering Skills→
getprobe-devgetprobe-dev
4

shadcn-ui

Install and customize React UI components via a CLI with Tailwind CSS and Radix UI.

Official
Advanced
dallaydallay

building-mcp-server-on-cloudflare

Build and deploy remote MCP servers on Cloudflare Workers with OAuth 2.1.

Official
Advanced
eleva-labseleva-labs

api-validate

Validate API implementations against OpenAPI specifications and contracts.

Official
Intermediate
aashahinaashahin

shadcn-ui

Integrates and customizes shadcn/ui components in React applications using Tailwind CSS.

Community
Intermediate