Component Library

All shared UI components from @workspace/ui, organised by atomic design principles.

Molecules

Combinations of atoms that form more complex, reusable UI patterns.

Area Chart

90-day activity

Findings trend

Avatar

Sizes

JDJDJD

Fallback

SMJDLG

With badge

JDJD

Group

U1U2U3

Card

Default

Card title

A short description of this card's purpose.

New

Card body content goes here. You can place any element inside.

Simple

Simple card

Minimal card with just a title and content.

Elevation · sm

Resting surface with a soft lift.

Uses --elev-1 shadow.

Elevation · md

Hover / focus state surface.

Uses --elev-2 shadow.

Size · xs · KPI tiles

RUNS · 24H

128+12

PASS RATE

94.2%+0.4

FLAKY

3-1

OPEN

Donut

Risk distribution

Sizes

Field

Vertical (default)

With error

Horizontal

Notifications

FieldSet

Account settings

Pagination

Default

Run Status Badge

Statuses

Pass

Fail

Partial

Running

Queued

Segment

Time range (controlled)

selected: 30d

Sizes

Keyboard

Focus with Tab; arrow keys move + select; Home / End jump to ends.

Select

Default

Small size

Disabled

Severity Badge

Levels

Critical

High

Medium

Low

Info

With custom label

P0 · Blocker

Triage

Sparkline

Tones

Sizes

Stacked Bars

Run distribution

Severities

Status Badge

States

Open

In Progress

Resolved

Won't Fix

Duplicate

Table

Default

Recent QA runs
Run	Environment	Status	Pages	Findings
run-a1	local	pass	12	0
run-a2	staging	fail	18	3
run-a3	production	partial	9	1

Dense · numeric cells + label heads

Last 5 runs · dense tabular layout
Run ID	Env	Elapsed	Pages	Findings
a3f91b02	prod	00:02:14	124	0
7c2e9d41	stage	00:01:48	96	2
e18b4a77	prod	00:03:31	212	7
b9041fc6	dev	00:00:52	41	0
5d27ae83	prod	00:02:07	138	1

Tabs

Default

High-level summary of the selected run.

Organisms

Complex, self-contained UI sections composed of molecules and atoms.

Code BlockJSON (default) {
  "run_id": "qa-2026-04-24-staging-12",
  "status": "partial",
  "started_at": "2026-04-24T18:04:11Z",
  "totals": { "pass": 184, "fail": 18, "skip": 9 }
} 
TypeScript import { Drawer } from "@workspace/ui/components/drawer";

export function FindingDrawer({ id }: { id: string }) {
  // Drawer reuses Sheet's focus trap and Esc handler.
  return <Drawer>{/* ... */}</Drawer>;
} 
Shell # Trigger a QA run via the intechideas plugin
/intechideas:qa --project staging --features findings,runs
# Export the manifest after the run completes
/intechideas:qa-export --run qa-2026-04-24-staging-12 

Dialog

Default

Destructive action

Drawer

Right-side drawer · 720px on sm+

Behavior

Esc closes the drawer (Sheet's built-in handler).
Focus is trapped while open and returns to trigger on close.
Click the overlay or the close button to dismiss.

Sheet

Sides

Sonner (Toast)

Toast variants