skills.rest
arthtyagi
arthtyagiCOMMUNITY
Explore all skills by this author →
Website𝕏@arthtyGitHub

shadcn

Configure shadcn/ui components and registries across supported frameworks.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill removes the friction from setting up and working with shadcn/ui, helping you build accessible, consistent interfaces without guessing CLI flags, registry formats, or theme wiring.

Core Features & Use Cases

  • Project initialization: Set up shadcn/ui non-interactively with the right defaults for modern app stacks.
  • Component workflows: Add, inspect, migrate, and customize components while preserving clean Tailwind-based composition.
  • Registry and theming support: Configure custom registries, CSS variables, presets, and design tokens for cohesive product UI.
  • Use case: You can use this Skill when bootstrapping a dashboard, adding dialogs and tables, or fixing a component integration problem in an existing app.

Quick Start

Use the shadcn skill to initialize the project, add the required components, and align the theme and registry settings with your app’s design system.

Frequently Asked Questions about shadcn

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

FAQPage Schema
How do I set up shadcn/ui components in a Vite or Next.js project?▼

To set up shadcn/ui components, you need to initialize the project non-interactively using accurate CLI flags and configure the components.json file to align Tailwind CSS variables with your app stack.

Does shadcn/ui support frameworks like Astro, Laravel, and TanStack Start?▼

Yes, shadcn/ui supports project initialization and UI composition across Next.js, Vite, React Router, Astro, Laravel, and TanStack Start, allowing flexible integration across various modern frameworks.

How do I configure custom registries and Tailwind CSS variables for theming?▼

Configuring custom registries and Tailwind CSS variables involves defining design tokens and presets in your components.json, ensuring cohesive product UI and consistent theme wiring across Radix or Base UI primitives.

Why is my shadcn/ui component integration or migration not working?▼

Component integration or migration issues often stem from misconfigured CLI flags, incorrect components.json settings, or mismatched Tailwind CSS variables, requiring precise troubleshooting to preserve clean composition.

Can I add and customize shadcn/ui dialogs and tables without breaking Tailwind styles?▼

Yes, you can add, inspect, migrate, and customize components like dialogs and tables while preserving clean Tailwind-based composition by correctly handling Radix or Base UI primitives and CLI flags.

What's the best way to automate shadcn/ui project initialization non-interactively?▼

The best way to automate shadcn/ui initialization non-interactively is by passing the correct CLI flags for your specific app stack, ensuring accurate handling of the components.json file and Tailwind defaults.

Related Skills

Explore More Software Engineering Skills→
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced
pepecczpepeccz

radix-tailwind

Implement Radix UI and Tailwind CSS patterns for MSI-a admin panels.

Community
Advanced
broomvabroomva
3

arcan-glass

Implement glassmorphism and dark-first themes with OKLCh tokens for Next.js and Tailwind CSS v4.

Community
Intermediate
HieubkavHieubkav

ui-styling

Create accessible UI styling with shadcn/ui and Tailwind CSS for React applications.

Community
Advanced