ProBlocks
Browse 205 ProBlocks page sections in DS Manager, styled with your shadcn/ui design system, and install them from your published shadcn registry.
ProBlocks are ready page sections from Pro Blocks on shadcndesign.com: heroes, pricing tables, FAQs and footers. In DS Manager they render with your system's colors, fonts, radius and components, and they install from your registry with the rest of your system.
DS Manager has 205 blocks in 24 categories. The first block of each category is free.
Browsing categories
The ProBlocks group at the bottom of the left nav lists the categories:
404, Banners, Bento Grids, Blog, Career, Coming Soon, Comparison, Contact, CTA, Empty LP, FAQ, Feature, Footers, Gallery, Header, Hero, Logo, Navbars, Pricing, Rich Text, Stats, Team, Testimonials and Timeline.
A category page stacks its blocks on the canvas, like the sections of a landing page. Each block sits under a label with its name, such as "Hero 2".
Navbars and footers show the logo from your Brand page, and footers print your system's name in the copyright line ("Your company" until you name the system).
Desktop, Tablet and Mobile
The switch on the right of the top bar draws the canvas at Desktop (1280 px), Tablet (768 px) or Mobile (390 px). The blocks' responsive layouts apply as they would in a browser, so you can check every block on a phone-sized screen before you ship it.
The Style tab edits the size the canvas shows. Desktop values carry down to Tablet and Mobile until you change a smaller size there. Breakpoints explains how the sizes cascade and how to reset an override.
Block styles
You can style blocks in two places.
One block
On a category page, ⌘-click any part of a block (or pick it in Component Layers) and edit it in the Style tab, with the same controls a component page has. The edit changes that block only. Hero 1's title gets bigger, and every other hero stays as it was.
Depending on the part, the Style tab adds a row:
- Shared style names the shared style the part sits on, such as Heading XL. Click it to edit that style for every block.
- Component names a built-in component the part uses, such as Button. Click it to open that component's page. Changes you make to Button there show in every block that uses it.
Every block
Brand > ProBlocks opens the ProBlocks styles page. Its canvas is a sample landing page built from real blocks, and the rail holds the 11 shared styles every block uses:
Wrapper, Navbar wrapper, Heading XL, Heading LG, Heading MD, Heading SM, Heading XS, Tagline, Paragraph, Paragraph small and Icon box.
The heading and text styles have Text color, Size, Font family, Weight, Line height, Tracking and Space below. ⌘-click a part of the sample to jump to the shared style it uses. Reset a rule in the rail's header resets one style at a time.
Free and Pro blocks
| Free | Pro and Lifetime | |
|---|---|---|
| Blocks you can see | All 205 | All 205 |
| Blocks you can edit and install | 24, the first of each category | All 205 |
On a Free plan, the other blocks still render so each category reads whole, but they sit under a wash with a card such as "Hero 2 is part of Pro." and an Upgrade button. Their label shows a lock and (Upgrade to Pro). You can't select their parts or copy their install command.
Your registry serves Pro blocks only while your account has Pro. If the plan ends, the free blocks keep installing.
Every ProBlock on Pro
Pro unlocks all 205 ProBlocks. Free includes the first block of each category.
Installing a block
Blocks install from the last published version of your system, so publish first. See Publish and install.
-
Install your system in the project with the command from the Install tab of Get code.
-
Open Get code in the top bar and go to the Blocks tab.
-
Run the command under Add your registry once. It adds your registry to
components.jsonunder a short name for your system, such as@acme:pnpm dlx shadcn@latest registry add "@acme=<your registry URL>/{name}.json" -
Run the command under Install a block for each block you want:
pnpm dlx shadcn@latest add @acme/hero-section-1
Get code prints both lines with your system's name and registry URL, for pnpm, npm, yarn or bun. On the canvas, hover a block's label and click Copy command to copy the install line for that block. Before your first publish, the button opens Get code on the Blocks tab instead.
Installed blocks land in components/blocks/<category>/ with your edits applied, and pull in the components they use from the same registry. Blocks use next/link and next/image.