shadcn-ui_skill

Overview

This skill helps implement UI components using shadcn/ui in TypeScript projects. It focuses on CLI-driven component installation, configuration files (components.json), and integration with Vite, TanStack Router, and Tailwind CSS. The guidance is practical and oriented toward shipping accessible, production-ready components quickly.

How this skill works

The skill shows how to initialize shadcn/ui with the CLI, add individual or bulk components, and apply a components.json configuration for aliases, styling, and Tailwind integration. It provides concrete Vite and TanStack Router setup steps, recommended TypeScript path aliases, and manual fallbacks when the CLI is not used. It also covers necessary helper utilities like the cn() utility and Tailwind CSS setup.

When to use it

• Starting a new Vite + React + TypeScript project and you want ready-made, accessible components
• Adding shadcn/ui components to a TanStack Router file-router project
• Replacing handcrafted UI primitives with a composable, themeable component set
• Needing quick production-ready defaults that integrate with Tailwind CSS
• Working offline or in a constrained environment and preferring components copied into your repo rather than installed dependencies

Best practices

• Run npx shadcn@latest init early to scaffold configuration and choose a base color
• Use the CLI add command to copy components into your project so you can customize code directly
• Define TypeScript path aliases (@/*) and Vite resolve aliases to keep imports consistent
• Keep a components.json in source control to record style, aliases, and Tailwind settings
• Add a small cn() helper (clsx + tw-merge) for safe class composition and Tailwind merging

Example use cases

• Create a new TanStack Router app preconfigured with shadcn using npx create-tsrouter-app and then add Button, Dialog, Form components
• Spin up a Vite React + TypeScript app, install Tailwind, initialize shadcn, and import Button into src/App.tsx
• Manually add shadcn components when CLI access is restricted: install dependencies, add styles, create components.json, and copy component files
• Customize theme tokens and CSS variables for light/dark themes by editing the provided globals.css variables