Midnight Lite

Midnight Lite is a free, MIT-licensed dark landing page template for AI and SaaS products, built with Next.js 16 (App Router, static export), React 19, TypeScript, Tailwind CSS v4, shadcn/ui (Radix) and Lucide icons. One page ships as a header, hero, product tiles, closing call to action and footer, all laid out separately for phones.

What is Midnight Lite?

Midnight Lite is a free dark landing page template for AI and SaaS products, built on Next.js 16, Tailwind CSS v4 and shadcn/ui. It takes your copy in a single file, src/content/site.ts, and produces a static export (out/) that runs on any static host. It is made by Vilqor and is the free lite edition of the paid Midnight template.

Key Features

• Next.js 16 stack — App Router with static export, React 19, TypeScript, Tailwind CSS v4, shadcn/ui (Radix) and Lucide icons.
• Single-file copy — every word on the page lives in src/content/site.ts; rebranding means editing one file.
• Dark theme with champagne accent — Fraunces display type, a seeded night sky and an engraved guilloche rosette, themed via --brand and --brand-ink in globals.css.
• Five core sections — header with a glass bar on scroll and a section-following lit pill, hero, product tiles (research list, sentence with numbered sources, three facts), closing call to action and footer.
• 404 page in the same sky, plus SEO basics: title, description, canonical link from NEXT_PUBLIC_SITE_URL, sitemap.xml, robots.txt and a social image.
• Motion with reduced-motion support — gold glint, button sheen, rosette sparks, twinkling and shooting stars; all stops for prefers-reduced-motion, and stars stay still on phones.
• Touch sizing — links and buttons are at least 44 px tall on phones and touch screens such as an iPad.
• AI-editor ready — AGENTS.md and DESIGN.md guide editors, a lint rule fails on text typed into components, and npm run check runs ESLint, types and the build.
• shadcn registry — the sections ship as 8 blocks under the @vilqor namespace, installable with npx shadcn@latest add.

Who is it for?

• Indie SaaS founders — launch a dark marketing page for an AI product by rewriting site.ts and pointing the buttons at a sign-up page.
• Developers evaluating layouts — reuse the header, night sky, guilloche rosette, hero, features, CTA or footer blocks individually through the @vilqor shadcn registry.
• AI-assisted builders — hand AGENTS.md and DESIGN.md to Claude Code, Cursor, Codex or GitHub Copilot and ask for a rebrand, then verify with npm run check.

How does Midnight Lite work?

Clone the repo, run npm install and npm run dev, then rewrite the name and copy in src/content/site.ts, point header.cta, hero.primary and final.button at your sign-up page, pick accent colours in globals.css, set NEXT_PUBLIC_SITE_URL in .env.local, replace public/og.png, and run npm run check before uploading out/.

Pricing

Midnight Lite is free under the MIT license. The full Midnight template costs $59 once and license covers any number of sites for you and your clients.

FAQ

Is Midnight Lite free?

Yes. Midnight Lite is free and MIT licensed, so you can use, modify and redistribute it. The footer credit "Made with Midnight Lite" can be kept or removed by setting footer.credit to null in site.ts; the license does not require it.

How is Midnight Lite different from the full Midnight template?

The paid Midnight template ($59 once) adds seven more sections (customer logos, use cases in tabs, integrations workflow, stats band, testimonials, pricing and FAQ), plus working forms, analytics, a second language, extra pages and dialogs. Midnight Lite ships only the home page, a 404, and no forms or analytics.

Can I install only some sections in my own Next.js project?

Yes. The sections form a shadcn registry under the @vilqor namespace, including midnight-theme, midnight-hero, midnight-footer and others. Blocks install into components/midnight/ and take their words as props. The Radix and Base UI shadcn styles work; the React Aria style is not supported yet.