shadcn-ui

Guides building accessible, customizable UI with shadcn/ui as a code generation platform (not an npm dependency). Components are copied into your project via the CLI and fully owned. Supports Radix UI or Base UI primitives, Tailwind CSS 4 with oklch color tokens, React 19 direct ref patterns, and type-safe form validation with the Field component and Zod.

When to use: Adding shadcn/ui components, theming with CSS variables and oklch colors, building forms with React Hook Form or TanStack Form, creating custom registries, composing accessible component variants, setting up dark mode.

When NOT to use: Non-React frameworks (use shadcn-vue or shadcn-svelte instead), projects using a different component library (MUI, Chakra), projects not using Tailwind CSS.

Radix UI または Base UI、Tailwind CSS 4、および React 19 で shadcn/ui を使用して、アクセス可能でカスタマイズ可能なコンポーネント ライブラリを構築します。コンポーネントの所有権、oklch CSS テーマ、Field および Zod を使用したタイプ セーフ フォーム、CLI ワークフロー、およびレジストリ パターンをカバーします。 shadcn/ui コンポーネントの追加、テーマの構成、Zod を使用したフォームの構築、カスタム レジストリの作成、またはアクセス可能なコンポーネント バリアントの作成時に使用します。 shadcn CLI、ダーク モード、コンポーネント バリアント、フォーム検証に使用します。 ソース: oakoss/agent-skills。