Components

Editing 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. Below you can learn how to edit components in Figma, and how to implement these changes in code.

Example: editing badge component

Let’s imagine we want to edit our Badge component so it uses different padding and border radius.

Figma

1. Go to Badge page in the main library page
2. Find the Badge / Text component in the Components section
3. Select the Badge components inside. Please note that you need to select the Badge frame in the Badge’s Focus state due to a different component construction. Your selection should look like on the image below.
4. Change the horizonal padding from spacing/2 (8px) variable to spacing/3 (12px) variable.
5. Change the border radius from rounded-md (6px) variable to rounded-full variable.
6. Leave a comment for developer that describes your changes. For example:

@DeveloperName I made some changes to this component:
- changed the horizontal padding value from 2 to 3
- changed the border-radius from rounded-md to rounded-full

‍

Implementation in code

With these design changes documented, developers can efficiently implement the updates in the codebase:

1. Locate the ⁠ui/badge.tsx file
2. Replace the ⁠px-2 class with ⁠px-3
3. Replace the ⁠rounded-md class with ⁠rounded-full
4. Save the file and preview your changes

This straightforward mapping between Figma variables and Tailwind CSS classes creates a seamless workflow from design to implementation, ensuring your UI remains consistent across both design files and production code.

By maintaining this structured approach to component modifications, your team can iterate quickly while preserving the integrity of your design system.

Adding new component variants

Creating new variants allows you to extend the shadcn/ui system while maintaining consistency with the existing design language. This guide demonstrates how to add a new "Warning" variant to the Button component in both Figma and code.

Example: Creating a warning button variant

1. Make sure you added the warning variables following the instructions from this page
2. Go to Button page in the main library file
3. Expand the Components section and the Button frame so you have more space for new variants.
4. Select and duplicate (CMD + D) the Destructive button variants.
5. In the Button properties panel, rename the newly created variants to Warning.
6. Change the color variables for the newly created variants from base/destructive to base/warning.
7. Change the color variables for the newly created variants from base/destructive-foreground to base/warning-foreground.
8. Select the Button component frame.
9. Run the Propstar plugin to tidy things up and create a component table.
10. Leave a comment for developer that describes your changes. For example:

@DeveloperName I added new button variant:
- Variant: Warning
- It’s using warning and warning-foreground color variables

Implementation in code

Once your design is ready, the developer will need to implement this new variant in the codebase:

1. Make sure to add new warning variables to your globals.css file. You can do it with our Figma to shadcn/ui plugin.
2. Open the ⁠ui/button.tsx file
3. Locate the variant definitions in the button component.
4. Add the new warning variant to the variant options:

...
{
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "underline-offset-4 hover:underline text-primary",
        warning: "bg-warning text-warning-foreground hover:bg-warning/90",
      },
      // ... other variants
    },
...

Creating new components

When creating entirely new components, follow these steps to ensure consistency with the shadcn/ui:

1. Start with a Frame set to the appropriate constraints and resizing properties
2. Use variables from the Mode collection for colors
3. Apply spacing, sizing, and radius variables from the Tailwind CSS collection
4. Add text elements using existing text styles
5. Create component variants for different states (default, hover, pressed, etc.)
6. Organize properties in the Figma properties panel
7. Document component usage and variants