Command Center
Show how a dashboard might work inside a landing page, with five tabs for overview, quality, transforms, audit, and exports.
- Dependencies
- motion
- Size
- 586 lines
- Controls
- 8 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/command-center.json1 · Dependencies
npm install motion2 · Copy the source
components/onycx/command-center.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the command-center.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| product / productCaption | string | "CleanIQ" / "Data ops" | Sidebar brand block; product also names the AI actor in the audit log. |
| title | string | "CleanIQ Command Center" | Mono title-bar label, shown from 640px. |
| dataset | string | "customers_q4.csv" | File name above the overview audit table. |
| score | number | 97.8 | Value in the overview pill ("97.8 QUALITY SCORE"). |
| accuracy | number | 97 | Accuracy ring value, 0–100. |
| defaultTab | "Overview" | "Quality" | "Transform" | "Audit" | "Exports" | "Overview" | Initially selected tab. |
| accent / accentInk | string | "#ffffff" / "#000000" | The single colour on the monochrome window and the text colour on its solid fills. |
| ctaLabel / ctaHref | string | "New Export" / "#" | The pill link in the Exports panel header. |