# ProBlocks

> Browse 205 ProBlocks page sections in DS Manager, styled with your shadcn/ui design system, and install them from your published shadcn registry.

Canonical: https://www.shadcndesign.com/docs/ds-manager-problocks

ProBlocks are ready page sections from [Pro Blocks](/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](/docs/ds-manager-brand) page, and footers print your system's name in the copyright line ("Your company" until you name the system).

<RichImage
  src="/docs/ds-manager/problocks-desktop.webp"
  alt="The Pricing category in DS Manager at Desktop size, with the Pricing 1 block styled in the system's colors and fonts and the Desktop, Tablet and Mobile switch in the top bar"
  width="879"
  height="720"
  quality="90"
/>

## 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.

<RichImage
  src="/docs/ds-manager/problocks-mobile.webp"
  alt="The same Pricing block at Mobile size in DS Manager, laid out in one column with the Basic plan card at full width"
  width="640"
  height="803"
  quality="90"
/>

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](/docs/ds-manager-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.

<DocsCta
  title="Every ProBlock on Pro"
  description="Pro unlocks all 205 ProBlocks. Free includes the first block of each category."
  primaryLabel="See plans"
  primaryHref="/ds-manager#pricing"
/>

## Installing a block

Blocks install from the last published version of your system, so publish first. See [Publish and install](/docs/ds-manager-publish).

1. Install your system in the project with the command from the **Install** tab of **Get code**.
2. Open **Get code** in the top bar and go to the **Blocks** tab.
3. Run the command under **Add your registry** once. It adds your registry to `components.json` under a short name for your system, such as `@acme`:

   ```bash
   pnpm dlx shadcn@latest registry add "@acme=<your registry URL>/{name}.json"
   ```

4. Run the command under **Install a block** for each block you want:

   ```bash
   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`.