ui-036

Atlas Workspace Console UI Kit

A browsable component library for a light, warm workspace app: fifty-nine components on one token file, from buttons and fields to tables, kanban, charts, schedules and overlays, plus four assembled screens, in a porcelain light theme and a deep ink one.

FlipDraggableInertiaPlugin advanced

16 more details

token-themingtheme-switchflip-layoutdragcommand-palettekeyboard-navigationfocus-managementdialog-animationdata-vizcount-upsvg-drawstaggerstate-transitionmicro-interactiontabsfilter

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

View interactive demo: Overview Projects Schedule Settings

Updated 3 September 2026

About this kit

Atlas 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-nine components shown live at product density, grouped into foundations, controls, inputs and forms, navigation, data display, feedback and overlays, sections, and four screens composed from the parts above.

Read the full effect overview

The register is a light, warm workspace: three porcelain grounds that are red-biased rather than grey, a warm near-black ink at four solid steps, hairline borders, and a primary button drawn in ink instead of a brand colour. One chromatic value carries links and the focus ring; everything else that is coloured is a status. A serif appears exactly once in the system, at display size, on the greeting and the four screen titles. The ink theme re-values the same role names, so the two themes are one design rather than two skins.

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 mounts in its final state under reduced motion.

Atlas Workspace Console UI Kit - UI component kit preview

What's included

12 items

Fifty-five components in seven families, plus four assembled screens, 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 the porcelain light theme and the deep ink theme; no component holds a colour of its own
App shell whose rail collapses at every width and on Cmd/Ctrl+B, and becomes bottom tabs on a phone
Portfolio data table with sorting, search, status filters, selection, a bulk bar, density and an empty state
Delivery board that filters and reorders under Flip, and a kanban board that drags on the pointer and on the keyboard
Workload curve with 7d, 30d and 90d controls, metric cards that count up, bar charts and capacity meters
Project inspector as a side panel on desktop and a drag-dismissible bottom sheet on a phone, with focus trap and return
Command menu on Cmd/Ctrl+K whose commands actually act, plus context menu, dropdown, select, combobox and date picker on one shared menu style
Studio sections ready to drop in: page header, settings groups, activity feed, roster, client cards, approval queue, asset grid, review thread and a week schedule
Four assembled screens (overview, projects, schedule, settings) built from the components verbatim and also shipped as standalone pages
Keyboard and ARIA contracts on every control, live announcements for state changes, and reduced-motion end states throughout

Perfect for

4 use cases

A creative studio or agency console for projects, approvals, capacity and the week
A light-mode SaaS product that needs a complete component set on one design system
A client portal or internal operations tool that should feel calm and warm rather than technical
A project management, CRM, content production or admin app that starts from finished tables, boards, forms and schedules

How it works

4 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 is the component in every state a buyer would check, with the studio's own copy rather than placeholder text.

One token file, two themes

Surfaces, ink, lines, accent, status colours, chart series, radii, spacing, control heights, durations and eases are role-named custom properties in one file. The ink theme re-values the same names, so a component never branches on the theme and a rebrand is one edit. Charts read their series colours at runtime and repaint on the kit:theme event.

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 the stacking order. A component only supplies its enter and exit motion, so a dialog inside a drawer inside a command menu behaves like one system.

Screens are composed, not redrawn

The four screens include the component markup verbatim rather than restating it, and their own scripts are glue: a row click opens the inspector with that project's data, the shell's search opens the command menu, the form saves with a toast. Fixing a component fixes it everywhere it appears.

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 in catalogue.css and catalogue.js; nothing in a product needs them.

How do I rebrand it, and is the studio fiction baked in?

Rebranding is editing assets/tokens.css: change the accent, the link colour, the three grounds, the ink ramp or the two faces and every component follows, in both themes, with no component-level overrides. The worked example is a creative studio, but nothing in the layout says so except the words: with copy changed this is a project tool, a client CRM, an internal operations dashboard or a content production desk.

Is there a backend, and do the components hold state?

No backend. Every project, client, person, calendar event, file and approval is sample content in the markup, and the interactions change the page rather than a database: sorting reorders rows, filters really filter, dragging moves a card, approving removes a row and updates the count, the invite form appends a pending row. Wiring it to your data means rendering the same markup from whatever you already have; the scripts initialise any instance they find.

Which framework is it for?

None, by design. Atlas is HTML, one token file of CSS custom properties and plain JavaScript on GSAP, so the delivery board, the schedule and the inspector paste into a static page or a server-rendered app as they are, and into a React, Vue, Svelte or Astro component as markup plus the two bundles. Each script finds its own data-kit attribute and initialises every instance once, so a framework renders the markup and calls the init after mount.

