sent here for Grove
next.js saas landing page template · React and HTML source
GroveNext.js SaaS landing page template
A calm Next.js SaaS landing page template for finance and workflow products.
- 80 / 80
- light / dark tokens
- 2
- modes, both designed
- 1
- DOM, rendered twice
Its 26 independent sections share one 3rem ledger pitch across transaction rows, checklists, comparison tables and the month-end register.
- 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 26 sections
Every page is a real render from the publish gate, in the mode on show. Open any of them in the live preview.
- Home/
- site-header
- hero
- logo-cloud
- feature-showcase
- feature-split
- +6
Pricing/pricing- site-header
- page-header
- pricing-table
- pricing-comparison
- faq
- +3
Customer story/customers- site-header
- customer-header
- before-state-ledger
- walkthrough
- close-timeline
- +4
Journal/blog- site-header
- page-header
- blog-index
- newsletter
- site-footer
Walkthrough/demo- site-header
- page-header
- walkthrough
- testimonials
- cta
- +1
Month-end guide/month-end-guide- site-header
- page-header
- guide
- testimonials
- logo-cloud
- +2
Start free/signup- site-header
- auth-form
- logo-cloud
- cta
- site-footer
Sign in/login- site-header
- auth-form
- site-footer
Contact/contact- site-header
- contact-map
- contact-desk
- logo-cloud
- cta
- +1
Privacy and terms/privacy- site-header
- page-header
- legal-doc
- cta
- site-footer
The design system/components- site-header
- hero
- logo-cloud
- feature-showcase
- feature-split
- +21
The neutral-first surface system keeps structure grey in both modes, reserves green for actions and selection, and gives information, positive, warning and critical states independent semantic roles. Fraunces, Instrument Sans and IBM Plex Mono ship self-hosted on a 1.250 type scale. Eleven routes cover home, pricing, journal, walkthrough, customer proof, a long-form guide, contact, privacy, sign-up, sign-in and a living component showcase. The customer story reuses one typed Fieldwork Studio fixture with exact pence arithmetic, six timed March sessions, source labels and sample-content boundaries. Three sample forms validate in the browser and draw their own error sentences rather than the vendor's. The subscribe and contact forms close on a designed success receipt. The auth form hands a valid submit to the native POST instead of claiming a sign-in it cannot verify. Monthly and yearly pricing is a React-edition control; the remembered mode toggle, the request form and the nav's disclosure run in both editions with no backend claim. The disclosure, the field, the submit flow and the error summary are vendored from a shared behaviour library, so Escape, focus return and focus-after-submit answer the same way in each. Every internal product link resolves; journal article links remain explicit CMS fixtures. Built for Tailwind v4, Next.js 15 and React 19. Nine generated photographs, one hand-drawn ledger illustration, prompts and four buyer skills ship with the source. All eleven routes also ship as a framework-free HTML template, compiled to standalone documents with local fonts and vanilla JavaScript, alongside the Nunjucks source they were built from.
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. 30 frames cover them, with 10 primitives sharing the ui/* frame.
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 rules moved off the paper and into the ledger: every row-like structure in Grove — table row, checklist line, invoice row, summary rail cell, register row — is locked to one 3rem pitch with a hairline under it, so unrelated panels on unrelated pages line up like columns of the same book. (Through 2.1.0 the page ground was ruled at the same pitch; 2.2.0 removed the visible ruling and kept the structure it was tracing.)
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.25.
Grove
A calm Next.js SaaS landing page template for finance and workflow products. Its 26 independent sections share one 3rem ledger pitch across transaction rows, checklists, comparison tables and the month-end register.
const { open, close } = useLedger("2026-03") // 0123456789
- display
- Fraunces
- text
- Instrument Sans
- mono
- IBM Plex 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.
files in the zip
Two independently authored editions: React for applications, plus ready HTML, CSS and vanilla JavaScript for static hosts.
- AGENTS.mdthe theme's own rules, written for an agent
- .claude/skills/4 skills, each one job
- add-page/SKILL.mdCompose a new page for Grove from its existing sections, matching the shell, background rhythm and manifest entries of its ten product routes
- add-section/SKILL.mdAdd a new self-contained section component to the Grove theme following its existing file, token and rhythm patterns, then wire it into a page and the manifest
- check-quality/SKILL.mdRun Grove's source and runtime quality gates: types, build, semantic tokens, neutral-first colour roles, fixture arithmetic, manifest and showcase parity, links, headings, responsive states and accessibility.
- rebrand/SKILL.mdRe-colour Grove by editing its semantic tokens, preserving neutral-first structure, independent interaction and status roles, complete light/dark mappings and computed WCAG evidence.
- src/
- theme.css80 tokens, light and dark
- fonts.tsthe faces, wired to the type tokens
- app/11 files
- components/26 files
- ui/15 files
- assets/9 images, 1 markdown file
- fonts/4 font files, 3 licenses
- app/11 routes, plus layout.tsx and globals.css
- theme.jsonthe manifest: tokens, components, pages
- html/the framework-free edition
- dist/11 compiled routes, deploy-ready — no build step
- src/the Nunjucks source the routes compile from
- scripts/build-html.ts · serve-html.ts — `bun run build:html` / `preview:html`
- README.mdquickstart
- 6 project filespackage.json · tsconfig.json · next.config.ts · postcss.config.mjs · env.d.ts · .gitignore
Your key goes in TAILTHEMES_LICENSE_KEY, and the registry entry goes in components.json. The snippet is on the docs page.
skills your agent can run
Your agent reads AGENTS.md before it edits, then runs the skill that fits the change. The skills are the theme's own, and the publish gate makes an agent complete every one of them in a scratch copy before the theme goes live.
39 components, 11 pages and 80 tokens, as a Next.js project.
AGENTS.md carries the design spec. Each skill is one job written against it.
Claude Code, Codex, or any agent that reads AGENTS.md. It runs on your machine, on your own account.
Built from the theme's own sections, on the same tokens and the same rhythm.
The source is yours to run, edit and deploy.
The spec ships inside the folder, so the page your agent adds next month is built by the same rules as the ten it came with. Nothing calls back here.
What the standard license coversWhat do I actually get?
Does it include the pages I'd otherwise have to build?
Will it work with my stack?
How long before it stops looking like a template?
Can I use it for client work?
A SaaS is two builds, not one.
Grove is the site that sells the product. Appetite is the thing people log into once they have paid — same Tailwind version, same token architecture, so the two halves can be made to look like one company.
activity
- v2.8.2: One sample-content caption per block, a computed close figure, no feature-grid icons and badges that do not wrap.
- v2.8.1: The header's sign-up is a quiet Start trial so the hero holds the only fill, month-end no longer breaks across lines, and two missing spaces are back.
- v2.8.0: The form core goes home — useValidatedForm is deleted and the library it seeded returns as a vendored part
- v2.7.0: The motion fence, and the six recipes a calm theme allows
- v2.6.2: Docs cover the HTML edition, and the check-quality skill lost a version pin that made its own script throw
- v2.6.1: The listing now says which two sample forms end in a success receipt and why the auth form hands off to a real POST
- v2.6: Separate Nunjucks source and framework-free HTML output for every route
- v2.5: Neutral-first customer evidence route with exact sample close arithmetic
- v2.4 — an illustration family on the 48px pitch, three photographs, six card marks
- v2.3 — neutral ramp recast to a 150° sage undertone, both modes
- v2.2 — rules into the ledger, /contact with the drawn map, /privacy, portraits, pricing switch
- v2.1 — /month-end-guide: the prose surface the footer promised
- v2.0 — Fraunces ledger type, ruled-paper signature, ochre accent
- v1.6 — generated paper grain in the hero, token-tinted mask
- v1.5 — token-driven background effects: ruled hero, washed CTA
- v1.4 — /components living styleguide
- v1.2 — signup, sign-in and walkthrough pages; every link resolves
- v1.1 — lucide icon system + polish pass
- v1.0.0 — pricing table people actually read
- testimonial section variantsplanned
- changelog pageplanned
for agents
This listing is also a markdown document and a JSON endpoint. The theme's own agent kit is on the kit and agents plates above.
