shadcn▌

shadcn/ui is a collection of re-usable React components built with Radix UI primitives and styled with Tailwind CSS. Unlike traditional component libraries, shadcn/ui components are copied directly into your project, giving you full ownership and customization control. Components are accessible, customizable, and open source.

Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.

Tailwind v4 with shadcn/ui using CSS variables and @theme inline pattern. \n \n Four-step architecture: define CSS variables at root, map to Tailwind utilities with @theme inline , apply base styles, automatic dark mode switching \n Prevents 8 documented errors including color mapping failures, dark mode conflicts, @apply breaking changes, and v3 migration gotchas \n Requires @tailwindcss/vite plugin (not PostCSS), empty Tailwind config in components.json, and ThemeProvider wrapper for theme tog

Install and configure shadcn/ui components in themed React projects with guided component selection and common UI patterns. \n \n Requires tailwind-theme-builder to have set up CSS variables, ThemeProvider, and dark mode infrastructure first \n Covers 20+ components organized by category: foundation (button, input, card), forms (form, textarea, select), feedback (toast, alert), overlays (dialog, sheet, popover), data display (table, tabs), and navigation \n Documents installation order, external

Pre-built shadcn/ui component definitions and implementations for json-render. Provides 36 components built on Radix UI + Tailwind CSS.

Help generate shadcn/Tailwind components that render correctly the first time. Most agent-generated UI fails due to missing mental models about how CSS layout works—not syntax errors, but assumption gaps.

This creates a components.json configuration file and sets up: