Is there support for JavaScript instead of TypeScript?

Yes, the guide explains how to set 'tsx': false in your components.json to generate .jsx files and configure jsconfig.json aliases.

Can I use this for frameworks other than Next.js?

Absolutely. It covers installation and configuration for Vite, Astro, Remix, Laravel, Gatsby, and TanStack Start.

Does this skill support Tailwind CSS v4?

Yes, it includes specific instructions for Tailwind v4, including OKLCH color variables and the @theme inline directive.

How does this handle the transition to React 19?

It follows React 19 best practices, such as using React.ComponentProps instead of forwardRef and utilizing data-slot attributes for primitives.

How do I add specific components using this skill?

The skill provides the standard pattern: use 'npx shadcn@latest add [component-name]'. It contains details for over 58 specific components.

Shadcn/UI Component Guide

Name: Shadcn/UI Component Guide
Author: vcode-sh

byvcode-sh

•

Design Tools

Streamlines the installation, configuration, and customization of the shadcn/ui component system for React projects.

This skill provides comprehensive, domain-specific guidance for implementing shadcn/ui, the popular open-code component system. It enables developers to seamlessly integrate accessible UI primitives from Radix UI and Base UI using Tailwind CSS v4. The guide covers everything from initial CLI scaffolding and framework-specific setups (Next.js, Vite, Astro) to advanced theming with OKLCH colors, dark mode implementation, and the creation of custom component registries. By following 'open code' principles, it ensures you maintain full ownership and control over your design system while leveraging AI-ready patterns.

Key Features

01Guidance on building, building, and distributing custom component registries

0216 GitHub stars

03Framework-specific installation patterns for Next.js, Vite, Remix, and more

04Tailwind CSS v4 support including OKLCH color theming and inline directives

05Comprehensive CLI reference for managing 58+ shadcn/ui components

06Advanced form integration using React Hook Form, Zod, and TanStack Form

Use Cases

01Setting up complex UI features like dark mode, RTL support, and automated form validation

02Migrating existing UI components to Tailwind CSS v4 and modern React 19 patterns

03Building a custom, accessible design system for React applications from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vcode-sh/vibe-tools shadcn-guide

For use in Claude.ai and ChatGPT

Download Skill