New Pro Blocks update: October 2025

What’s new

• We shipped a new set of 11 Pro Blocks
• We made 22 Pro Blocks (React) free so you can try them out directly in your project.
• We updated our Figma kit to include the refactoring changes and new blocks.
• We refactored Pro Blocks that use form components to use the newest shadcn/ui components (Field, InputGroup, ButtonGroup)
• We refactored Footer, Contact and Team blocks to use @icons-pack/react-simple-icons

New Pro Blocks

• Comparison sections (6 new blocks)
• Footers (2 new blocks)
• Hero sections (2 new blocks)
• LP navbar (1 new block)

Explore new blocks

Free Pro Blocks

Each first Pro Block in our Landing Page categories are now marked as free. You'll see a "Free" badge with a tooltip in the block header. You can install them with the CLI in seconds. See the Pro Blocks Documentation to learn how to install them.

---

Below is a practical guide to what's new and how you can put these blocks to work on landing pages, dashboards, and app layouts.

What's new in the Pro Blocks

11 new Pro Blocks across four areas:

Comparison sections (6 new blocks): Side-by-side layouts for pricing tiers, feature checklists, and "this vs that" stories.

Footers (2 new blocks): Footer layouts with cleaner grids, icon support, and better mobile stacks.

Hero sections (2 new blocks): Above-the-fold headers that pair headings, subcopy, CTAs, and optional media.

LP navbar (1 new block): A landing page top bar with clear CTA placement and responsive behavior.

22 Pro Blocks (React) are now free

You can drop them into a Next.js app and see how they feel in your stack before you buy more.

Form blocks refactored to new primitives

Blocks using forms now rely on Field, Input Group, and Button Group from the latest shadcn/ui, so spacing, labels, help text, and actions are consistent and easier to maintain.

Icon pass

Footer, Contact, and Team blocks now use @icons-pack/react-simple-icons for cleaner brand icons and uniform sizing.

Why this update matters

Faster assembly. The new comparison, hero, and footer blocks cover common page sections, so you spend less time composing from scratch.

Cleaner forms. Moving to Field, Input Group, and Button Group trims one-off spacing fixes and keeps labels, hints, and errors consistent.

Better brand support. The switch to react-simple-icons gives you crisp brand icons without hunting for SVGs.

Try before you commit. The 22 free blocks let you test performance, props, and slot structure in a real app.

How to use the new blocks on landing pages

1) Above the fold with a Hero block

Pick one of the two new hero options to set a clear message and a single action. Use a primary CTA and keep a secondary for docs or a demo. The hero pairs well with Button Group when you need two actions in a tight space.

Why it works: predictable scan pattern, clean spacing, and easy to style with tokens. If you switch themes, the block holds up without detaching.

2) Lead with a Comparison block

The six new comparison sections help you explain "plan A vs plan B," "free vs pro," or "us vs competitor," using a tidy grid and icon rows. You can swap icons for react-simple-icons where brand marks matter.

Tip: set one column as the "current plan," then use a Button Group for upgrade actions. Keep checklist copy short. The block is designed for quick scans on mobile.

3) Close with a Footer block

Choose one of the two new footers when you need a clean end state. They support product links, resources, brand icons, and legal in a way that doesn't collapse on small screens.

Link to primitives: if your footer has newsletter signup, the form area should use Field and Input Group so label, helper text, and errors match the rest of the site.

4) Use the LP navbar

The new landing navbar keeps the logo left, links center or right, and a clear CTA. Pair with the hero for a stable top section. On smaller screens, the menu stacks without breaking the CTA.

How to use them in dashboards and app layouts

Comparison sections inside product

You can repurpose a comparison block for feature gates or tier upgrades in-app. Keep it tighter: fewer columns, fewer bullets, one action. The uniform spacing helps it fit alongside tables or cards.

Form areas with Field and Input Group

Any settings view, profile page, or onboarding step benefits from the refactor. Field handles label, message, and error so you don't patch spacing by hand. Input Group stitches prefix and suffix content without misalignment. It keeps icons, text, and controls on the same baseline.

Action rows with Button Group

Toolbars and table actions work well with Button Group. Place the primary action first, then secondary actions, then subtle actions. The group keeps hit areas even and stops button drift.

Brand icons in team and contact blocks

The updated Team and Contact blocks now use react-simple-icons for uniform brand marks. This is handy for social links on profile cards or contact options in support pages.

Building a complete page with the new blocks

Here's a simple flow for a product landing page:

1. LP Navbar at the top with a "Get Started" button.
2. Hero with one primary action and a short subline.
3. Comparison to show plans or a feature table.
4. Social proof (use a Team or Contact block variant for logos and links).
5. Footer with docs, legal, and social.

For a dashboard:

1. App shell from your layout.
2. Toolbar that uses Button Group for add/export actions.
3. Table or cards, and when data is missing, switch to an Empty pattern so the page doesn't look broken.
4. Settings drawer using Field and Input Group for clean forms.

For onboarding:

1. Hero style intro explaining the first value step.
2. Input Group for invite codes or tokens.
3. Comparison if users must pick a plan early.
4. Footer with help and contact links.

How these blocks tie back to shadcn/ui primitives

• Field organizes labels, hints, and errors so every form element behaves the same.
• Input Group keeps prefix/suffix content aligned with text, which helps for search, currency, or reveal-password patterns.
• Button Group handles clustered actions without manual spacing.
• Item and Empty give you predictable list and empty states.
• Spinner replaces ad hoc loading glyphs so your loading states are consistent.
• Kbd helps you show shortcut hints in tooltips or menus.

Because these are framework-agnostic primitives, the blocks stay stable if your app uses React Server Components or you shift parts of your stack later. You get fewer surprises when you upgrade.

Practical tips for clean assembly

• One icon set per surface. Use react-simple-icons where brands appear. Keep UI icons consistent elsewhere.
• Pick a single CTA size. Tie it to your tokens so you don't adjust paddings by hand.
• Let blocks do the spacing. Avoid adding extra wrappers that fight the grid.
• Test mobile early. The new blocks are built for small screens, but copy length still matters.
• Adopt the primitives. If you still have custom form wrappers, replace them with Field so your forms match the blocks.

A quick upgrade path

1. Install or update the latest blocks and use the updated Figma kit.
2. Replace form areas first with Field, Input Group, and Button Group.
3. Drop in a hero and comparison on your main landing page.
4. Swap your footer to one of the new versions with brand icons.
5. Standardize icons on the surfaces that use brands, then keep UI icons consistent across the rest.

Most teams can do a first pass in a day. You'll see fewer detached frames, fewer spacing tweaks, and a smoother handoff to code.