More Style tab controls, icon styles and a gradient picker in DS Manager

The Style tab in 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.

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-<name>), 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 <animate> or <animateTransform> 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.

Try the new controls on your own system and tell me what you'd like next at hi@shadcndesign.com.

Open DS Manager