Blog

82 New Pro Blocks for E‑commerce & Landing Pages

We've added new Pro Blocks for landing pages and e‑commerce in Figma and React, plus refactored exisiting Landing Page blocks.

update··2 min read
82 New Pro Blocks for E‑commerce & Landing Pages

We’ve shipped a big batch of new 82 production‑ready blocks to speed up your landing pages and e‑commerce design and development flows in our Figma UI kit and React. We also refactored our existing Landing Page blocks for stronger design consistency, so everything looks sharper and fits together better. All components are built on shadcn/ui, consistent across the board, and ready to drop into your project.

What’s new

55 New E-commerce Blocks

  • Checkouts: 1–3
  • Incentives: 1–6
  • Order Summary Sections: 1–4
  • Product Category Sections: 1–7
  • Product Headers: 1–7
  • Product List Filters: 1–3
  • Product List Sections: 1–6
  • Sale Sections: 1–5
  • Shopping Carts: 1–4
  • Store Navbars: 1–4
  • Examples Pages: Category, Checkout, Order Summary, Product, Shopping Cart, Storefront

27 New Landing Page Blocks

  • Header Sections: 7–20
  • Hero Sections: 13–22
  • Empty LP Section 4
  • Feature Section 20
  • FAQ Sections: 5
  • Gallery Section 12
  • Pricing Section 5
Refactored shadcn/ui landing page hero section block

Refactoring: Landing Page Blocks

We also refactored our existing Landing Page blocks.

  • Refactoring titles and subtitles in the landing page blocks
  • Updated heading classes and styles
  • Changed text content in blocks to be more concise
  • Added new placeholder logos
  • Added new Landing Page 1 Example

Preview Themes in Pro Blocks

We’ve added our themes to the block previews. You can now switch themes with the theme switcher (bottom-right corner of the block preview) to instantly see how each block looks with a selected theme.

ShadcnDesign Neon Forest theme in ecommerce block

How to install new Pro Blocks?

Want to start using the new, refactored blocks? Check out our updated documentation for installation instructions.

How to install legacy Pro Blocks?

Still using the older Figma kit or legacy Pro Blocks? No problem, nothing has changed - no need to update your components.json file. We’ve refreshed the documentation on how to install the pre‑refactor blocks.

MW
Matt Wierzbicki

Founder @ shadcndesign.com

Level-up your workflow today

One-time payment
14 days refund policy