ui-035

Ops Console UI Kit

A browsable component library for building an operations console: fifty-eight components on one token file, from buttons and fields to charts, gauges, an incidents table, a log viewer and four assembled screens, dark and light.

FlipDraggableInertiaPlugin advanced

16 more details

token-themingtheme-switchdata-vizcount-upsvg-drawflip-layoutdragcommand-palettekeyboard-navigationfocus-managementdialog-animationstaggerstate-transitionmicro-interactiontabsfilter

The kit's assembled screens, full window and fully interactive:

View interactive demo: Overview Incidents Services Settings

Updated 3 September 2026

About this kit

Ops Console is a component library rather than a demo of one dashboard. The page you see is the library itself: an index down the left, a search that filters it, and fifty-eight components shown live at instrument-panel density, grouped into foundations, controls, inputs, navigation, data display, feedback and overlays, sections, and four screens composed from the parts above.

Read the full effect overview

The register is a dark operations surface. Chrome sits darker than the canvas it frames so the panels read as the lit surface; controls are 34px and data rows are 26px, and that gap between chrome density and data density is the whole look. Two accent roles do the work of one: --accent is the interactive colour and stays legible as text in both themes, while --signal is the block colour, reserved for what is live or what you can press, so a screen full of readings still has exactly one bright thing on it. Data gets its own cool series ramp so a reading never competes with the signal, and every number is set in a mono face with tabular figures so a column never jitters as it animates.

Each component ships in its own folder with its markup, its stylesheet and its script, so you can take one part or link the two bundled files and take everything. Overlays share one Escape, one focus trap and one scroll lock; motion is short, layered product motion with GSAP, and every animated part has a reduced-motion end state.

Ops Console UI Kit - UI component kit preview

What's included

14 items

Fifty-eight components in eight families, each in its own folder with markup, styles and script
A searchable catalogue page with an index rail, family groups and a theme toggle
One token file driving dark and light; two accent roles, so the signal colour means live or pressable and nothing else
App shell with a sidebar that collapses at every width, Cmd/Ctrl+B, and off-canvas navigation on a phone
Stat tiles with odometer counts and drawn sparklines, and an area chart with a tracking crosshair and a range switch that re-tweens its data
Stacked bar chart whose legend re-lays the stack with Flip, and a radial gauge that springs to value and crosses colour at its thresholds
Incidents table with Flip row re-order, measured row expand, selection with a bulk bar and a sticky header
Service status list with 30-day uptime strips, a streaming log viewer, an on-call rota and a deploy timeline
Command bar on Cmd/Ctrl+K whose commands actually act: switching theme, opening a dialog, jumping to a component
Dialog, drawer, bottom sheet, popover, dropdown, context menu, tooltip and a toast queue sharing one overlay layer
Sections ready to drop in: page header, filter bar, metric picker, settings groups, activity feed with live arrivals, team and escalation
Four assembled screens (overview, incidents, services, settings) built from the components verbatim, each also a standalone page
Keyboard and ARIA contracts on every control, with live announcements for anything that changes without a click
Reduced-motion end states throughout; nothing animates or streams while off screen

Perfect for

4 use cases

Monitoring, observability and incident tooling that has to look designed rather than assembled
An internal admin console or operations dashboard for a SaaS product
A logistics, fleet or trading operations surface where charts, tables and status sit side by side
A house design system to build the rest of an internal app against, where the token file is the deliverable

How it works

3 sections

The library is the page

The catalogue is generated from the component folders, so what you browse is exactly what you download. The rail lists every component by family, the search filters both the rail and the specimens, and each specimen shows the component in every state a buyer would check, with the console's own copy rather than placeholder text.

One token file, two accent roles

Surfaces, ink, lines, status, the data series ramp, type roles, spacing, radii, control heights, durations and eases are role-named custom properties in one file. Two of those names carry the design: --accent is the interactive colour and must stay legible as text, so it darkens to a deep olive in the light theme, while --signal is the block colour that marks what is live or pressable and keeps its hue across themes but not its luminance. Nothing decorative wears it, which is why it still reads as a signal.

