Metafi

Metafi is a modern shadcn/ui + Tailwind template for polished SaaS and marketing sites, available for both Next.js 15 and Astro 5, with 100+ components, 10+ pages and a Figma file so you can launch a sophisticated site fast.

It’s aimed at teams who want a premium, Stripe like marketing site with strong typography, layered cards and dashboard previews, but still want full control over the codebase with TypeScript and MDX content.

What Are the Features of Metafi? ✨

• 100+ shadcn/ui based components, styled for Tailwind 4

• 10+ ready made pages for core marketing flows

• Next.js 15 and Astro editions included in one purchase

• Figma file so designers can tweak layouts and tokens

• All pages assembled from reusable block sections

• MDX + JSON content for flexible copy and data

• Responsive, mobile first design

• SEO + metadata setup for the Next.js version

What Components Are Included With Metafi? 📒

• Pages: multi section landing, features, pricing, blog layouts and support style pages (built from blocks so you can remix them).

• UI elements: cards, stats, logo grids, feature rows, CTAs, navbars and footers based on shadcn/ui.

• Assets: full Figma file matching the production template, plus Markdown/MDX content structure for docs or articles.

Everything is block based, so you can drag in more hero, pricing or FAQ sections from the broader Shadcnblocks library when you need them.

Pros and Cons

Pros ✅

• Modern, polished layout ideal for SaaS and fintech style marketing sites

• Both Next.js 15 and Astro 5 supported

• 100+ components and 10+ pages out of the box

• Figma file included for fast brand customization

• Block based structure makes it easy to extend with other Shadcnblocks sections

Cons ⚠️

• Best suited to teams comfortable with shadcn/ui and Tailwind 4

• Content is MDX/JSON by default, so you’ll wire your own CMS if you want a GUI

• Styling leans toward sleek SaaS/fintech; very playful brands may want heavier visual tweaks

Integration

• Next.js 15 app router build with SEO and metadata helpers preconfigured

• Astro 5 edition for content heavy or static first sites

• Tailwind 4 utilities and shadcn/ui components ready to match your existing design tokens

• MDX + JSON content that can be mapped to tools like Payload or Sanity via Shadcnblocks CMS addons

FAQ

Does Metafi come for both Next.js and Astro?

Yes. You get a Next.js 15 version and an Astro 5 version with the same design system.

Is a Figma design file included?

Yes, Metafi includes a Figma file so your design team can customize the system before coding.

How many pages does Metafi include?

It ships with 10+ pages built from reusable sections, covering core marketing flows like landing and pricing.

Who is Metafi best for?

Metafi is ideal for SaaS and product teams who want a premium marketing site and are comfortable working with shadcn/ui, Tailwind and TypeScript.