MarqueeTailwind react SaaS landing page template
A dark-first Tailwind React SaaS landing page template built around one signature: the ticker rails — full-bleed strips of timestamped, figure-bearing events drifting between sections, a different evidence feed on each route.
- 48 / 48
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
- unlimited projects, client work included
- 12 months of updates
- 14 days, no questions
AGENTS.md and 4 skills ship in the zip, so your own agent keeps changing it after you buy.
docs — install, use, customizepages, composed from 15 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- Recur — subscription analytics/
- site-header
- hero
- ticker-rail
- sources-band
- metrics-grid
- +4
Product — wire, match, close/product- site-header
- product-tour
- ticker-rail
- cta
- site-footer
Pricing — one meter, MRR tracked/pricing- site-header
- pricing-plans
- faq
- site-footer
Customers — closes with names on them/customers- site-header
- case-study
- ticker-rail
- customer-wall
- site-footer
Start free — the first match/signup- site-header
- signup-panel
- site-footer
Components/components- site-header
- hero
- ticker-rail
- sources-band
- metrics-grid
- +10
Five fiction routes ship a whole marketing site for Recur, the demo product: home opening on the reconciliation surface, a product tour that ends in the Δ $0.00 band, pricing with a working monthly/annual switch, customers carrying a full case study and the go-live wall, and a signup form with real validation. Interactions are real, not screenshots: the navbar mode toggle, the billing arithmetic done in front of you, focus moved to the first invalid field. Ships Bricolage Grotesque, Schibsted Grotesk and Spline Sans Mono self-hosted (OFL licenses included), a 1.333 modular type scale with every size on a token, a raspberry-on-wine palette whose gold second hue is reserved for flagged rows, and a /components styleguide listing all 48 tokens per mode. The hero ground carries a generated poster grain shipped as a grayscale luminance mask, so every tinted pixel still comes from a token and a rebrand carries the texture unchanged. The light variant is a designed blush-paper table, not a token flip; every foreground/background pair in both modes is verified against WCAG AA by computation. Every rendered href resolves to a page or anchor the theme ships.
sections and primitives
You get the parts, not just the demo site. Every frame is a real capture from the theme's own styleguide page, and the source path under it is where the file lands in your project.
hero
src/components/hero.tsx
Centered manuscript hero (archetype A3) over the reconciliation surface: proportional-figure MRR at display size, twelve months of token bars, the live wire feed and the match verdict strip; the ground carries the poster grain — a grayscale luminance mask tinted by the --texture-ink token, fading out before the surface
tokens, both modes
Change one variable and every part follows. Each badge is one token split down the middle: its light value on the left, its dark value on the right, with the theme's own paired ink on both halves.
hover or tab a badge for its name and both values, enter copies
The ticker rail: a full-bleed, hairline-bounded strip of timestamped mono events drifting edge to edge between sections — a different evidence feed on each of three routes (the wire, the match log, the go-lives).
every token
typefaces, self-hosted
Real woff2 files in src/fonts/, wired through next/font and licensed under OFL. Nothing is fetched from Google at build time, so the zip renders these letterforms offline. Scale ratio 1.333.
Marquee
A dark-first Tailwind React SaaS landing page template built around one signature: the ticker rails — full-bleed strips of timestamped, figure-bearing events drifting between sections, a different evidence feed on each route.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Bricolage Grotesque
- text
- Schibsted Grotesk
- mono
- Spline Sans Mono
- captionAg
- smallAg
- bodyAg
- leadAg
- d1Ag
- d2Ag
- d3Ag
- d4Ag
every width is a real render from the publish gate
Four viewports, each one a render the gate produced and checked. Switch between them: the frame narrows exactly as a window does, because that is what it is.
every token and every part on one page
The styleguide route is not documentation about the theme. It is a page in the zip that renders the real components from the real tokens, so it stays true the day you change one.
agent files in the zip
Unzip it and run it, or install it into a project you already have. Either way the theme arrives with the instructions an agent needs to extend it without guessing at your conventions.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills
- add-pageCompose a new Marquee route from existing sections
- add-sectionAdd a new self-contained section to Marquee following its existing patterns
- check-qualityRun Marquee's own gate locally
- rebrandApply a buyer's brand to Marquee
- theme.jsontokens, pages and components, machine readable
- src/components/15 sections, 9 primitives
- src/app/6 pages, styleguide included
activity
- v1.0 — dark-first SaaS landing: ticker rails, pricing switch, signup islandtoday
- preview screenshots + component capturesin progress
- a changelog route once the fiction ships releasesplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent files are on the plate above.