One overlay contract

Everything that opens over the page goes through a shared layer stack in the base script, which owns Escape, the focus trap, focus return, the scroll lock and stacking order. A component supplies only its enter and exit motion, so a dialog opened from inside a drawer behaves like one system rather than two.

Plugins Flip, Draggable, InertiaPlugin

Difficulty Advanced

Includes Every component in its own folder of markup, styles and script, the assembled screens, the two bundles, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this component kit's demo (5 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility: 100
Best practices: 100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this component kit

Can I take one component without the rest?

Yes. Each component lives in its own folder with its markup, its stylesheet and, where it needs one, its script. To use one part you link tokens.css, base.css and base.js, then that folder's files, and paste the fragment. To use everything you link the two bundled files instead. The catalogue page, its rail and its search are demo furniture; nothing in a product needs them.

How do I put it in our own brand colours?

Edit assets/tokens.css. Every colour, radius, spacing step, duration and ease is a role name in that one file, no component holds a colour literal, and none of them branch on the theme, so the whole kit follows the values you change in both themes at once. The one thing to keep is the split between --accent and --signal: the first has to stay legible as text, the second is a block colour that always carries --signal-ink. A third theme is a copied block of properties with no JavaScript to write.

Is any of it connected to real data?

No, and there is no backend. Every service, incident, log line, deploy and rota entry is sample content in the markup, and nothing is fetched. Sorting reorders rows, filtering hides them, the log viewer's arrivals are a timer you can stop, and the charts read their datasets from an attribute. Wiring it to your own data means rendering the same markup from whatever you already have; each script finds every instance of its component by a data attribute and initialises it once.

Is the console usable without a mouse?

Yes, and on an operations surface that matters more than the animation does. The table sorts from its headers and reports the order to assistive technology, expandable rows say what they control, the command bar is a real combobox on Cmd/Ctrl+K, the chart crosshair steps with the arrow keys into a live region, the gauge is a meter with a value text, and every overlay traps focus and hands it back to whatever opened it. The keyboard contract for each component is listed in the README.

Which framework is it for?

None. It is HTML, CSS custom properties and plain JavaScript with GSAP, so it drops into a static page, a server-rendered app, or a React, Vue, Svelte or Astro component as markup and classes. The scripts find their components by a data attribute and initialise each instance once, so rendering the markup from a framework and running the init after mount is enough.

What happens on a phone?

The app shell's sidebar goes off-canvas behind a scrim and a five-item tab bar appears at the bottom, tables and the rota scroll or restack rather than shrinking, dialogs sit at the bottom of the screen, the bottom sheet is built for touch with drag to dismiss, and hover-only affordances such as row actions also appear on focus and on tap. The catalogue's own rail becomes an Index button opening a sheet.

What is demo-only, and what would I actually ship?

assets/catalogue.css and assets/catalogue.js are the library page's chrome: the rail, the search, the family headings and the specimen frames. index.html and the four screen pages are generated from the component folders. What you ship is tokens.css, base.css, base.js, the icon sprite and whichever component folders you use, or the two bundles if you want the lot.

Paid component kit

Purchase to unlock the code.

Buying Ops Console UI Kit opens every component as its own folder of markup, styles and script, the assembled screens and both bundles, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£25 Standard license, unlimited projects

Browse UI elements

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

There are two ways in. Both need GSAP (core; Flip for the table and bar chart, Draggable and InertiaPlugin for the bottom sheet and the escalation reorder).

Everything, two files. In <head>:

Code snippet omitted: it ships with the download.

At the top of <body>, paste the contents of assets/icons.svg once (it is an SVG sprite; the icons reference it with <use href="#i-name">). Before </body>:

Code snippet omitted: it ships with the download.

Then copy any component's fragment from components/<name>/specimen.html into your page.

