What is shadcn/ui?

The shadcn/ui is a unique collection of beautifully crafted, ready-to-use components that developers can seamlessly integrate into their projects. Unlike traditional component libraries that are often rigid and unmodifiable, shadcn/ui offers developers complete freedom to customize components to their liking. As the creator, shadcn, aptly puts it: "This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps."

The unique approach of shadcn/ui

The brilliance of shadcn/ui lies in its flexibility. Traditional UI libraries can be likened to renting an apartment where modifications are restricted. In contrast, shadcn/ui is akin to owning a house, allowing developers to renovate and personalize components as they see fit. Components can be added through a simple command line tool, which sets up everything needed in seconds.

This approach liberates developers from the constraints of versioning and complex customization rules typical of traditional libraries. By integrating components directly into projects, developers gain complete ownership and control over the code. This freedom allows for:

• Unrestricted Modification: Engineers can modify components without dependency constraints.
• ‍Optimized Bundle Sizes: Use only the components needed, reducing overall bundle size.
• ‍Project Evolution Control: Maintain full control over project evolution without the risk of breaking changes from external updates.

The foundations of shadcn/ui

The shadcn/ui is built on two powerful foundations: Tailwind CSS and Radix UI.

Tailwind CSS

Tailwind CSS serves as a smart design system, akin to how designers work in Figma. For instance, setting padding to 16px in Figma translates to ⁠p-4 in Tailwind. Choosing a blue background color becomes ⁠bg-blue-500. This intuitive system simplifies the design process.

Moreover, shadcn/ui employs semantic variables similar to Figma. Instead of using direct color values for UI elements like backgrounds and texts, it uses semantic variables such as ⁠bg-background and ⁠text-foreground. This approach ensures consistency and supports both light and dark modes effortlessly.

Radix UI

Radix UI acts as the invisible engineering backbone, ensuring components function flawlessly. It handles essential accessibility features, including keyboard navigation and screen reader compatibility, making interfaces professional and user-friendly.

The synergy of shadcn/ui

Shadcn/ui masterfully combines Radix's robust functionality with Tailwind's flexible styling system. The result is a set of components that not only look stunning but also perform impeccably for every user.

Let's get started

In the next lessons, we will focus on the practical side of using the shadcn/ui kit for Figma - you will learn how to edit and use the UI kit. If you are interested in learning how the UI kit is constructed we recommend checking out our documentation on variables.