# More Style tab controls, icon styles and a gradient picker in DS Manager
> DS Manager adds margin, text, border, blur and transform controls to the Style tab, styles for the icons inside components, one colour picker with a gradient editor, and distance measuring on the canvas.
Published: 2026-10-29 · Author: Matt Wierzbicki · Canonical: https://www.shadcndesign.com/blog/shadcn-style-tab-icon-styles-gradients
The Style tab in [DS Manager](/ds-manager) now covers most of what you used to type in the Utilities tab: margin, text alignment, line clamping, border style, backdrop blur, rotate and scale. You can also pick the icons inside a component and style them, and every colour field opens one picker for tokens, colours and gradients. On top of that, you can measure distances on the canvas with Option, give each custom icon its own stroke width, and edit or delete the comments your agent wrote.
Everything below is live at [manager.shadcndesign.com](https://manager.shadcndesign.com).
## More controls in the Style tab
⌘-click a part of a component on the canvas, and the Style tab has these new rows:
- **Layout**: **Min size** under Max size, and **Margin** after Padding. Margin takes `auto` and negative steps, such as `-mx-1`.
- **Typography**: **Text align** next to a **Text transform** menu. The button at the end of that row opens **Type options**: **Wrap**, **Max lines**, **Decoration**, **Offset**, **Thickness** and **Decoration color**. Max lines 1 writes `truncate`, and 2 to 6 write `line-clamp-*`.
- **Appearance**: **Border style** beside Border width.
- **Effects**: **Backdrop blur**, plus **Ring offset color** and **Ring offset width**.
- **Transform**, a new section: **Move**, **Rotate** and **Scale**.
Like the rest of the tab, each row works per variant, size and state, and per breakpoint on ProBlocks.
Size, Line height and Radius now show the pixel value next to the step, such as "sm 14px" or "lg 10px". The number comes from your own type scale and radius, so it changes when you edit them.
Some kit components set their spacing through a variable, like Card's `--card-spacing` and Calendar's `--cell-size`. Fields that read one now show it as a badge. Click the badge to change the variable, and every field that reads it follows. **Detach** gives one field a value of its own.
The tab also shows values it used to miss. A field no longer says "not set" while a class sets its property, and at a state, in dark mode or at a breakpoint it shows the value the canvas paints. An edit made with a variant, size or state picked now stays on that value, so a new radius on the outline Button changes only outline buttons.
## Style the icons inside components
⌘-click an icon inside a component, such as the icon in an Alert or a Button, or pick it under its component in **Component Layers**. The Style tab then shows an **Icon** section with **Size**, **Color**, **Stroke**, **Opacity** and **Offset**. On Phosphor, Stroke is replaced by Weight, which the Icons page sets for the whole system. Each row works per variant, size, state and dark mode, and an edit reaches only the icons of that component.
The **Icons** page has a new **Overrides** panel listing every icon style set on one component, such as "Alert icon · Size 20px". Click a row to open that component on the icon, or its dot to reset the value. The Icon section replaces the **Icon size** row that component pages had in Layout.
## One colour picker for tokens, colours and gradients
Every colour field in the Style tab opens the same picker, and it opens on what the field holds: the token, your custom colour, or the gradient. On fields that take an image, such as Background, **Custom** has **Solid color** and **Gradient**. The gradient editor makes **Linear**, **Radial** and **Conic** gradients. Set the angle, drag the stops along the bar, add a stop or flip them. Each stop takes a token or a colour, and a token stop stays a token when you give it an opacity.
When you switch a field with a background colour to Gradient, DS Manager writes `bg-transparent` under it, so the colour doesn't cover the fade. Switching back to Solid color brings back the first stop's colour. The Tokens tab also has a **Keywords** group with `transparent` and `current`.
Installed components paint gradients the way the canvas does. They write a gradient token as `bg-(image:--background-image-)`, so the background colour under it stays, and `globals.css` declares the gradient again in `.dark` with its dark stops.
## Measure with Option
Select a part on a component, custom component or ProBlocks canvas, then hold **⌥** (**Alt** on Windows) and point at another part. Red lines show the distances between them in pixels. Over the parent you see the four distances to its edges, and holding ⌥ over the selected part itself hatches its padding and the gaps between its children. A badge under the selection shows its width and height. The values are in design pixels at any zoom.
## Custom icons: stroke width, animation and the Spinner
Select a custom line icon on the **Icons** page, and the new **Stroke** slider gives it its own width from 1 to 2.5. The icon keeps that width on the canvas and in the installed `components/icons.tsx`, whatever stroke the icon library uses.
SVGs that animate with `` or `` now keep their animation on the canvas and in the export. When DS Manager cleans something out of an uploaded file, a toast lists what it removed from each file.
The **Spinner** page has a new **Icon** row, so the Spinner can draw one of your custom icons. An icon that animates itself plays as drawn, and a static one spins like the kit spinner. Agents can set an icon's stroke and the Spinner's icon over MCP with `set_icons`.
## Edit and delete your agent's comments
A comment your agent writes for you, in the Agent tab or over MCP, now counts as yours. Open **Comment actions** on it to **Edit** or **Delete** it, and you can delete a thread your agent started. It works the other way too: `write_comment` can now edit and delete comments, so you can ask your agent to fix a reply or clear one of yours.
## Smaller improvements
- **The State row follows your pick.** ⌘-click a checked switch, an open trigger or a disabled field, and the State row moves to Selected, Open or Disabled. When you then change Variant or Size, the state you chose stays.
- **Add size in the Size row.** On Input, Textarea, Badge and Kbd, the Size row is an **Add size** button until the first size exists. Other components add a size with **Add new…** in the Size menu.
- **Edits that wait for the server.** An edit that fails to save is kept and sent again until it lands, also after you switch systems. When the server is busy, DS Manager retries on its own and closes the warning once the edit is saved.
- **Undo takes back only your step.** A later edit to the same rule from another tab or an agent stays.
- **Refusals with a reason.** A class the canvas can't draw is refused before it is saved, and the reason shows under the field.
- **Agent edits land where the agent says.** When the agent edits a state, it changes that state's class, and it refuses classes that would paint nothing, like `bg-primary-500`.
## Changelog
**Added**
- Min size, Margin, Text align, Type options, Border style, Backdrop blur and a Transform section (Move, Rotate, Scale) in the Style tab.
- Ring offset color and Ring offset width, and Text color and Border rows for `::before` and `::after` parts.
- Pixel values next to Size, Line height and Radius.
- Badges for component variables such as `--card-spacing`, with **Detach**.
- An **Icon** section for icons inside components, and the **Overrides** panel on the Icons page.
- A gradient editor with Linear, Radial and Conic in the colour picker, and a Keywords group.
- Distance measuring with ⌥.
- A stroke width for each custom line icon.
- Animated custom icons, and a custom icon for the Spinner on Pro.
- Edit and delete for comments by you or your agents, and `edit` and `delete` in `write_comment`.
**Improved**
- The State row follows the element you ⌘-click and stays when Variant or Size changes.
- **Add size** is the Size row on Input, Textarea, Badge and Kbd.
- Failed saves are kept and sent again, and saves the server was too busy for retry on their own.
- Undo takes back only your own step.
- Classes the canvas can't draw are refused with a reason.
- Agent rule edits change the class they name.
- Lint's **Try a change** gives the same verdict as `npm run lint`.
- The canvas loads every weight a Google font has.
**Fixed**
- A Style edit stays on the variant, size or state it was made on.
- Fields at a state, in dark mode or at a breakpoint show the value that paints, and a Tablet edit on a block no longer changes Desktop.
- The Style tab reads added classes the way the canvas paints them, like `p-3` on Card.
- Get code no longer says "changed since" right after a publish.
- Wide demo examples fit inside their cards on laptop screens.
- Installed components keep the line heights, side borders and gradient background colours that `cn()` used to drop.
- A pinned radius step shows on the canvas, and letter spacing and the spacing base keep the unit you type.
- A colour that a component still uses can't be deleted, and custom token names like `sm` or `center` are refused.
## Free and Pro
The new Style tab controls, icon styles, the colour picker, measuring and the fixes come with every account, Free included. Pro adds custom icons with their own stroke and animation, a custom Spinner icon, custom components and all ProBlocks. Free accounts can try the MCP server with 50 edits and 500 reads.
Pro is $19 a month or $180 a year, and Lifetime accounts get everything in Pro. Compare the plans on the [DS Manager page](/ds-manager#pricing).
Try the new controls on your own system and tell me what you'd like next at [hi@shadcndesign.com](mailto:hi@shadcndesign.com).