One component. Link assets/tokens.css, assets/base.css and the component's components/<name>/style.css; load GSAP, assets/base.js and the component's components/<name>/script.js; paste its specimen.html. tokens.css, base.css and base.js are required by everything; a component's own files are all it adds.

The scripts find every instance of their component by its data-kit attribute and initialise each once, so the same fragment can appear as many times as you need. If you render the markup from a framework, call the init after mount (each script is an IIFE that runs on DOMContentLoaded or immediately if the DOM is already parsed; reloading it, or dispatching a synthetic DOMContentLoaded, initialises anything new).

What's Included

index.html: the catalogue, every component assembled. Generated from components/ and kit.json; the rail and search are demo furniture
overview.html, incidents.html, services.html, settings.html: the four screens as standalone pages, generated from the same component markup
kit.json: the manifest: families, components, their root selectors and keyboard contracts
components/<name>/: one folder per component: specimen.html (the fragment), style.css, script.js
assets/tokens.css: the design system: every surface, ink, line, accent, signal, status and series colour, the three type roles, spacing, radii, control heights, durations and eases, in two themes
assets/base.css: reset, the type ramp, the shared primitives (.btn, .input, .kbd, .tag, .dot, .avatar, .icon, .card, .menu, .layer, .num) and the layout utilities
assets/base.js: window.Kit, the shared runtime: the overlay layer stack, positioning, focus helpers, motion tokens, a live token reader for charts, the theme switch, a live region
assets/icons.svg: the icon sprite
assets/style.css and assets/script.js: the two bundles, generated from the files above
assets/catalogue.css and assets/catalogue.js: the catalogue page chrome only; not needed in a product

The Token File Is the Product

Every component reads role-named custom properties from tokens.css and nothing else — --surface-raised, never --grey-800. That is the mechanism that makes fifty-eight components look like one product instead of fifty-eight.

Two accent roles, not one. --accent is the interactive colour and has to stay legible as text, so it darkens to a deep olive in the light theme. --signal is the block colour, always carrying --signal-ink, and reserved for what is live or pressable: the primary button, the brand mark, the active nav bar, the live dot. Nothing decorative wears it, which is why it still reads as a signal on a screen full of data. It keeps its hue across themes but not its luminance, because a neon block on a light ground gives the eye no edge to catch and no ink dark enough to sit on it. Data has its own ordered --series-* ramp, deliberately cool, so a reading never competes with the signal.

Three type roles. --font-display (Space Grotesk) is spent on the brand and page titles only; --font-ui (Instrument Sans) carries the interface; --font-mono (JetBrains Mono) carries every number and micro-label, with tabular figures set on body so an animating value never shifts the text beside it. The .num class is the one to reach for on a value.

Two densities. Controls are --control-h (34px); data rows are --row-h (26px). The gap between chrome density and data density is the instrument-panel register, and closing it is what makes a console look like a marketing page.

If you need a value the kit does not have, add it to tokens.css with a name that says its role, not its value.

Components

Foundations

The tokens every component reads, so a re-skin is one file.

Component	Folder	Root
Colour roles	`components/colors/`	`assets/tokens.css`
Type roles	`components/typography/`	`assets/tokens.css`
Icons	`components/icons/`	`assets/icons.svg`
Layout and density	`components/layout/`	`assets/base.css`

Controls

The things a hand rests on. Every one has a keyboard route and a disabled state.

Component	Folder	Root	Keyboard
Button	`components/button/`	`.btn`	Enter, Space
Icon button	`components/icon-button/`	`.btn--icon`	Enter, Space
Switch	`components/switch/`	`[data-kit="switch"]`	Space
Checkbox and radio	`components/checkbox-radio/`	`[data-kit="checkbox-radio"]`	Space; arrows in a radio group
Segmented control	`components/segmented-control/`	`[data-kit="segmented-control"]`	Left, Right, Home, End
Select	`components/select/`	`[data-kit="select"]`	Up, Down, type-ahead, Enter, Escape
Combobox	`components/combobox/`	`[data-kit="combobox"]`	Up, Down, Enter, Escape
Slider	`components/slider/`	`[data-kit="slider"]`	Arrows, Home, End, Page Up, Page Down

