# Components
> The shadcn/ui Figma kit provides a comprehensive set of components that mirror the official shadcn/ui framework. This section covers how to work with these components effectively, from basic editing to creating new variants and preparing for developer handoff.
Canonical: https://www.shadcndesign.com/docs/components
{/* TODO: verify for 2026 kit */}
## 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.
Controls **hug their content with a bound minimum height** rather than a fixed
height — so switching styles never leaves a stale size behind. When you place
or resize a control instance, set its width with Auto Layout (Fill or Hug) and
let the height follow its content. Avoid manually resizing a control's height;
if one ever looks wrong, set its vertical resizing back to Hug to clear the
override.
Repeating regions (menu items, list rows, card bodies) ship as **empty slots**
— add your own content into them. Many components also expose **text and
boolean properties** (for example "Show icon" or a title text field) in the
Figma properties panel, so you can configure a component without detaching it.
Reach for these props before overriding layers by hand.
### 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](https://www.figma.com/community/plugin/1116018586739867857/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](/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.