shadcn-ui

You build accessible React components by applying shadcn/ui patterns that integrate Radix UI primitives for ARIA support and Tailwind CSS for styling. This provides production-ready, themeable interfaces with consistent accessibility standards.

Yes, you can use React Hook Form and Zod for validation in a Next.js TypeScript project. The skill provides form patterns that integrate these libraries to handle controlled inputs, schema validation, and error states within accessible UI components.

The best way to scaffold shadcn/ui components is using the npx shadcn CLI for installation within a Next.js App Router project. This requires configuring Tailwind CSS, TypeScript path aliases, and class-variance-authority utilities beforehand.

Yes, Tailwind CSS theming supports dark mode and CSS variables for React interfaces. The skill provides styling and theming guidance using CSS variables to implement dark mode and maintain consistent design tokens across components.

You manage complex UI patterns like dialogs, tables, and charts by implementing shadcn/ui component libraries. These patterns cover compound components, controlled and uncontrolled behaviours, portals, and animation integration for polished React interfaces.

Yes, you need TypeScript path aliases and class-variance-authority to install and implement shadcn/ui components. These utilities, along with Tailwind CSS and @radix-ui packages, are required dependencies for the npx shadcn CLI to scaffold components correctly.