Ops Console UI Kit
Thirteen dashboard components on one design system: charts, a sortable table, a command bar, overlays and a live feed, in light and dark, from a single token file.
About This Kit
An operations console built as a kit rather than a page: thirteen components that share one token file, so any two of them dropped into a real product agree about surface, ink, radius, spacing and motion. That is the point of it. Buying thirteen separate components gets you thirteen different design languages; this gets you one.
Read the full effect overview
Every colour, radius, spacing step, duration and ease is a role-named custom property in tokens.css. No component hardcodes a value and none branches on the theme, so light and dark are one attribute on the root and a full re-skin is one file. The console is incident-and-on-call shaped, and re-points to any SaaS admin by changing the copy.
What's Included
- Thirteen components on one token file: change the file, re-skin the kit
- Light and dark from a single attribute, with no theme branch in any component
- App frame: collapsible sidebar, top bar, off-canvas navigation on mobile
- Stat tiles with odometer counts, delta chips and drawn sparklines
- Area chart with a tracking crosshair and a range switch that re-tweens between datasets
- Stacked bar chart whose legend re-lays the stack with Flip
- Radial gauge that springs to value and crosses colour at thresholds
- Sortable incidents table: Flip row re-order, measured row expand, bulk selection bar
- Activity feed with live arrivals that push rather than jump, and a N-new pill
- Command bar on Cmd/Ctrl+K with fuzzy filtering and a sliding highlight
- Filter bar with a measured sliding indicator and animated chip removal
- Drawer, confirm modal and toasts sharing a layer stack and a refcounted scroll lock
- Skeleton loading states that crossfade into real content
Perfect For
- Internal dashboards and admin consoles that need to look designed, not assembled
- Incident, on-call and operations tooling
- SaaS analytics surfaces where charts and tables sit side by side
- A house design system to build the rest of an app against
How It Works
One token file is the product
Every component reads role-named custom properties from tokens.css and nothing else: --surface-raised, not --grey-800. That is what makes the set cohere, rather than a promise that it does. It also means a re-skin is one file, and a new component joins the kit by reading the same names.
Themes without theme branches
A data-theme attribute on the root swaps token values only. No component contains a theme conditional; where JavaScript needs a colour for an SVG stroke, it reads it with getComputedStyle at draw time and re-reads it on the kit:theme event the shell dispatches. Adding a third theme is a block of custom properties and no JavaScript.
Components that compose
Each component is its own stylesheet and module, registers a namespaced API on window.opsConsoleKit, and reports what it does through kit:* events. The overlays share a layer stack, so Escape closes only the top and the scroll lock is refcounted rather than released by whichever layer closed first. Take three components or take all thirteen; nothing depends on the console's own markup.
