Make it yours
npx shadcn@latest add https://elabs-ai.com/r/revenue-ops-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 "Revenue Operations" (revenue-ops-page) to this project — a whole screen copied into the app, built from registry blocks and the @elabs-ai/components-* packages. A revenue team opens Monday with the number against plan. The period and region controls re-slice every chart and the pipeline below; a stalled deal is flagged from its own activity, and the analyst in the dock answers in the numbers on screen. 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: @elabs-ai/components-charts, @elabs-ai/components-data, @elabs-ai/components-icons, @elabs-ai/components-tokens, @elabs-ai/components-ui. 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/revenue-ops-page.json` — it brings its blocks with it (command-center-revenue-01, workspace-shell); 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 each view shows
The screens the navigation names, one line each.
- Revenue desk
- Revenue against plan, by segment and week, as one command center.
- Pipeline
- Every open deal with win probability, activity trend and a stalled flag.
- Forecast
- The quarter's forecast with its confidence band.
- Targets
- Targets per team and how far each is from them.
- Accounts
- The accounts behind the pipeline.
- People
- Owners, quotas and attainment.
- Reports
- Saved views the team shares.
Try it on the screen above: Change the period or the region in the header and watch the charts and the pipeline re-slice; select pipeline rows to act on them together.
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.
2 blocks
How is the quarter going, and what decides it?
A revenue desk in one block: a MetricGrid of four headline numbers that each name their baseline and carry a 13-week Sparkline, a ComposedChart of weekly revenue with its trailing average against a labelled plan rule, a donut PieChart of the service-line mix, a BumpChart of which line is climbing, and the accounts that decide the quarter with a Meter each. Container-query layout, so it holds in a dashboard column and on a full page.