skills.rest
Moisesjr20
Moisesjr20COMMUNITY
Explore all skills by this author →
GitHub

shadcn

Configure shadcn/ui components with Tailwind CSS and Radix or Base UI primitives for non-interactive init, theming, custom registries, and migration workflows.

1|Updated Mar 10, 2026
Search Tags:#theming#ui#components#registry#tailwind#shadcn#radix
One-click install
npx skills add https://github.com/Moisesjr20/gueclaw --skill shadcn-moisesjr20
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn
Source: https://github.com/Moisesjr20/gueclaw/tree/main/.agents/skills/shadcn
Command: npx skills add https://github.com/Moisesjr20/gueclaw --skill shadcn-moisesjr20

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers and coding agents correctly install, configure, compose, and troubleshoot shadcn/ui component source in projects so teams avoid common CLI mistakes, type errors, theming breakages, and misconfigured component installs.

Core Features & Use Cases

  • CLI Best Practices: Guidance for non-interactive init, adding components, searching, listing, building custom registries, and running migrations with the correct flags and presets.
  • Theming & Tailwind Integration: Advice on CSS variable theming, dark mode handling, font variable placement, and Tailwind configuration to prevent runtime or build-time issues.
  • Registry & Composition: Instructions for creating and consuming registries, namespacing, component composition patterns, and concrete gotchas (e.g., Avatar sizing, TooltipProvider requirements).
  • Use Case: Initialize shadcn in a Next.js app non-interactively, add a dialog and button from a custom registry, migrate to the unified radix package, and fix any resulting CSS or TypeScript issues.

Quick Start

Use the shadcn skill to initialize shadcn/ui in your repository non-interactively with defaults and the radix base.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I initialize shadcn/ui non-interactively in a React project?▼

Initialize shadcn/ui non-interactively by running the CLI with specific flags and the radix base preset to install components with defaults, preventing interactive prompts during automated setup or CI pipelines.

How do I configure Tailwind CSS variables for shadcn/ui theming?▼

Configure shadcn/ui theming by defining CSS variables in your Tailwind configuration for dark mode and light mode, ensuring font variable placement is correct to prevent runtime or build-time style issues.

Can I use shadcn/ui components with Base UI primitives instead of Radix?▼

Yes, shadcn/ui supports both Radix and Base UI primitives for component composition, allowing you to choose your underlying headless UI library while maintaining the same styling and theming workflows.

What is the correct format for creating a custom shadcn/ui registry?▼

A custom shadcn/ui registry uses a specific JSON format to define component sources, enabling namespacing and distribution so you can share and consume custom components across different projects.

Why does my shadcn/ui Tooltip or Avatar component have rendering issues?▼

Rendering issues with shadcn/ui Tooltip or Avatar often stem from missing TooltipProvider requirements or incorrect Avatar sizing, requiring specific composition patterns to resolve these common gotchas.

How do I migrate shadcn/ui components to the unified radix package?▼

Migrate shadcn/ui components to the unified radix package by running the designated migration commands, which update imports and dependencies while advising on fixing resulting TypeScript or CSS errors.

Related Skills

Explore More Software Engineering Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
AradotsoAradotso
3

better-design-shadcn-themes

Install themed shadcn/ui components from Better Design registries via shadcn CLI.

Official
Basic
jangtrinhjangtrinh

ck:ui-styling

Integrate shadcn/ui components with Tailwind CSS for accessible, theme-consistent UI styling.

Community
Intermediate
lildibbblildibbb

shadcn-ui

Build React UI components with shadcn/ui, Radix UI, and Tailwind CSS.

Community
Intermediate