Inputs and forms

Fields with their hints and errors, and the forms an operator actually fills in.

Component	Folder	Root	Keyboard
Text field	`components/text-field/`	`[data-kit="text-field"]`	Native
Search field	`components/search-field/`	`[data-kit="search-field"]`	/ focuses, Escape clears
Time range	`components/time-range/`	`[data-kit="time-range"]`	Arrows move days, Page Up/Down months, Enter picks, Escape
Tag input	`components/tag-input/`	`[data-kit="tag-input"]`	Enter adds, Backspace removes, arrows in suggestions
Form layout	`components/form-layout/`	`[data-kit="form-layout"]`	Native
Alert rule	`components/alert-rule-form/`	`[data-kit="alert-rule-form"]`	Native

Navigation

The frame around the console and the ways through it.

Component	Folder	Root	Keyboard
App shell	`components/app-shell/`	`[data-kit="app-shell"]`	Cmd/Ctrl+B collapses the rail
Sidebar navigation	`components/sidebar-nav/`	`[data-kit="sidebar-nav"]`	Up, Down, Enter
Top bar	`components/top-bar/`	`[data-kit="top-bar"]`	Native
Tabs	`components/tabs/`	`[data-kit="tabs"]`	Left, Right, Home, End
Breadcrumbs	`components/breadcrumbs/`	`[data-kit="breadcrumbs"]`	Native
Pagination	`components/pagination/`	`[data-kit="pagination"]`	Native
Command bar	`components/command-bar/`	`[data-kit="command-bar"]`	Cmd/Ctrl+K, Up, Down, Enter, Escape
Context menu	`components/context-menu/`	`[data-kit="context-menu"]`	Arrows, Right opens a submenu, Escape

Data display

Charts, gauges, tables and log lines at the density an instrument panel needs.

Component	Folder	Root	Keyboard
Stat tiles	`components/stat-tiles/`	`[data-kit="stat-tiles"]`
Area chart	`components/area-chart/`	`[data-kit="area-chart"]`	Left, Right move the crosshair
Bar chart	`components/bar-chart/`	`[data-kit="bar-chart"]`
Radial gauge	`components/radial-gauge/`	`[data-kit="radial-gauge"]`
Progress	`components/progress/`	`[data-kit="progress"]`
Incidents table	`components/incidents-table/`	`[data-kit="incidents-table"]`	Space selects, Enter sorts a focused header, Enter expands a row
Service status	`components/service-list/`	`[data-kit="service-list"]`	Up, Down, Enter opens
Log viewer	`components/log-viewer/`	`[data-kit="log-viewer"]`	Up, Down move the cursor line, f toggles follow
On-call rota	`components/oncall-rota/`	`[data-kit="oncall-rota"]`
Deploy timeline	`components/deploy-timeline/`	`[data-kit="deploy-timeline"]`
Avatar group	`components/avatar-group/`	`[data-kit="avatar-group"]`
Status and severity	`components/status-badge/`	`[data-kit="status-badge"]`

Feedback and overlays

Everything that opens over the page shares one Escape, one focus trap and one scroll lock.

Component	Folder	Root	Keyboard
Dialog	`components/dialog/`	`[data-kit="dialog"]`	Escape; focus trapped and returned
Incident drawer	`components/drawer/`	`[data-kit="drawer"]`	Escape; focus trapped and returned
Toast queue	`components/toast/`	`[data-kit="toast"]`	Escape dismisses the newest
Bottom sheet	`components/bottom-sheet/`	`[data-kit="bottom-sheet"]`	Escape
Popover	`components/popover/`	`[data-kit="popover"]`	Escape, outside press
Dropdown menu	`components/dropdown-menu/`	`[data-kit="dropdown-menu"]`	Arrows, Enter, Escape, type-ahead
Tooltip	`components/tooltip/`	`[data-kit="tooltip"]`	Focus shows
Banner	`components/banner/`	`[data-kit="banner"]`	Native
Empty state	`components/empty-state/`	`[data-kit="empty-state"]`
Skeleton	`components/skeleton/`	`[data-kit="skeleton"]`

