Components

Editing components

The shadcn/ui components are styled with Tailwind CSS classes. In our Figma kit, components are built from variables in the Tailwind collection (spacing, radius, widths) and per-component component/* values from the Style collection — including their colors, which resolve through the Mode collection's semantic tokens to the active style's palette. This lets you make consistent, systematic changes across your design system.

Example: editing the Badge component

Suppose we want the Badge component to use different padding and border radius.

Figma

1. Go to the Badge page in the main library.
2. Find the Badge / Text component in the Components section.
3. Select the Badge frame inside. Note: you may need to select the Badge frame in the Focus state due to a different component construction.
4. Change the horizontal padding to a different spacing/* variable (for example from spacing/2 = 8px to spacing/3 = 12px). Control paddings are often bound to per-style component/* values from the Style collection — in that case edit the component/badge/* value there instead, which updates the padding for that style everywhere.
5. Change the border radius from rounded/md (6px) to rounded/full.
6. Leave a comment for the developer describing your changes. For example:

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

Implementation in code

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 and preview your changes.

This mapping between Figma variables and Tailwind classes creates a seamless workflow from design to implementation.

Adding new component variants

Creating new variants extends the shadcn/ui system while keeping consistency with the existing design language. This example adds a "Warning" variant to the Button component in both Figma and code.

Example: a warning button variant

1. The kit ships custom/warning-foreground, custom/warning-background, and custom/warning-border in the Mode collection (amber — shadcn/ui has no built-in warning token), so warning tokens are already available.
2. Go to the Button page in the main library.
3. Expand the Components section and the Button frame for room to work.
4. Select and duplicate (Cmd + D) the Destructive button variants.
5. In the Button properties panel, rename the new variants to Warning.
6. Change the color variables from destructive to the warning tokens (custom/warning-background, custom/warning-foreground).
7. Select the Button component frame.
8. Run the Propstar plugin to tidy the component table.
9. Leave a comment for the developer:

@DeveloperName I added a new button variant:
- Variant: Warning
- Uses the warning background and foreground color variables

Implementation in code

1. Add the warning variables to your globals.css. You can do this with the Figma to shadcn/ui plugin.
2. Open ui/button.tsx.
3. Locate the variant definitions.
4. Add the warning variant:

...
{
    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 stay consistent with shadcn/ui:

1. Start with a Frame set to the appropriate constraints and Auto Layout resizing.
2. Use Mode collection tokens (including custom/*) for colors, so the component tracks light/dark and the active style. If a color should differ per style, add a component/{name}/* variable in the Style collection that aliases a Mode token and bind that instead — the same pattern the kit's own components use.
3. Apply spacing, width, and radius variables from the Tailwind collection, and per-style structure values from the Style collection where sizing differs by style.
4. For controls, bind a minimum height and let the component hug — don't bake in a fixed height.
5. Add text using the existing text styles.
6. Create variants for different states (default, hover, pressed, focus, disabled).
7. Expose text and boolean properties in the Figma properties panel, and leave repeating regions as empty slots.
8. Document the component's usage and variants.