ProBlocks, Lint and custom components in DS Manager

Your shadcn design system in DS Manager now reaches past the 61 components. This update adds 205 page blocks styled by your tokens, Lint rules and locks that agents have to follow, and custom components the agent builds for you. The canvas also got about three times faster.

Everything below is live at manager.shadcndesign.com.

ProBlocks: shadcn ui blocks styled by your design system

The left sidebar has a new ProBlocks group below Default Components. It holds 205 page blocks in 24 categories, from Hero to Footers. They are the landing page blocks from our Pro Blocks library, and here they use your colors, fonts, radius, icon library and brand logo.

• Preview at real widths. Switch a category between Desktop, Tablet and Mobile: 1280, 768 and 390 px, scaled to fit.
• Restyle one block. Cmd-click or Ctrl-click any part of a block and edit it in the same Style panel you use for components. Only that block changes. Desktop edits carry down to Tablet and Mobile unless you set a value there.
• Restyle every block at once. Brand > ProBlocks edits the 11 shared classes every block uses, like Heading XL, Tagline and Paragraph, over a sample landing page.
• Ask the agent. It can restyle one block or the shared styles.
• Install with one command. Hover a block's label and click Copy command to get npx shadcn@latest add @your-system/hero-section-1. Get code has a new Blocks tab with the registry setup.

Free accounts get the first block of each category, 24 in total. Pro gets all 205. If you published your registry before this update, publish once more so blocks install from it.

More blocks are on the way. App and ecommerce categories come next.

Lint: rules and locks your agents must obey

Lint is where you write down what agents may and may not change in your system. Open Brand > Lint to find its two views.

Rules lists six checks: Restyling, Raw colors, Made-up sizes, Inline styles, Typos and Dynamic classes. Set each to Off, Warn or Block, or pick a Strictness preset: Relaxed, Balanced or Strict. The canvas shows a before and after for each rule that is on, like text-rose-500 caught and text-destructive wanted.

Locks is one table of components and their parts against seven kinds of change: Layout, Color, Type, Spacing, Shape, Effects and Motion. Click a cell to flip its lock. The Every component row sets the default.

On a component page, open the Lint tab or press 4. You see what agents can and can't change on each part. Hover a chip to preview that change. Try a change runs a sample edit, like Red text or More padding, and shows the exact answer an agent would get.

The DS Manager agent follows your locks. On Block it refuses with a reason, like "Locked. Agents can't change Color on Button." On Warn it makes the edit and adds a warning.

Your rules and locks ship with your published system in design-system.lint.json. The Lint tab in Get code sets them up with ESLint or Oxlint, so Claude Code, Cursor and other agents in your project hit the same rules.

Lint is on for every DS Manager account, Free and Pro. It covers the default components for now.

Custom components for your shadcn design system (Pro)

When shadcn/ui doesn't ship the component you need, such as a color picker or a product tour, the agent can build it for you.

• Build it. Click Start prompting in the Custom components group, or the + next to it, and describe the component in the Agent tab. The agent writes real React and TypeScript, checks it, and names the main choices it made.
• Use it like a built-in. It lands under Custom components with the same page a built-in has: demo, variant Matrix, Style and Utilities tabs, layer tree. Restyle it, rename it in the Name field, or use the three-dots menu: Reset changes, Change with the agent, Delete component.
• Recover from a failed build. A component that fails its checks four times is saved as a draft with a Fix with the agent button. Drafts stay out of your registry until they pass.
• Install it. Published custom components install with the shadcn CLI, like the built-ins.

You can keep up to 50 per system. They are not shown in share links yet.

Smaller improvements

• Faster canvas. An edit now reaches the canvas in about 103 ms instead of about 345 ms. It paints a best guess before the server answers and recompiles only the component you touched.
• First-load screen. If loading takes over 300 ms, you see a progress bar and a tip. Reloads paint the canvas from your last visit right away.
• Max W and Max H. A new Max size row in the Style tab, for components and block parts.
• Layout panel. New Flow menu (Flex, Grid, Hidden and more), Alignment pad, Distribution, Grid columns, Grid rows and Gap.
• Agent. A message can run for up to 30 minutes. While it works, the chat says "Thinking. Don't close this browser tab", and a blue dot on the Agent tab marks a finished reply.

Changelog

Added

• ProBlocks: 205 blocks in 24 categories, with Desktop, Tablet and Mobile preview.
• Brand > ProBlocks page for the shared block styles.
• Copy command on every block, a Blocks tab in Get code, and ProBlocks in ⌘K.
• Lint for every account: Rules, Strictness presets and Locks.
• Lint tab on component pages, with Try a change.
• The agent follows your locks.
• Custom components (Pro), listed in the Components index and ⌘K.
• Max W and Max H in the Style tab.
• Flow, Alignment, Distribution, Grid and Gap in the Layout panel.
• First-load screen with progress and tips.
• Help link in the account menu.

Improved

• Edits reach the canvas in about 103 ms, down from about 345 ms.
• Dragging a value repaints the canvas the whole time.
• Edits also compile in Frankfurt, closer to users in Europe.
• Pages load about 1 MB less JavaScript.
• Keys 1 to 4 switch the inspector tabs, even from inside the canvas.
• Agent messages can run for up to 30 minutes.
• The chat follows new text, with a Scroll to end button.
• Undo on a Changes card is offered for the latest changes only.
• Fix with the agent always starts a new chat.
• The Default Components group can be collapsed.
• Ring color and Ring width share one row.
• Uploaded fonts, font URLs and Typekit stylesheets load on the canvas.
• Unsaved edits are sent when you close or reload the tab.
• A failed systems load shows Retry.

Fixed

• A system deleted in one tab no longer comes back from another tab.
• Opening a Dialog, Sheet or Popover on the canvas no longer selects its overlay.
• Stopping the agent never leaves a chat stuck.
• Hover, focus and dark mode styles keep working after an edit.
• The canvas matches the installed code when one component uses another, like Field and Label.
• Your edits win over size and variant classes in the export.
• Undo in a focused Layout field undoes the design change.
• Components with Phosphor icons no longer break next build.
• Code text gets the mono font after install.
• Focus rings are no longer cut off in dialogs.

Free, Pro and Lifetime

Lint, the Layout controls and the faster canvas come with every account, Free included. Two things need Pro: custom components, and ProBlocks beyond the 24 free blocks.

Pro is $19 a month or $180 a year. Lifetime is $249 once, and that offer ends soon. Compare the plans on the DS Manager page.

Try the blocks on your own system and tell me what's missing at hi@shadcndesign.com.

Open DS Manager