Make it yours
npx shadcn@latest add https://elabs-ai.com/r/control-tower-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 "Logistics Control Tower" (control-tower-page) to this project — a whole screen copied into the app, built from registry blocks and the @elabs-ai/components-* packages. An operations team keeps this screen open all day. The headline counts the promises at risk; the map shows the network and the fleet; the exceptions table is sorted by the promise that breaks first, and a row opens the shipment with its recommended next step. 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-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/control-tower-page.json` — it brings its blocks with it (geo-fleet-tracker-01, geo-network-map-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.
- Overview
- The headline, the network map and the exceptions table.
- Exceptions
- Every late or at-risk shipment, closest promise first.
- Shipments
- All shipments in flight.
- Fleet
- Vehicles and vessels, live on the map.
- Lanes
- The lanes the network runs and their reliability.
- Depots
- Depots and their load.
- Inventory
- Stock per depot.
Try it on the screen above: Click an exception: the dock opens with the shipment's details, the recommended next step and its journey as a timeline.
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.
3 blocks
Where is everyone, and who is late?
A fleet where it is: each vehicle's planned route as a dashed MapRoute, the part already driven solid, the vehicle's MapMarker at the join and the depot marked; the list shows stops done on a Meter and minutes against plan, and selecting a vehicle fades the others.
Where does the volume flow, and which lane is late?
A network on the map it runs on: MapCanvas in globe projection with one MapArc per lane, its width bound to volume through a paint expression, hubs as MapMarkers with tooltips, and a panel that ranks the lanes with a Meter and calls out the late ones. Selecting a lane on the map or in the list dims the rest and redraws that arc heavier.