Make it yours
npx shadcn@latest add https://elabs-ai.com/r/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 "Landing" (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/landing-page.json` — it brings its blocks with it (marketing-banner-01, marketing-cookie-banner-01, marketing-cta-01, marketing-faq-01, marketing-features-01, marketing-features-02, marketing-hero, marketing-pricing-01, marketing-stats-01, marketing-testimonials-01, 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.
11 blocks
How do I announce something above the site?
An announcement bar for a release, an offer or a maintenance window, each with its own glyph, colour and leading word, with a link, an optional deadline and a dismiss button; sits above the navigation or stays pinned with sticky.
Which cookies may we set?
Cookie consent that treats the visitor as an adult: two sentences on what the cookies do, then Accept all, Reject non-essential and Manage side by side, none hidden or greyed. Manage opens a dialog with one switch per category, Essential visibly locked on and a running count of what is on; the block reports the decision through onDecision and hides itself. Default and compact variants, fixed to the viewport or sticky in its container.
The closing ask: one primary action, one quieter alternative and what trying it costs.
How do I show a feature rather than describe it?
Three zig-zag feature rows, copy on one side and the feature on the other: a runs table with status badges, a run timeline and a card of sparklines — the product, not a picture of it. Rows stack below the 2xl container width.
Three plans named for who they are for, a billing toggle that recomputes every price, locale-aware currency and a featured plan marked in words.