What happens on a phone?

The app shell's sidebar becomes a bottom tab bar, the project inspector becomes a bottom sheet with detents and drag to dismiss, tables, boards and the week calendar scroll sideways inside their own frames, dialogs sit at the bottom of the screen, and hover-only affordances such as row actions also appear on focus and on tap. The catalogue's rail becomes an Index button opening a sheet.

Does anything really drag, and what about the keyboard?

The kanban cards drag between and within columns with GSAP Draggable, with the siblings settling under Flip, and the bottom sheet drags to its detents with inertia. Both have a keyboard route: Space picks up a card, arrows move it, Space drops it, Escape cancels. Nothing else in the kit drags, because faking it would be worse than leaving it out. Every menu, select, tab set, table, slider and picker has its keyboard contract listed in the README.

Paid component kit

Purchase to unlock the code.

Buying Atlas Workspace 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 board and table sort, Draggable and InertiaPlugin for the kanban and the bottom sheet).

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, projects.html, schedule.html, settings.html: the four screens as standalone pages, composed from the same component markup. They link to each other: every rail item, bottom-dock tab, brand mark and account entry is a real href, so middle-click opens a tab and the pages work with JavaScript off. Two of them carry a query the target honours (overview.html?focus=approvals, projects.html?group=client, projects.html?q=<project>, settings.html?tab=people). The collapsed rail and the theme both survive a navigation, so the set reads as one app rather than four demos
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, status and series colour, the type scale, spacing, radii, control heights, durations and eases, in the light and ink themes
assets/base.css: reset, type ramp, the shared primitives (.btn, .input, .kbd, .badge, .avatar, .icon, .card, .menu, .layer) and layout utilities
assets/base.js: window.Kit, the shared runtime: the overlay layer stack, positioning, focus helpers, motion tokens, the theme switch, a live region
assets/icons.svg: the icon sprite, 86 symbols
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

Components

Foundations

The tokens every component reads, so a rebrand is one file.

Component	Folder	Root
Colour roles	`components/colors/`	`assets/tokens.css`
Type ramp	`components/typography/`	`assets/tokens.css`
Icons	`components/icons/`	`assets/icons.svg`
Layout	`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 form that puts them in rows.

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
Date picker	`components/date-picker/`	`[data-kit="date-picker"]`	Arrows move days, Page Up/Down months, Enter picks, Escape
File drop	`components/file-drop/`	`[data-kit="file-drop"]`	Enter opens the picker
Tag input	`components/tag-input/`	`[data-kit="tag-input"]`	Enter adds, Backspace removes, arrows in suggestions
Brief form	`components/form-layout/`	`[data-kit="form-layout"]`	Native

Navigation

The frame around the work 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 menu	`components/command-menu/`	`[data-kit="command-menu"]`	Cmd/Ctrl+K, Up, Down, Enter, Escape
Context menu	`components/context-menu/`	`[data-kit="context-menu"]`	Arrows, Right opens a submenu, Escape

Data display

Tables, boards, meters and charts at the density a working studio needs.

Component	Folder	Root	Keyboard
Data table	`components/data-table/`	`[data-kit="data-table"]`	Space selects, Enter sorts a focused header
Metric cards	`components/stat-tiles/`	`[data-kit="stat-tiles"]`
Workload curve	`components/line-chart/`	`[data-kit="line-chart"]`	Left, Right move the crosshair; arrows on the range control
Bar chart	`components/bar-chart/`	`[data-kit="bar-chart"]`
Progress	`components/progress/`	`[data-kit="progress"]`
Delivery board	`components/project-list/`	`[data-kit="project-list"]`	Arrows move filters, Enter opens a project
Kanban board	`components/kanban/`	`[data-kit="kanban"]`	Space picks up, arrows move, Space drops, Escape cancels
Team capacity	`components/capacity-board/`	`[data-kit="capacity-board"]`
Avatar group	`components/avatar-group/`	`[data-kit="avatar-group"]`
Status and phase	`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
Toast	`components/toast/`	`[data-kit="toast"]`	Escape dismisses the newest
Dialog	`components/dialog/`	`[data-kit="dialog"]`	Escape; focus trapped and returned
Project inspector	`components/drawer/`	`[data-kit="drawer"]`	Escape; focus trapped and returned
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 studio page, ready to drop in.

