Introduction to components
Welcome to the Components chapter! In the next lessons, you will learn how to use, edit and create new shadcn/ui components.
The shadcn/ui components are styled with Tailwind CSS classes. In our Figma kit, the components are built using variables from the Tailwind CSS collection, colors from the Mode collection and styles, allowing for consistent and systematic modifications across your design system. In this chapter, you can learn how to edit components in Figma.
Figma guides
While our academy primarily focuses on mastering our UI kit and plugin, we understand you might want to explore Figma's broader capabilities. For a deeper dive into Figma's extensive functionalities beyond our direct scope, you'll find links to their official resources below.
Components
The shadcn/ui Kit for Figma is built with components. These are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can learn more about Components and how to use them here.
Variants
The UI kit uses Variants, which allow you to group and organize similar components into a single container. This simplifies the component library and makes it easier for everyone to find what they need. Here are more details on Variants.
Auto layout
The system's components were built with the Auto Layout feature. Auto Layout creates designs that grow to fill or shrink to fit and reflow as their contents change—just like on a real website! You can learn more about Auto Layout here.