# Marquee — Tailwind React SaaS Landing Page Template

> For subscription and finance ops products: a dark-first Tailwind React SaaS landing page template with pricing, integrations and a validated signup. 7 routes.

- Price: $19, one-time
- License: Standard
- Version: 1.4.2
- Category: SaaS landing page
- Editions: React, HTML
- Dark mode: Yes
- Stack: Next.js >=15, React >=19, Tailwind CSS >=4
- Dependencies: `lucide-react`

## What's inside

- 7 pages
- 34 components
- 67 design tokens plus 67 dark overrides

## Pages

| Path | Sections |
| --- | --- |
| `/` | `site-header`, `hero`, `ticker-rail`, `sources-band`, `metrics-grid`, `reconcile`, `proof`, `cta`, `site-footer` |
| `/product` | `site-header`, `product-tour`, `ticker-rail`, `cta`, `site-footer` |
| `/integrations` | `site-header`, `integration-catalog`, `connection-detail`, `source-request`, `site-footer` |
| `/pricing` | `site-header`, `pricing-plans`, `faq`, `site-footer` |
| `/customers` | `site-header`, `case-study`, `ticker-rail`, `customer-wall`, `site-footer` |
| `/signup` | `site-header`, `signup-panel`, `site-footer` |
| `/components` | `site-header`, `hero`, `ticker-rail`, `sources-band`, `integration-catalog`, `connection-detail`, `metrics-grid`, `reconcile`, `proof`, `product-tour`, `pricing-plans`, `faq`, `case-study`, `customer-wall`, `signup-panel`, `source-request`, `cta`, `site-footer` |

## Components

