# Editing components

> Edit shadcn/ui components in DS Manager. Select a part on the canvas, change its layout, typography and colors, add Tailwind utilities and reset a rule.

Canonical: https://www.shadcndesign.com/docs/ds-manager-components

Every shadcn/ui component in your system has its own page in DS Manager. You pick a part of the component on the canvas, change it in the right rail and see the result on every specimen at once.

<RichImage
  src="/docs/ds-manager/component-editor.webp"
  alt="The Button page in DS Manager: the variant matrix on the canvas with one button ringed, and the Style tab on the right showing the Variant, Size and State menus above the Layout section"
  width="899"
  height="621"
  quality="90"
/>

## Components table

**All components** at the top of the **Default Components** group in the left nav opens a table of every component in the system. Each row has the name, an **Edited** marker if your system has changed it, and an **Open** link.

- **All**, **Edited**, **With variants** and **Custom** filter the table.
- **Search components** matches names and shadcn/ui's one-line description, so "one-time password" finds Input OTP.

You can also skip the table and pick a component straight from the left nav, or press ⌘K and type its name.

## Component page

The canvas has two views, switched with **Demo** and **Matrix** in the top bar:

- **Demo** is the designed composition, the way shadcn/ui's create flow shows the component.
- **Matrix** shows every value of every axis, generated from the component's variants and sizes. A component without a demo opens on the matrix, and Demo is greyed out.

DS Manager remembers the view you picked as you move between components. Under the page title, a line counts the component's rules and how many of them are yours (for example "6 rules, 2 yours").

### Overlays in the matrix

Thirteen components only appear after an interaction: tooltip, popover, hover card, dropdown menu, context menu, menubar, select, combobox, navigation menu, dialog, alert dialog, sheet and drawer. In the matrix they render open, inside their cell, so you can select the panel or menu and edit it. Their close buttons stay visible but do nothing there. To try the real open and close behavior, switch to **Demo**.

## Selecting a part

The Style tab edits one part of the component at a time. There are three ways to pick it:

1. **⌘-click** (Ctrl-click on Windows) any element on the canvas. A plain click works the component as usual: it presses the button or opens the menu.
2. In the matrix, a plain click on a cell selects that specimen and sets the Variant and Size menus to match it.
3. Pick a row in **Component Layers**, the tree pinned under the left nav. It lists each part once, even when the matrix draws forty buttons, and reaches parts that are off screen or inside a closed menu. Drag its top edge to make it taller.

The selected part gets a ring on the canvas, and its name becomes the title of the right rail. A dot at the end of a layer row means your system has changed that part.

## Style tab

The top of the Style tab says which specimen you are editing: a **Variant** menu, a **Size** menu and a **State** menu, depending on what the component has. The controls below show what that specimen renders, base plus variant plus size. Each edit goes to the rule that sets the property today: radius to the component's base rule, background to the variant, height to the size. You can learn more about the menus in [Variants and states](/docs/ds-manager-variants).

Below the menus, the controls are grouped in sections.

### Layout

- **Flow**: Inline, Flex V, Flex H, Grid, Hidden and the other display options.
- **Size**: width and height.
- **Max size**: **Max width** and **Max height**, in Tailwind steps or as words such as `prose`, `7xl`, `none` and `screen`. It sits under Size and disappears with it when Flow is Inline or Hidden.
- **Grid**: columns and rows, for a grid.
- **Alignment** and **Gap**, for flex and grid.
- **Padding**, with all sides or each side.
- **Icon size**, on components that hold icons, such as buttons and triggers.

The Style tab has no margin control. Add margin classes such as `mt-2` in the Utilities tab.

### Typography

**Text color**, **Size**, **Font family**, **Weight**, **Line height**, **Tracking** and **Text transform**. The pickers list your system's variables first, and raw values still work.

### Appearance

**Opacity**, **Radius** (with a toggle for each corner), **Background**, **Border color** and **Border width**.

### Effects

**Shadow**, **Ring color** and **Ring width**.

Under the sections, a line counts the rules an edit can land on. **See Utilities** opens the Utilities tab on the most specific of them.

<Callout type="info">
  When the canvas is dark, a **Dark** tag appears in the rail and edits write
  `dark:` values. Press **D** or use the sun in the top bar to go back to the
  light values.
</Callout>

## Resetting a change

A property you changed shows a dot next to its label. Click the dot to put that property back to the style's default (the tooltip says, for example, "Reset radius to the style default").

To undo a whole rule, open **Reset a rule** (the circular arrow in the rail's title row). It lists every rule in play with its edit count, such as "Reset Variant: outline, 2 edits". ⌘Z undoes any single edit, and ⇧⌘Z redoes it.

## Utilities tab

The Utilities tab (key **3**) lists every Tailwind class on the component, rule by rule, grouped by state. The Style tab's controls are a view of these classes.

- Chips you added or changed have a darker fill. Classes the component's code puts on the element are dashed. Editing one of those writes an override into the rule, and the original shows struck through.
- Click a chip to edit it. Enter commits, Escape cancels.
- **Search utilities** matches class text and plain words like color, radius or padding. The filter next to it narrows the list to **All**, **Yours** or one state, each with a count.

### Adding a utility

1. Click **+ Add** at the end of a group. In a state group, the field already shows the prefix, such as `hover:`.
2. Type the class. Suggestions come from your style's own classes.
3. Press Enter. The field stays open for the next class. Click **Done** or press Escape on an empty field to stop.

The field refuses a class with spaces, braces or semicolons ("A utility cannot contain spaces, braces or semicolons.") and one the rule already has ("That utility is already on this rule. Edit its chip instead."). If a class passes those checks but is not a real Tailwind class, the chip turns red and its tooltip says so, for example "bg-brnad is not a Tailwind class, so the canvas leaves it out."