shadcn-guide
shadcn/ui Guide
Purpose
shadcn/ui is not a component library — it's a system to build your own component library. Components are copied into your project as open source code you fully own and control. Two primitive variants are available: Base UI (by MUI) and Radix UI (default).
Core Principles: Open Code, Composition, Distribution (schema + CLI), Beautiful Defaults, AI-Ready.
Upstream updates: shadcn/ui follows a headless component architecture. The core receives fixes by updating dependencies (e.g. radix-ui, input-otp). The topmost layer (closest to your design system) stays open for modification and is not coupled with the library implementation.
Do NOT use this guide for Chakra UI, Material UI (MUI), Ant Design, or vanilla Tailwind CSS without shadcn/ui context — those have different installation, theming, and component APIs.
Quick Start
# Initialize a new project (or add to existing)
npx shadcn@latest init
More from vcode-sh/vibe-tools
orpc-guide
>-
85tanstack-router-guide
>
10hono-guide
Guide for Hono, an ultrafast web framework built on Web Standards. Use when user asks to "create a Hono app", "build an API with Hono", "add Hono middleware", "deploy Hono to Cloudflare Workers", "use Hono RPC", "add auth to Hono", "validate requests in Hono", "use Hono JSX", or asks about Hono routing, context, streaming, WebSocket, CORS, testing, SSG, or multi-runtime deployment. Do NOT use for Express.js, Fastify, Koa, or Nest.js.
9tanstack-start-guide
>-
9tanstack-hotkeys-guide
>-
8base-ui-guide
Guide for Base UI (@base-ui/react), an unstyled React component library for building accessible UIs. Use when user asks to "build a component with Base UI", "create a form with Base UI", "style Base UI components", "animate Base UI popover", "use Base UI dialog", "add Base UI select", "implement Base UI tabs", or asks about Base UI accessibility, composition, customization, styling, animation, TypeScript types, or any of its 35+ components. Covers all components (Dialog, Menu, Popover, Select, Combobox, Tabs, Accordion, Toast, Form, Field, Slider, etc.), styling patterns, animations, composition via render props, event customization, form integration, and utilities. Do NOT use for Radix UI (radix-ui), Material UI (MUI @mui/material), or Shadcn/ui - those are separate libraries with different APIs.
6