Make it yours
npx shadcn@latest add https://elabs-ai.com/r/product-landing-page.jsonPaste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui template "Product Landing" (product-landing-page) to this project — a whole screen copied into the app, built from registry blocks and the @elabs-ai/components-* packages. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Make sure the base is in place: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui`), then the packages the template imports: . If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 3. Copy the template in with `npx shadcn@latest add https://elabs-ai.com/r/product-landing-page.json` — it brings its blocks with it (marketing-bento-01, marketing-cta-02, marketing-features-03, marketing-hero-02, marketing-logos-01, marketing-stats-02, marketing-testimonials-02, site-frame); if that url does not answer, copy the folders from https://github.com/mreimitz/elabs-components/tree/main/registry/blocks instead. 4. Mount the page at a route, keep its `WorkspaceShell` frame, and replace the seeded data with ours: [the route, the real data source, and what should change from the template] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
What it is made of
The blocks and packages the template composes — each has its own page. Copy the template and you copy the blocks with it.
8 blocks
A BentoGrid of product proof where each tile shows the thing: a live AreaChart, a Meter, a Sparkline, status badges.
What do I do next, and is anyone else doing it?
The closing ask as a full-width band on the primary plate: a headline, one thing to do, one quieter alternative, and a proof card with a live number and its two-week trend on a sparkline. The band’s gradient comes from the primary tokens, so it re-tints with every theme.
How do I let visitors explore features one at a time?
A tabbed feature explorer: features down the left with a glyph and a one-liner, the chosen one rendered live on the right — a work board, an assistant conversation and metric tiles. Arrow keys move through the list; it stacks above the preview when narrow.
What does the product actually look like?
A split hero: the claim, two calls to action and a row of trust facts beside the product itself — KPI tiles, a live area chart and a service status list inside a browser frame, built from real components rather than a screenshot.
Who else uses this?
A logo cloud of text wordmarks in distinct typographic voices, muted until hovered — as a wrapping grid or a looping marquee that pauses on hover and focus and stands still under reduced motion, with an optional stat line.
How big is this, really?
Four very large numbers with unit, one line of meaning and a twelve-month sparkline each, tied together by a headline sentence. Trends that improved or worsened say so with a glyph and a word, never colour alone.
What did one customer actually say?
One customer at a time at full size: the quote, who said it, the company wordmark, their rating and the number the quote is about. Previous, next, the dots and the arrow keys move between quotes; the strip of wordmarks jumps straight to a customer. Nothing advances on its own, and the quote is announced politely when it changes.