Relative - Next.js and Astro marketing landing page template
A landing page template built with shadcn/ui and Tailwind CSS, available in both Next.js and Astro editions. Includes 100+ components, 10+ pages, Figma files, and block-based sections for quick marketing site launches.
Over one hundred reusable components across more than ten ready-made pages.
Every page is built with block sections so you can easily swap and add new blocks.
Mobile-first responsive design ensures a polished experience on every screen size.
Customize the design in Figma before touching any code in your project.
Built-in metadata and SEO integration to help your pages rank in search results.
Author content with MDX and structured JSON for flexible data-driven pages.
Choose between a Next.js or Astro version depending on your preferred framework.
Launch your marketing site faster with block-based landing pages
Relative is a landing page template designed for developers and marketers who want to ship a professional marketing site without starting from scratch. Built with shadcn/ui and Tailwind CSS, it takes a block-based approach where every page is composed of modular sections that can be rearranged, swapped, or extended from an existing library of blocks. Available in both Next.js and Astro editions, it gives you flexibility to pick the framework that fits your workflow. The template ships with TypeScript throughout and supports content authoring via MDX and structured JSON data.
What's included
- Over 100 reusable UI components ready to drop into your pages
- 10+ pre-built pages covering common marketing site needs
- Figma design files for visual customization before writing code
- Block-based page sections that can be mixed, matched, and extended
- MDX support for rich content authoring alongside your components
- JSON data structures for managing page content without a CMS
- Built-in SEO metadata integration for search engine visibility
Ideal for
- SaaS and startup landing pages that need to launch quickly
- Marketing sites for products, services, or digital tools
- Developer portfolios or agency sites with multiple pages
- Teams who want design-to-code consistency using Figma files
- Projects where choosing between Next.js and Astro matters
Landing sections
- Hero sections with call-to-action layouts
- Feature and benefit showcases
- Pricing pages and comparison sections
- Blog and content pages with MDX rendering
- Standard footer and navigation components
Tech & compatibility
The template is built on Next.js 15 with React for the Next.js edition, and also ships as a standalone Astro edition for teams that prefer a lighter, content-focused framework. It uses TypeScript across the codebase and follows a mobile-first responsive design approach, so layouts adapt cleanly across devices. The block-based architecture means you can pull in additional sections from the shadcnblocks.com library without restructuring your project.
Good to know
- The Next.js and Astro editions are both included with purchase at the same price point
- A premium plan option is also available that grants lifetime access to all templates and blocks on the platform