| Name | What it renders |
| --- | --- |
| `site-header` | Sticky nav: the Recur wordmark, four links, the mode toggle and an outlined signup action that leaves the hero the only fill in the fold; below md a JS-free details disclosure menu |
| `hero` | Centered manuscript hero (archetype A3) over the reconciliation surface: proportional-figure MRR at display size, twelve months of token bars, the sample 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 |
| `ticker-rail` | The signature: a full-bleed hairline-bounded strip of timestamped mono events drifting on a 90s CSS loop — feed='wire' \| 'match' \| 'wins', a persistent Pause switch in the feed cell plus pause on hover and focus, static under reduced motion |
| `sources-band` | Eight available source fixtures from the canonical spine on a hairline grid, plus a route to inspect sample access and mapping evidence |
| `integration-catalog` | Local-only source search and category filters over eight available and one explicitly planned provider, including sample-authorized, partial, long-label and recoverable no-result states |
| `connection-detail` | Expanded Stripe sample with separate authorization and sync health, absolute UTC provenance, ordered reconciliation stages, exact field mappings, read-only objects, illustrative Recur permissions and a frontend-only setup checklist |
| `metrics-grid` | Six metric cards, each led by a figure the fixture spine computes (closing MRR, net revenue retention and revenue churn from the close statement, records matched from the run, the forecast) in tabular numerals; the delta card carries the reconciliation chip |
| `reconcile` | Wire, match, close as a drawn flow figure (lanes computed from the match run, the flagged lane breaking off in gold) over a ruled three-step list, beside a match-run table with one gold-flagged row — 7/5 asymmetric at lg |
| `proof` | Named outcome quotes: a display-size lead quote spanning two rows and two supporting quotes, each beside the figure it claims |
| `product-tour` | Three product surfaces in alternating 7/5 splits (the wire feed, the match run, the close statement), ending in the full-band Δ $0.00 moment; takes an optional page lead carrying the h1 |
| `pricing-plans` | Client island: a billing-period switch doing the monthly/annual arithmetic over three plans on one meter (MRR tracked), with risk reversal stated at the price |
| `faq` | Six pricing objections as native details disclosures on a 5/7 split; the +/− glyph swap is instant and shape-based |
| `case-study` | One customer close told in full at prose measure with a by-the-numbers rail and a signed pull quote; takes an optional page lead carrying the h1 |
| `customer-wall` | The go-live wall: the five companies the wins rail announces, their outcomes, and a closing action cell |
| `signup-panel` | Client island: the signup form with validation on submit and as fields are fixed, focus moved to the first invalid field, a designed success state, and the what-happens-next rail |
| `source-request` | Ask for a source: the destination the integrations no-result state never had. Three controls on ui/form with an optional note, a refusal that can reach the summary rather than always landing on one control, and a receipt that answers with a queue position instead of a promise |
| `cta` | The closing band: one primary action with cost, risk and effort answered in four checked lines beneath it |
| `site-footer` | Brand block, three link columns and the legal row; every href resolves to a page or anchor the theme ships |
| `ui/button` | Anchor or button in primary/secondary/ghost at three sizes, riding the token state ramp with optical icon-side padding and a visible focus outline, plus disabled and pending states that swap the whole variant rather than fading it — pending carries aria-busy on the independent info family |
| `ui/badge` | Mono chip in neutral or flag (gold) tone, plus the uppercase Eyebrow label |
| `ui/container` | The content column at three declared widths: 6xl marketing, 7xl wide, 3xl prose |
| `ui/delta` | The reconciliation verdict chip: settled (quiet) or flag (gold), tabular figures, text always carried |
| `ui/field` | The shell around Input, Textarea and Select: a mono label, the optional marker written out in the text face, the read-only sentence, and one message line that carries the error, the receipt or the description on a single id — drawn for all three controls in rest, invalid, valid, read-only and disabled, with the critical edge and the focus ring kept as separate roles |
| `ui/integration-card` | Provider contribution card with available, planned, sample-authorized and partial states; planned cards expose no dead action |
| `ui/sync-health` | Sample sync status with healthy, delayed, partial and failed variants, absolute UTC freshness, record counts, icon and text cues |
| `ui/field-mapping-table` | Horizontally contained semantic source-to-concept table with mapped, needs-mapping and ignored rows, including long source paths |
| `ui/connection-checklist` | Connection requirements in complete, blocked and frontend-only states with text and shape beyond color |
| `ui/logo` | The Recur mark: two arcs closing a circuit, every stroke currentColor — the one hand-drawn SVG in the theme |
| `ui/mode-toggle` | Client island: the navbar light/dark switch carrying aria-pressed, writing to localStorage and setting the mode class on the nearest .tt-marquee wrapper or documentElement |
| `ui/section-heading` | Eyebrow, display h2 and one-sentence lede, left or centered |
| `ui/type` | The type vocabulary: the only place a font size is named, pairing every rung of the 1.333 ladder with its leading and optical tracking |
| `ui/accordion-disclosure` | One skeleton drawn twice: the FAQ question sitting on a full-width rule under a printed plus that becomes a minus, and the header's 40px square control with a plate growing out of it. Native details in both, so the answers ship inside the page with no script — and Escape from inside an answer now closes that row and puts focus back on the question |
| `ui/form` | The submit flow the sections stopped writing: the browser's own constraint gate re-worded per field, one refusal sent straight to its control and several to the summary, every typed value left where it was, a fieldset that goes disabled and aria-busy together, and a receipt that exists before focus is moved onto it |
| `ui/form-error-summary` | The critical tone box a refused submit lands on, built from the same soft ground, hairline edge and glyph the theme gives every other status: one ordered row per failed answer, each reading as that field's own sentence and linking to the control it names |
## Design tokens