Sections

Whole blocks of a console page, ready to drop in.

Component	Folder	Root	Keyboard
Page header	`components/page-header/`	`[data-kit="page-header"]`
Filter bar	`components/filter-bar/`	`[data-kit="filter-bar"]`	Left, Right on the range switch
Metric picker	`components/metric-picker/`	`[data-kit="metric-picker"]`	Up, Down, Enter
Settings group	`components/settings-group/`	`[data-kit="settings-group"]`
Activity feed	`components/activity-feed/`	`[data-kit="activity-feed"]`
Team and escalation	`components/team-members/`	`[data-kit="team-members"]`

Screens

Four pages composed from the components above, markup reused verbatim.

Component	Folder	Root
Overview	`components/overview-screen/` and `overview.html`	`[data-kit="overview-screen"]`
Incidents	`components/incidents-screen/` and `incidents.html`	`[data-kit="incidents-screen"]`
Services	`components/services-screen/` and `services.html`	`[data-kit="services-screen"]`
Settings	`components/settings-screen/` and `settings.html`	`[data-kit="settings-screen"]`

Themes

Dark is the default. The light theme is one attribute on the root:

Code snippet omitted: it ships with the download.

Kit.theme.set('light') does the same at runtime, remembers the choice in localStorage inside a try/catch, and dispatches kit:theme on document so anything holding a colour in JavaScript (the gauge does) can re-read it:

Code snippet omitted: it ships with the download.

Only token values change between themes. No component contains a theme conditional, so a third theme is a copied block of custom properties and no JavaScript.

Rebranding

Edit assets/tokens.css. The two accent roles are the ones with a job; the surface stack, the four-step ink ramp, the hairlines and the status colours are each a handful of values per theme, and the series ramp is six. The faces are --font-display, --font-ui and --font-mono; sizes and weights are the --text-* and --weight-* steps. Nothing else in the kit holds a colour, a radius or a duration, so there is nowhere else to look.

Motion and reduced motion

Durations and eases are tokens (--dur-fast, --dur, --dur-slow, --ease-out, --ease-inout, --ease-spring, --ease-back) read by both CSS and, through Kit.dur() and Kit.ease(), by the scripts. Under prefers-reduced-motion, Kit.dur() returns 0 so every tween lands in its end state, decorative loops (shimmer, indeterminate progress, the live dot) stop, and nothing on the page animates continuously. Anything that animates or streams on enter is gated with Kit.onVisible() so it only runs while on screen — the catalogue is one page holding every component at once.

Overlays and the keyboard

Everything that opens over the page (dialog, drawer, bottom sheet, popover, dropdown, context menu, select, combobox, time range, command bar, tooltip) opens through Kit.layer.open(). The layer stack owns Escape (closes the topmost), the focus trap for modal layers, focus return to the trigger, the scroll lock, and outside-press dismissal for non-modal layers. The scroll lock is refcounted and applied to the root element only, so closing a dialog while a drawer is still open does not unlock the page, and no sticky rail un-sticks while a layer is open. A component supplies only its enter and exit motion. The per-component keyboard contract is in the Components table above.

Requirements

GSAP 3.12+ (built against 3.15.0); Flip, Draggable and InertiaPlugin are loaded from the same CDN
Modern browsers with CSS custom properties, position: sticky, IntersectionObserver and :focus-visible
No build step and no framework

Demo-only files

assets/catalogue.css, assets/catalogue.js, and the rail, search and specimen frames in index.html exist so the catalogue can be browsed. Nothing in a product needs them. The four screen pages are real pages built from the components, so they are worth reading, but the components are the deliverable.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.