Blog

Canvas comments, hidden variants, new sizes and custom icons in DS Manager

DS Manager adds comments pinned to the canvas, a way to hide kit variants and sizes, an Add size dialog, custom SVG icons, canvas zoom and color, and dark-mode logos.

update··9 min read
Canvas comments, hidden variants, new sizes and custom icons in DS Manager

You can now leave comments right on the DS Manager canvas, and so can the people you share a system with. Your agent can read those threads, make the changes and resolve them. This update also lets you hide kit variants and sizes you don't use, adds a dialog for new sizes, and lets Pro accounts upload their own SVG icons. On top of that there's canvas zoom and color, logos that work in dark mode, and a simpler agent setup in Settings.

Everything below is live at manager.shadcndesign.com.

Comments on the canvas

Press C, or click Comments in the top bar, then click anything on the canvas: a button variant, a color swatch, a type slot, a ProBlocks block or a page section. A pin drops there and a comment box opens. The pin stays attached to that element when you edit, zoom or resize the canvas.

In a thread you can reply, edit or delete your own comments, and click Resolve when it's done. The Comments panel lists every thread grouped by page, with the current page first. Filter it to Open, Resolved or All, or to Only this page. Each row also has a ⋮ menu, so you can resolve, reopen or delete a thread without opening it.

New replies show as a blue dot on the Comments button, and the sidebar shows how many open threads each page has.

Comments also work on share links. People signed in to DS Manager can comment on a shared system while Signed-in users can comment is ticked in the Share popover. The box is on by default, also for links you shared before this update, so untick it if you'd like a link to stay view-only.

On Pro, type @agent in a comment or click Ask agent in a thread. The Agent tab opens with the comment attached. Press send, and the agent makes the change, replies in the thread and resolves it. Agents connected over MCP get the same comments, so you can ask Claude Code or Cursor to go through the open comments on your system.

Hide variants and add sizes

shadcn/ui components ship with variants and sizes your system may not need. Under the Variant and Size menus, Manage variants now lists every built-in value, so you can hide the ones you don't want.

When you hide a value, you pick what replaces it in Use instead. Hide Button's outline with secondary instead, and every outline button in the kit, ProBlocks, your custom components and your installed code looks like secondary. Code that still passes variant="outline" keeps working. The default value can't be hidden. A short line under the menus, like "1 variant hidden", opens the dialog again.

Adding a size no longer means typing utilities. Click Add size under the menus, or Add new… in the Size menu:

  • Controls sizes adds sm and lg to Button, Toggle and Input at the heights from the Controls page, and they keep following it.
  • Or add one size: name it, pick the size to Start from and a Scale from 0.75× to 2×. The dialog shows the height, padding, text size and icon size it will write, and you can untick any of them.

When you add the size, the canvas scrolls to it and selects it. Input, Textarea, Badge and Kbd can take sizes now too, and the installed files get a real size prop.

Your own SVG icons

Pro accounts can add their own icons next to the icon library. On the Icons page, drop SVG files on Custom icons. DS Manager redraws each file on the 24px grid in currentColor, with your library's stroke, so it sits well next to Lucide, Tabler, Hugeicons, Phosphor or Remix Icon icons.

Select an icon to rename it or remove it. Installing the system writes your icons to components/icons.tsx in the library's own format. A system holds up to 500 custom icons. Agents can add, rename and remove them over MCP too.

Canvas zoom and canvas color

Every canvas now zooms like a Figma frame, from 25% to 400%. Pinch or hold ⌘ and scroll to zoom toward the pointer, and drag with Space held down to pan. The % button in the page header opens the Zoom menu: Zoom to fit is ⇧1 and Zoom to 100% is ⇧0.

Next to it, the Canvas color swatch sets the background the canvas is drawn on, separately for light and dark mode. The color is saved with your system, and labels on the canvas switch to light text on a dark color.

The Button page in DS Manager zoomed to 150%, with the Zoom menu open
The Zoom menu in the page header
The Card page in DS Manager with the Light canvas picker open and a pale blue canvas
Canvas color, set for light mode

Logos in dark mode

On the Brand page, Logo and Mark now take two files: File (light) and File (dark). If you only upload a light logo, Dark fallback decides what dark mode shows. A one-color logo is drawn in the text color by default, so a black logo turns white.

The new Height setting sizes the logo in every ProBlocks block and in the installed logo.tsx. Uploaded SVGs that had no size of their own now sit at the right height in navbars and sign-in pages instead of filling the row.

The Brand page in dark mode with File (light), File (dark), Dark fallback and Height for the logo
Dark fallback set to Text draws a black logo in white

