shadcn-ui

Building accessible React components with shadcn/ui involves copying ready-to-use patterns that integrate Radix UI primitives and Tailwind CSS. This approach reduces boilerplate while ensuring design consistency and built-in accessibility considerations across your project.

Setting up shadcn/ui forms with React Hook Form and Zod requires installing the form component and defining a Zod schema for validation. This Skill provides practical implementation recipes to connect the form state, handle validation errors, and submit data efficiently.

Yes, you can use shadcn/ui patterns for data visualization. The Skill provides ready-to-copy implementation examples for Chart and Table components, allowing you to render structured data and graphical visualizations while maintaining accessibility and Tailwind CSS theming.

shadcn/ui works with standard React projects and does not require a specific proprietary framework. You can install and configure the component patterns directly into your existing React application, customizing the design system using Tailwind CSS variables.

The best way to customize shadcn/ui theming is by modifying Tailwind CSS configuration and design tokens. This Skill offers guidance on design-system customization, allowing you to adjust styles and ensure visual consistency across common patterns like Button and Dialog.

Accessibility issues in shadcn/ui Sheet or Dialog components often stem from missing focus management or ARIA attributes. This Skill provides recipes that cover accessibility considerations, ensuring proper keyboard navigation and screen reader support for overlay components.