Component	Folder	Root	Keyboard
Page header	`components/page-header/`	`[data-kit="page-header"]`
Settings group	`components/settings-group/`	`[data-kit="settings-group"]`
Studio activity	`components/activity-feed/`	`[data-kit="activity-feed"]`
Studio roster	`components/team-members/`	`[data-kit="team-members"]`
Client card	`components/client-card/`	`[data-kit="client-card"]`
Approval queue	`components/approval-queue/`	`[data-kit="approval-queue"]`	Enter approves the focused row
Asset grid	`components/asset-grid/`	`[data-kit="asset-grid"]`	Space selects
Review thread	`components/review-thread/`	`[data-kit="review-thread"]`	Enter opens a pin's comment
Week schedule	`components/week-schedule/`	`[data-kit="week-schedule"]`	Left, Right move the day

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"]`
Projects	`components/projects-screen/` and `projects.html`	`[data-kit="projects-screen"]`
Schedule	`components/schedule-screen/` and `schedule.html`	`[data-kit="schedule-screen"]`
Settings	`components/settings-screen/` and `settings.html`	`[data-kit="settings-screen"]`

Moving between the screens

The four screens are separate documents that behave like one app:

Navigation is plain links. Nothing is intercepted except a click on the page you are already on, which paints the active state instead of reloading.
The rail's collapsed state is kept in sessionStorage under atlas-sidebar and restored without a tween, so it does not flicker on arrival. It is never restored at phone width, where the rail is a sheet. A fresh session starts expanded.
The pages declare a cross-document view transition: the sidebar and the top bar are held in place (view-transition-name: kit-sidebar / kit-topbar) and only the content crossfades. It is off under prefers-reduced-motion, and browsers without it simply navigate.
aria-current="page" marks the open page in the rail and in the phone dock.

Themes

Theme is one attribute on the root: <html data-theme="light"> or <html data-theme="ink">. Light is the default. No component branches on the theme; tokens.css re-values the same role names, so the two themes are one design at two sets of values.

Code snippet omitted: it ships with the download.

The switch writes to localStorage under atlas-theme inside a try/catch, and dispatches a kit:theme event on document so anything that reads a colour at runtime (the charts) can re-read it.

Rebranding is editing tokens.css. Change --accent and the primary buttons follow; change --accent-ink and every link and focus ring follows; change the three grounds and the whole surface follows, in both themes, with no component-level override anywhere.

Motion and reduced motion

Durations and eases are tokens (--dur-fast 140ms, --dur-base 220ms, --dur-slow 340ms), read by Kit.dur() and Kit.ease() rather than typed into a component. Under prefers-reduced-motion: reduce, Kit.dur() returns 0 and every component mounts in its final state: the counters show their totals, the chart paths are drawn, the meters are full. Nothing continuous — a shimmer, a progress loop, a chart draw — runs while it is off screen; those are gated with Kit.onVisible(), because fifty-nine components share one page.

Keyboard contract

Every overlay in the kit opens through one layer stack in base.js, which owns Escape, the focus trap, focus return, the scroll lock and the stacking order. A component only supplies its enter and exit motion.

Surface	Keys
Command menu	`Cmd/Ctrl+K` opens, Up/Down move, Enter runs, Escape closes
App shell	`Cmd/Ctrl+B` collapses the rail; a visible toggle exists at every width
Dialog, project inspector, bottom sheet	Escape closes; focus is trapped while open and returned to the trigger
Popover, dropdown, context menu, select, combobox	Arrows move, Enter picks, Escape closes, outside press dismisses; Right opens a submenu
Data table	Space selects the focused row, Enter sorts a focused header
Kanban	Space picks up a card, arrows move it, Space drops, Escape cancels
Tabs, segmented control, week schedule	Left/Right, Home/End
Slider	Arrows, Home/End, Page Up/Page Down
Date picker	Arrows move days, Page Up/Down move months, Enter picks
Catalogue rail	`/` focuses the search, Escape clears it

The per-component keyboard contract is in the table above under Components.

What is demo-only

assets/catalogue.css and assets/catalogue.js are the library page's own chrome: the rail, the search, the specimen frames and the phone index sheet. Nothing in a product needs them.
thumbnail.html is a build-only capture frame and is not part of the kit.
Nothing is fetched and nothing is saved. Every project, client, person, event, file and approval is sample content in the markup, and the interactions change the page rather than a database: sorting reorders rows, dragging moves a card, approving removes a row, the invite form appends a pending row. Wiring it to your data means rendering the same markup from whatever you already have.
Nothing drags unless it says it drags: the kanban cards and the bottom sheet do, on the pointer and on the keyboard. Nothing else does.

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