Application and e-commerce blocks, Controls and theme import in DS Manager

ProBlocks in DS Manager now go past landing pages. This update adds 132 application and e-commerce blocks, so there are 337 in total, all styled by your shadcn design system. It also adds a Controls page that gives every button, input and select one height per size, a full type scale on the Typography page, an import that turns a pasted globals.css into a new system, and more control over what a share link shows.

Everything below is live at manager.shadcndesign.com.

Application and e-commerce ProBlocks

The ProBlocks group in the left sidebar now has three folders: Landing page, Application and E-commerce.

• Application has 83 blocks in 14 categories: App Shells, Buttons, Cards, Description Lists, Empty Sections, Navbars, Page Headers, Section Footers, Section Headers, Sections, Settings, Sign-in, Sign-up and Table Headers.
• E-commerce has 49 blocks in 10 categories: Checkouts, Incentives, Order Summary, Product Category, Product Headers, Product List Filters, Product List, Sale, Shopping Carts and Store Navbars.

They work like the landing blocks. Preview them at Desktop, Tablet and Mobile widths, Cmd-click a part to restyle one block, ask the agent to change them, and install any of them with npx shadcn@latest add @your-system/<block>. App shells, sign-in pages and open carts are full-screen designs, so the canvas draws them in a screen-height frame, and their sheets and dialogs open inside the block.

Brand > ProBlocks has matching Landing page, Application and E-commerce tabs. The E-commerce tab shows a product page built from the new blocks, and the Application tab shows a sample dashboard, so you can tune the shared styles like Heading MD or Paragraph against the kind of page you're building.

Free accounts get the first block of each category, which is now 48 blocks. Pro gets all 337. If you published your registry before this update, publish once more so the new blocks install from it.

Controls: one height for every button, input and select

In shadcn/ui, each control carries its own height class. Change the height of Button and you still have to change Input, Select and the rest one by one, or they stop lining up. The new Controls page, between Spacing and Icons, sets them all in one place.

• Heights sets one height for each size: xs, sm, default and lg.
• Follow these heights lists the 8 controls that use them: Button, Input, Input Group, Combobox, Select, Native Select, Toggle and Toggle Group. A control you've set by hand shows as custom, for example "Custom · 36px".
• Focus sets the focus style for all of them: Shape (Ring or Outline), Width, Offset and Strength.

The canvas draws every control at every size on dashed guides, so anything out of line is easy to spot.

On a control's own page, the Height field shows the Controls value as a badge. Click it to detach that control and give it its own height. The dot next to the field attaches it again.

A type scale on the Typography page

The Typography page has two new panels:

• Sizes lists all 13 text-* steps, from text-xs to text-9xl. Each has its own size and line height.
• Weights maps the 9 font-* names, like font-medium and font-bold, to the number they use.

Click a unit to switch every size between px and rem. Line heights also take a ratio. An edited row gets the dot, and clicking the dot puts Tailwind's value back. The agent can set the type scale too.

Import a shadcn theme from your globals.css

If your project already has a shadcn theme, you can now start a system from it. Click New system, pick the CSS tab and paste your project's globals.css. DS Manager reads the theme and shows a review before anything is created.

The review lists each value as New, Changed or Unchanged, with a Before and After preview in light and dark. The Apply button names how many changes it makes, for example Apply 59 changes, and Discard drops the import. A review you haven't decided on waits in Pending reviews at the top of the left sidebar.

Import works on every account, Free included, once you're logged in.

Share links: choose what people see and the theme

The Share popover has two new sections.

• Users can see has checkboxes for Default Components, Custom Components and ProBlocks. Untick a group to hide it from the shared link's sidebar and ⌘K. While Users can fork is on, all three stay ticked, because a fork copies the whole system.
• Display theme opens the link in Light, Dark or System. System follows each visitor's device setting and is the default for every link, including the ones you already shared.

Custom components now show in share links as well.

Smaller improvements

• Two tabs, one system. Edits from two open tabs are merged on the server, so one tab no longer overwrites the other.
• Layers follow your click. Cmd-click or Ctrl-click on the canvas now scrolls Component Layers to that part and opens its folded groups.
• New canvas colors. The canvas background is #EDEDED in light mode and #262626 in dark, so white and gray blocks read as separate cards.
• Changelog in the app. The account menu has a Changelog link under Help. It opens the DS Manager updates on this blog.
• Clearer plans. Plans now lists ProBlocks for each plan. If someone installs a Pro block from a Free account's registry, the CLI says how to unlock it instead of failing.

Changelog

Added

• 132 application and e-commerce ProBlocks in 24 new categories. 337 blocks in total, 48 of them free.
• Landing page, Application and E-commerce folders in the sidebar and tabs on Brand > ProBlocks, with a product page and a dashboard sample.
• Controls page: Heights, Follow these heights and Focus.
• Height badge with detach on the 8 control pages.
• Sizes and Weights on the Typography page.
• CSS tab in New system, with a review page and Pending reviews.
• Users can see and Display theme in the Share popover.
• Changelog link in the account menu.

Improved

• Custom components show in share links.
• Edits from two tabs are merged instead of the last save winning.
• Cmd-click scrolls Component Layers to the selected part.
• New canvas background colors.
• Plans lists ProBlocks per plan, and the CLI explains a locked Pro block.
• A refused GitHub log-in shows a toast with the reason instead of reloading the page.
• You can sign up with GitHub when any of your GitHub emails is verified, not only the primary one.
• Too many Buy clicks in a row show a toast instead of an error page.

Fixed

• Footer blocks build in a fresh create-next-app project.
• Installing into a Next.js project made with --src-dir no longer breaks its build.
• Combobox chips fit the control height.
• Picking Shadow None in the block editor no longer shows "not set".
• Custom components load on the live site again.
• Shared links with an icon library other than Lucide load without errors.

Free, Pro and Lifetime

The Controls page, the type scale, theme import and the share options come with every account, Free included. Pro adds custom components and all 337 ProBlocks.

Pro is $19 a month or $180 a year. Lifetime is $249 once. Compare the plans on the DS Manager page.

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

Open DS Manager