Editing 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.

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.

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.

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."