Emberline: AI SaaS landing page template for Next.js.

$39one-time payment

Buy EmberlineLive demo

Checkout opens soon.

Next.js 15
Tailwind CSS v4
TypeScript
10 sections
Dark
No API keys
Updated Oct 7, 2026

Live demo

The Emberline landing page template on desktop, from the hero to the footer

Overview

A dark, grid-framed landing page for AI and SaaS products: energy lines running through the hero into a dashboard mockup, bento features, a comparison table and a monthly and yearly pricing toggle.

Made for: AI products, SaaS startups, Analytics tools
Highlights: Grid-framed hero with animated energy lines
Bento features with inline illustrations
Monthly and yearly pricing toggle
One config file and one colour ramp
The look: Near-black surfaces, a warm orange glow and a visible grid whose intersections light up. Headlines are set in Inter Tight with an Instrument Serif italic accent, and the whole palette comes from one colour ramp.

Sections

01
Hero
Grid-framed headline with animated energy lines feeding a product dashboard mockup.
02
Logo strip
Customer wordmarks.
03
Features
A bento grid with inline illustrations.
04
Comparison
A table of your product against the alternatives.
05
How it works
The steps from sign-up to result.
06
Testimonials
Customer quotes.
07
Pricing
Plans with a monthly and yearly toggle.
08
FAQ
Common questions, answered in place.
09
Final call to action
One last push to sign up.
10
Footer
Links, legal and the wordmark.

Remove a section by deleting its line in app/page.tsx, or move the line to reorder.

Built with

Its motion comes from free components in our library, shipped in components/hairline/ so you can use them anywhere else on the page too.

Make it yours

Every word, link and price lives in site.config.ts. TypeScript flags a missing or misspelled field, so you can’t quietly break a section.

Where to change each part of Emberline
To change	Edit
All copy, links, prices, plans, FAQ	site.config.ts
Accent colour and surfaces	app/globals.css (@theme)
Fonts	app/layout.tsx
Feature card illustrations	components/sections/Features.tsx
Hero product mockup	components/hero/DashboardMockup.tsx
Add, remove or reorder sections	app/page.tsx

Run it

$ npm install$ npm run dev

Node.js 18.18 or newer. No environment variables.

Before you go live

The brand, customers, numbers and quotes in the demo are placeholders. Replace them in site.config.ts, and point the buttons at your own sign-up or booking link.

Specifications

Framework: Next.js 15 (App Router), React 19
Language: TypeScript
Styling: Tailwind CSS v4 with design tokens and component styles
Fonts: Inter Tight, Instrument Serif, self-hosted with next/font
Dependencies: next, react, react-dom, lucide-react, clsx, tailwind-merge
Images: None. Every visual is built in code.
API keys and environment variables: None
Node.js: 18.18 or newer
Colour scheme: Dark
Responsive: Desktop, tablet and phone
Accessibility: Skip link, visible focus, keyboard navigation, reduced motion
Deploys to: Vercel, Netlify, Cloudflare Pages or any Node host
Codebase: 25 source files, about 2,100 lines
Last updated: Oct 7, 2026

License

One license, no tiers. The full text ships as LICENSE.md in the download.

You can

Use it for your own products
Use it for any number of client projects
Change the code and design however you like
Deploy the result commercially

You can’t

Resell or share the files as a template, theme or UI kit
Publish the source as a template in a public repository

Questions

What do I get when I buy Emberline?

The complete Emberline project as a download: the Next.js app, its config file, a README with setup and customisation notes, and the license. The download link arrives right after checkout.

Can I use Emberline for client projects?

Yes. One purchase covers your own products and any number of client projects, and you can change the code however you like. What you can’t do is resell or share the template files themselves as a template or UI kit.

Do I need API keys, a database or a backend?

No. It runs with npm install and npm run dev and deploys to Vercel, Netlify or Cloudflare Pages without any environment variables.

What should I change before I launch?

The brand, customers, numbers and quotes in the demo are placeholders. Replace them in site.config.ts, and point the buttons at your own sign-up or booking link.

Do I need to know Next.js?

Basic React helps, but most changes are text edits in site.config.ts. The README walks through colours, fonts and section order.

How do updates work?

Updates to Emberline are free. When a new version ships, download it again from the link in your order email.

Can I get a refund?

Yes. If Emberline isn’t right for you, reply to your receipt within 14 days and you get your money back.

Should I buy all-access instead?

If you’ll use more than two templates, yes. All-access is $99 for all 17 templates, including Emberline and every template added later. Three single templates would cost $117.