shadcn-ui

Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.

783stars71forksUpdated 5/18/2026

Web Development #ui-components #theming #component-library #react #tailwind-css #javascript

Security Assessment

Safe(100/100)

Security Score100/100

About shadcn-ui

The shadcn-ui skill is designed to streamline the integration of shadcn/ui components into themed React projects. It provides a structured approach for installing, configuring, and customizing a wide range of UI components while ensuring proper dependency management and adherence to theme infrastructure. This skill addresses common challenges in React development, such as maintaining consistent styling, managing component dependencies, and implementing advanced UI patterns, making the process more efficient and less error-prone for developers.

This skill covers the installation of both foundation and feature components, handling external dependencies, and offering guidance on combining components into common UI patterns like forms, data tables, navigation menus, modals, and feedback elements. It includes explicit instructions on installation order, known gotchas, and best practices, such as avoiding empty strings in select inputs, managing null values in forms, handling tree-shaking issues with icons, and overriding component styles correctly. Additionally, it provides clear guidance on customizing components using semantic CSS tokens and extending component variants without directly manipulating raw Tailwind classes.

Targeted primarily at React developers working with Tailwind CSS and shadcn/ui, this skill is particularly useful for teams or individuals building scalable and maintainable UI systems. It is ideal for projects that require a consistent design language, reusable components, and adherence to semantic theming. Developers can leverage this skill to quickly set up and expand their UI libraries, ensuring that forms, tables, modals, and navigation elements integrate seamlessly with the project’s theme and design standards.

FAQ

Do I need to set up a theme before using shadcn-ui components?

Yes, you must first establish the theme infrastructure using tailwind-theme-builder, which sets up CSS variables, ThemeProvider, and dark mode. shadcn-ui assumes this foundation is already in place.

What are the main external dependencies for shadcn-ui components?

Some components require additional packages. For example, forms need react-hook-form, zod, and @hookform/resolvers; toast requires sonner; data tables need @tanstack/react-table; commands require cmdk; and date pickers optionally use date-fns. These must be installed separately.

Can I install components in any order?

No, you should follow the recommended installation order. Foundation components like button, input, label, and card should be installed first, followed by feature components such as forms, tables, navigation, and overlays.

What are common pitfalls when using shadcn-ui?

Common issues include passing empty strings to select inputs, spreading null values from react-hook-form fields, dynamic imports of Lucide icons causing tree-shaking issues, and incorrectly overriding dialog widths. The documentation provides workarounds for these cases.

How do I customize component variants and colors?

You can extend or add variants by editing the component files in src/components/ui/ and using semantic tokens from your theme for color customizations. Raw Tailwind colors should be avoided to maintain theme consistency.