Free React Landing Page Components
You can build a complete React landing page for free by stacking Watermelon UI blocks: a hero, a features section, pricing, testimonials, an FAQ, a call to action, and a footer. Every section is written in React with Tailwind CSS, is MIT licensed, and works in Next.js or Vite.
If you want to start from a finished page, open a template, which is a full landing page composed from these same blocks.
A landing page, section by section
| Section | What it does | Blocks |
|---|---|---|
| Navbar | Navigation and primary CTA | Navbars |
| Hero | Headline, subhead, and main action | Hero sections |
| Features | Explains what the product does | Feature sections, bento grids |
| Social proof | Builds trust with numbers and quotes | Stats, testimonials |
| Pricing | Plans and billing toggle | Pricing sections |
| FAQ | Handles objections | FAQ sections |
| CTA | Closing call to action | CTA sections |
| Footer | Links, legal, and newsletter | Footers |
Full page templates
Frequently asked questions
Can I use these blocks for a Next.js landing page?
Yes. The blocks are plain React components, so they work in the Next.js App Router, the Pages Router, and Vite.
Is there a free shadcn landing page template?
Yes. The templates on Watermelon UI use shadcn conventions and are free under the MIT license.