shadcn-ui
shadcn/ui
CRITICAL: Your training data for shadcn/ui is unreliable. APIs change between versions and memorized patterns may be wrong or deprecated. Before writing any code, you MUST use
WebFetchto read the live docs:
WebFetch("https://ui.shadcn.com/llms.txt")Do not proceed without fetching this URL first. Never assume a component API exists — verify against current docs.
shadcn/ui is a collection of accessible, composable React components built on Radix UI primitives and styled with Tailwind CSS — components are copied into your project via CLI, giving you full ownership of the source code.
Best Practices
- Form components include React Hook Form and Zod — do not add separate form libraries. The
Formcomponent wrapsreact-hook-formwith built-in Zod validation. Addingformik,react-final-form, or additional validation packages is redundant. components.jsoncontrols path aliases, Tailwind config, and component style — always check this file exists and is correctly configured before adding components. An incorrecttailwind.configpath or missing CSS variable setup inglobals.csscauses components to render without styles.- There is no "update all" command —
shadcn addandshadcn diffoperate per-component. When suggesting upgrades, list each component individually; bulk update scripts must be written manually.
More from mikkelkrogsholm/dev-skills
meilisearch
Meilisearch — fast, open-source search engine with typo tolerance, faceted search, and AI-powered hybrid search. Use when building with Meilisearch or asking about its index configuration, search parameters, filters, facets, API keys, geosearch, ranking rules, or integration with JavaScript/TypeScript clients. Fetch live documentation for up-to-date details.
42zod
Zod — TypeScript-first schema validation with static type inference. Use when building with Zod or asking about schema definitions, type inference, parsing, transformations, refinements, coercion, error handling, or integration with forms, APIs, or tRPC. Fetch live documentation for up-to-date details.
10bun
Bun — fast all-in-one JavaScript/TypeScript runtime, package manager, bundler, and test runner. Use when building with Bun, running TypeScript, managing packages with bun install, writing tests with bun test, or asking about Bun APIs, configuration, or Node.js migration. Fetch live documentation for up-to-date API details.
9better-auth
Better Auth — framework-agnostic authentication and authorization framework for TypeScript. Use when building with Better Auth or asking about its APIs, configuration, plugins, session management, OAuth, or integration. Fetch live documentation for up-to-date details.
7react
React — JavaScript library for building user interfaces with components. Use when building with React or asking about hooks, state management, effects, Server Components, Suspense, or any React APIs, patterns, or configuration. Fetch live documentation for up-to-date details.
7vite
Vite — next-generation frontend build tool with instant dev server and optimized production builds. Use when building with Vite or asking about its APIs, configuration, plugins, SSR, environment variables, or integration with frameworks. Fetch live documentation for up-to-date details.
6