| Token | Light | Dark override |
| --- | --- | --- |
| `--background` | `#fbf3f7` | `#191115` |
| `--foreground` | `#20141b` | `#eee7eb` |
| `--card` | `#fef8fb` | `#241b20` |
| `--card-foreground` | `#20141b` | `#eee7eb` |
| `--primary` | `#ab1c70` | `#e366a5` |
| `--primary-foreground` | `#fbf5f7` | `#12050b` |
| `--primary-hover` | `#94055e` | `#f878b8` |
| `--primary-active` | `#770a4c` | `#f897c6` |
| `--secondary` | `#efe2e9` | `#2e2329` |
| `--secondary-foreground` | `#372931` | `#d7ced3` |
| `--muted` | `#f3eaef` | `#22191e` |
| `--muted-foreground` | `#605058` | `#b3a2ab` |
| `--accent` | `#815c0a` | `#e1b850` |
| `--accent-foreground` | `#fbf8f2` | `#150e02` |
| `--border` | `#dbd1d6` | `#382c33` |
| `--ring` | `#ab1c70` | `#e366a5` |
| `--shadow-color` | `#392831` | `#070204` |
| `--surface-tint` | `#f6e6ed` | `#2e1c25` |
| `--field` | `#fffafc` | `#171014` |
| `--field-border` | `#8c727f` | `#8f7380` |
| `--control-border` | `#8c727f` | `#8f7380` |
| `--selection` | `#ead2df` | `#38262f` |
| `--selection-foreground` | `#20141b` | `#eee7eb` |
| `--selection-border` | `#765063` | `#a97b90` |
| `--info` | `#295b74` | `#9bcfe4` |
| `--info-soft` | `#dcecf3` | `#1b2d35` |
| `--info-border` | `#5b8294` | `#5a91a8` |
| `--positive` | `#245c3e` | `#9fd9b7` |
| `--positive-soft` | `#dcefe4` | `#1c3026` |
| `--positive-border` | `#56816a` | `#5c9a78` |
| `--warning` | `#76520a` | `#f0cf83` |
| `--warning-soft` | `#f5e7c7` | `#332714` |
| `--warning-border` | `#9d7a2d` | `#a9842c` |
| `--critical` | `#8a2b3e` | `#ff9cae` |
| `--critical-soft` | `#f6dde3` | `#38191f` |
| `--critical-border` | `#ad6170` | `#b75569` |
| `--texture-ink` | `#20141b1f` | `#eee7eb2e` |
| `--radius` | `0.875rem` | `0.875rem` |
| `--radius-inner` | `0.625rem` | `0.625rem` |
| `--weight-display` | `700` | `600` |
| `--duration-ticker` | `90s` | `90s` |
| `--icon-stroke` | `1.75` | `1.75` |
| `--text-caption` | `0.75rem` | `0.75rem` |
| `--leading-caption` | `1.4` | `1.4` |
| `--text-small` | `0.875rem` | `0.875rem` |
| `--leading-small` | `1.45` | `1.45` |
| `--text-body` | `1rem` | `1rem` |
| `--leading-body` | `1.55` | `1.55` |
| `--text-lead` | `1.125rem` | `1.125rem` |
| `--leading-lead` | `1.6` | `1.6` |
| `--text-d1` | `1.5rem` | `1.5rem` |
| `--leading-d1` | `1.25` | `1.25` |
| `--text-d2` | `2rem` | `2rem` |
| `--leading-d2` | `1.2` | `1.2` |
| `--text-d3` | `clamp(2rem, 1.724rem + 1.178vw, 2.667rem)` | `clamp(2rem, 1.724rem + 1.178vw, 2.667rem)` |
| `--leading-d3` | `1.12` | `1.12` |
| `--text-d4` | `clamp(2.5rem, 2.063rem + 1.865vw, 3.556rem)` | `clamp(2.5rem, 2.063rem + 1.865vw, 3.556rem)` |
| `--leading-d4` | `1.05` | `1.05` |
| `--tracking-d1` | `-0.01em` | `-0.01em` |
| `--tracking-d2` | `-0.01em` | `-0.01em` |
| `--tracking-d3` | `-0.02em` | `-0.02em` |
| `--tracking-d4` | `-0.03em` | `-0.03em` |
| `--tracking-label` | `0.08em` | `0.08em` |
| `--font-display` | `var(--font-marquee-display), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | `var(--font-marquee-display), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` |
| `--font-text` | `var(--font-marquee-text), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` | `var(--font-marquee-text), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif` |
| `--font-sans` | `var(--font-text)` | `var(--font-text)` |
| `--font-mono` | `var(--font-marquee-mono), ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace` | `var(--font-marquee-mono), ui-monospace, 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace` |
## Use it

- Registry: `bunx shadcn add https://tailthemes.com/r/marquee.json`
- MCP: [https://tailthemes.com/api/mcp](https://tailthemes.com/api/mcp)
- Download: [https://tailthemes.com/api/download/marquee](https://tailthemes.com/api/download/marquee)

## Links

- Product page: [https://tailthemes.com/themes/marquee](https://tailthemes.com/themes/marquee)
- Live preview: [https://tailthemes.com/preview/marquee](https://tailthemes.com/preview/marquee)
- Docs: [https://tailthemes.com/docs/marquee](https://tailthemes.com/docs/marquee)
- Manifest JSON: [https://tailthemes.com/api/themes/marquee](https://tailthemes.com/api/themes/marquee)
- Registry item: [https://tailthemes.com/r/marquee.json](https://tailthemes.com/r/marquee.json)