Hero Block Checklist

Check off the essentials. This React hero block uses a visual checklist to communicate key benefits or included features at a glance. Built with shadcn/ui Button, Badge, and Card components. Each checklist item has a check icon for positive reinforcement. The checklist is split into two columns on larger screens for better scannability. Great for pricing pages, product comparisons, or any hero where you need to quickly communicate what's included. Perfect for SaaS, courses, or subscription products.

Hero Block Checklist preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/hero-31.json

npx shadcn@latest add https://www.shadcn.io/registry/hero-31.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/hero-31.json

bunx shadcn@latest add https://www.shadcn.io/registry/hero-31.json

Related Components

FAQ