Set up your agent in one list

Settings > MCP now has one list of agents: Claude Code, Cursor, VS Code, Codex, Claude.ai and Claude desktop. Open a row to see its setup. Cursor and VS Code install with one click through Add to Cursor and Add to VS Code. Once an agent is connected, its row says Connected with the time of its last call, and Revoke disconnects it.

Settings, MCP in DS Manager with the list of six agents, Claude Code connected and the Add to Cursor button
Every agent's setup and status in one list

Groups and archive for custom components

Custom components can now go into groups. Open a component's ⋮ menu on the right rail and pick Move to group, then a group or New group…. The sidebar shows your groups as folders above the ungrouped components.

Archive takes a component out of publish, install and share links without deleting it. Archived components wait in an Archived folder at the bottom of the list, and Restore brings one back.

The DS Manager sidebar with a Dashboard group, ungrouped custom components, the Archived folder and the Move to group menu
Groups, the Archived folder and Move to group

Trace and Code Block join the kit

shadcn/ui's new Trace and Code Block components are in the kit. You can style them, lock them and install them like any other component, and Code Block brings its shiki dependency along.

Sonner is gone from the kit, and Toast now handles toasts. The demos that used Sonner show a Toast instead. Your next publish no longer includes sonner, while versions you published before still serve it. The kit now has 62 components.

The Code Block page in DS Manager in Matrix view
Code Block in Matrix view

Smaller improvements

  • Agent steps you can open. In the Agent tab, each step the agent takes is a line you can open to see what it changed, like a token diff with swatches or a picture of the canvas. When the agent is done, the steps fold into one line, such as "Worked for 18s · 6 steps".
  • Ask the agent about DS Manager. The in-app agent now answers questions like "If I publish, is it public?" or "How do I add a dark logo?" and points you to the right place.
  • Uploaded fonts for agents. Agents can set a font you uploaded to the system, not only Google fonts.
  • Hard-to-see variants. A variant that would be invisible on its cell, like white text with no fill, is drawn on a dark box labeled "on dark", or a light box labeled "on light".
  • Forms work in the preview. Form demos submit inside the canvas, so you see their toast and validation errors.
  • Utility suggestions open under the field instead of stretching the row of chips.

Changelog

Added

  • Canvas comments with pins, threads, the Comments panel, read and unread, and a ⋮ menu on each thread.
  • Comments on share links for signed-in users, with Signed-in users can comment in the Share popover.
  • @agent and Ask agent on Pro, and read_comments and write_comment for MCP agents.
  • Hide a kit variant or size with Use instead in Manage variants.
  • Add size dialog with Controls sizes and a scale, and sizes for Input, Textarea, Badge and Kbd.
  • Custom SVG icons on Pro, and set_icons for MCP agents.
  • Canvas zoom from 25% to 400% and the Zoom menu.
  • Canvas color for light and dark, saved per system.
  • File (dark), Dark fallback and Height for Logo and Mark.
  • VS Code in Settings > MCP, and one-click Add to Cursor and Add to VS Code.
  • Groups and archive for custom components.
  • Trace and Code Block components.

Improved

  • Settings > MCP shows each agent's setup and connection in one row.
  • Agent steps show what they changed and fold when the turn ends.
  • The in-app agent answers questions about DS Manager.
  • Agents can set uploaded fonts.
  • Invisible variants are drawn on a contrasting box.
  • Form demos submit in the preview.
  • Toast replaces Sonner.

Fixed

  • Changing Icon size on one Button size no longer changes the others.
  • The avatar group's "+N" count follows the avatar's size.
  • Radius edits reach the outer corners of Button Group, Input Group and Toggle Group.
  • Card shadows are no longer cut off on Overview and Style.
  • A zoomed ProBlocks block fills the canvas with no gray strips at the sides.
  • Uploaded logos sit at the right height in navbars and sign-in blocks.
  • The agent's canvas screenshots no longer time out.
  • When an agent adds a class, it replaces the class it overrides, and one undo brings the old one back.
  • A plan bought under another email can be attached to an account with a kit purchase.

Free and Pro

Comments, hidden variants, Add size, canvas zoom and color, dark-mode logos and the new components come with every account, Free included. Pro adds @agent and Ask agent, custom icons, custom components and their groups, and all 337 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 comments on your own system and tell me what you'd like next at hi@shadcndesign.com.

Open DS Manager
MW
Matt Wierzbicki

Founder @ shadcndesign.com

Level-up your workflow today

One-time payment
14 days refund policy