Component gallery

CodeBlock

Stored text and code as a titled block: language label, line numbers, and a copy affordance in the header.

Default

JSON coloring, copy button on
{
  "part": "BRK-2214",
  "status": "active",
  "fitment": ["2019 F-150", "2020 F-150"],
  "price": 84.5
}

Plain text

language=text shows the source verbatim, no highlighting
Every showcase page prints its source through this component.
The copy button copies the code verbatim, not the colored text.

Export payload with line numbers

title sets in mono, subtitle names where the code came from
parts/BRK-2214.jsonFrom the export payload
{
  "part": "BRK-2214",
  "status": "active",
  "fitment": ["2019 F-150", "2020 F-150"],
  "price": 84.5
}

TSX snippet

Keywords, strings, JSX tags and a comment all color
components/JobRow.tsxKeywords, strings, JSX tags and the comment all color
import { Button, StatusPill } from "@versable-git/ui";
// One row of the workspace Jobs table. status drives the pill color;
// the re-run action only shows once a job has actually failed.
export function JobRow({ job }: { job: DemoJob }) {
  return (
    <tr>
      <td className="font-mono text-xs">{job.id}</td>
      <td>{job.catalog}</td>
      <td>
        <StatusPill status={job.status} label={job.statusLabel} />
      </td>
      <td>
        {job.status === "err" && (
          <Button size="xs" variant="text" shade Icon="Refresh" content="Re-run" />
        )}
      </td>
    </tr>
  );
}

Raw API response

title names the request path, toggling to minified keeps the header
GET /api/parts/BRK-2214Toggle between pretty-printed and minified
{
  "sku": "BRK-2214",
  "title": "Wagner ThermoQuiet Ceramic Brake Pad Set",
  "partType": "Disc Brake Conversion Kits",
  "status": "active",
  "attributes": {
    "boltPattern": "5 x 4.5",
    "finish": "Black",
    "material": "Aluminum"
  },
  "fitment": [
    "2019 F-150",
    "2020 F-150",
    "2021 F-150"
  ],
  "price": 84.5,
  "updatedAt": "2026-08-12T14:02:00Z"
}

Bounded height

A 4,000-line document cannot push the page chrome off-screen
line 1: the body scrolls inside itself past maxHeight
line 2: the body scrolls inside itself past maxHeight
line 3: the body scrolls inside itself past maxHeight
line 4: the body scrolls inside itself past maxHeight
line 5: the body scrolls inside itself past maxHeight
line 6: the body scrolls inside itself past maxHeight
line 7: the body scrolls inside itself past maxHeight
line 8: the body scrolls inside itself past maxHeight
line 9: the body scrolls inside itself past maxHeight
line 10: the body scrolls inside itself past maxHeight
line 11: the body scrolls inside itself past maxHeight
line 12: the body scrolls inside itself past maxHeight
line 13: the body scrolls inside itself past maxHeight
line 14: the body scrolls inside itself past maxHeight
line 15: the body scrolls inside itself past maxHeight
line 16: the body scrolls inside itself past maxHeight
line 17: the body scrolls inside itself past maxHeight
line 18: the body scrolls inside itself past maxHeight
line 19: the body scrolls inside itself past maxHeight
line 20: the body scrolls inside itself past maxHeight
line 21: the body scrolls inside itself past maxHeight
line 22: the body scrolls inside itself past maxHeight
line 23: the body scrolls inside itself past maxHeight
line 24: the body scrolls inside itself past maxHeight
line 25: the body scrolls inside itself past maxHeight
line 26: the body scrolls inside itself past maxHeight
line 27: the body scrolls inside itself past maxHeight
line 28: the body scrolls inside itself past maxHeight
line 29: the body scrolls inside itself past maxHeight
line 30: the body scrolls inside itself past maxHeight
line 31: the body scrolls inside itself past maxHeight
line 32: the body scrolls inside itself past maxHeight
line 33: the body scrolls inside itself past maxHeight
line 34: the body scrolls inside itself past maxHeight
line 35: the body scrolls inside itself past maxHeight
line 36: the body scrolls inside itself past maxHeight
line 37: the body scrolls inside itself past maxHeight
line 38: the body scrolls inside itself past maxHeight
line 39: the body scrolls inside itself past maxHeight
line 40: the body scrolls inside itself past maxHeight
line 41: the body scrolls inside itself past maxHeight
line 42: the body scrolls inside itself past maxHeight
line 43: the body scrolls inside itself past maxHeight
line 44: the body scrolls inside itself past maxHeight
line 45: the body scrolls inside itself past maxHeight
line 46: the body scrolls inside itself past maxHeight
line 47: the body scrolls inside itself past maxHeight
line 48: the body scrolls inside itself past maxHeight
line 49: the body scrolls inside itself past maxHeight
line 50: the body scrolls inside itself past maxHeight
line 51: the body scrolls inside itself past maxHeight
line 52: the body scrolls inside itself past maxHeight
line 53: the body scrolls inside itself past maxHeight
line 54: the body scrolls inside itself past maxHeight
line 55: the body scrolls inside itself past maxHeight
line 56: the body scrolls inside itself past maxHeight
line 57: the body scrolls inside itself past maxHeight
line 58: the body scrolls inside itself past maxHeight
line 59: the body scrolls inside itself past maxHeight
line 60: the body scrolls inside itself past maxHeight

Large document scrolls inside itself

182 generated lines, maxHeight caps the frame at 18rem
jobs-export.json182 lines of generated job records, frame stays 18rem tall
[
  {
    "id": "job_9421",
    "module": "Part Type",
    "rows": 157,
    "status": "ok"
  },
  {
    "id": "job_9420",
    "module": "Scrape",
    "rows": 968,
    "status": "info"
  },
  {
    "id": "job_9419",
    "module": "Normalize",
    "rows": 1779,
    "status": "review"
  },
  {
    "id": "job_9418",
    "module": "Content",
    "rows": 2590,
    "status": "warn"
  },
  {
    "id": "job_9417",
    "module": "Part Type",
    "rows": 3401,
    "status": "err"
  },
  {
    "id": "job_9416",
    "module": "Scrape",
    "rows": 4212,
    "status": "ok"
  },
  {
    "id": "job_9415",
    "module": "Normalize",
    "rows": 823,
    "status": "info"
  },
  {
    "id": "job_9414",
    "module": "Content",
    "rows": 1634,
    "status": "review"
  },
  {
    "id": "job_9413",
    "module": "Part Type",
    "rows": 2445,
    "status": "warn"
  },
  {
    "id": "job_9412",
    "module": "Scrape",
    "rows": 3256,
    "status": "err"
  },
  {
    "id": "job_9411",
    "module": "Normalize",
    "rows": 4067,
    "status": "ok"
  },
  {
    "id": "job_9410",
    "module": "Content",
    "rows": 678,
    "status": "info"
  },
  {
    "id": "job_9409",
    "module": "Part Type",
    "rows": 1489,
    "status": "review"
  },
  {
    "id": "job_9408",
    "module": "Scrape",
    "rows": 2300,
    "status": "warn"
  },
  {
    "id": "job_9407",
    "module": "Normalize",
    "rows": 3111,
    "status": "err"
  },
  {
    "id": "job_9406",
    "module": "Content",
    "rows": 3922,
    "status": "ok"
  },
  {
    "id": "job_9405",
    "module": "Part Type",
    "rows": 533,
    "status": "info"
  },
  {
    "id": "job_9404",
    "module": "Scrape",
    "rows": 1344,
    "status": "review"
  },
  {
    "id": "job_9403",
    "module": "Normalize",
    "rows": 2155,
    "status": "warn"
  },
  {
    "id": "job_9402",
    "module": "Content",
    "rows": 2966,
    "status": "err"
  },
  {
    "id": "job_9401",
    "module": "Part Type",
    "rows": 3777,
    "status": "ok"
  },
  {
    "id": "job_9400",
    "module": "Scrape",
    "rows": 388,
    "status": "info"
  },
  {
    "id": "job_9399",
    "module": "Normalize",
    "rows": 1199,
    "status": "review"
  },
  {
    "id": "job_9398",
    "module": "Content",
    "rows": 2010,
    "status": "warn"
  },
  {
    "id": "job_9397",
    "module": "Part Type",
    "rows": 2821,
    "status": "err"
  },
  {
    "id": "job_9396",
    "module": "Scrape",
    "rows": 3632,
    "status": "ok"
  },
  {
    "id": "job_9395",
    "module": "Normalize",
    "rows": 243,
    "status": "info"
  },
  {
    "id": "job_9394",
    "module": "Content",
    "rows": 1054,
    "status": "review"
  },
  {
    "id": "job_9393",
    "module": "Part Type",
    "rows": 1865,
    "status": "warn"
  },
  {
    "id": "job_9392",
    "module": "Scrape",
    "rows": 2676,
    "status": "err"
  }
]

CSV loadsheet

Header row and data columns colour separately
loadsheet-export.csvHeader row and data columns colour separately
sku,title,part_type,catalog,price
BRK-2214,Wagner ThermoQuiet Ceramic Brake Pad Set,Disc Brake Conversion Kits,AC Delco Q3,84.50
WHL-1180,17in Alloy Wheel Black,Wheels,Brake & Chassis,142.00
RAD-3390,Aluminum Core Radiator,Radiators,Filters (May),98.75
INJ-5502,Fuel Injector Set of 4,Fuel Injectors,Lighting SKUs,210.00

YAML config

Keys colour, list dashes stay punctuation
workspace.config.yamlKeys colour, list dashes stay punctuation
pipeline:
  - stage: ingest
    desc: Merge files, union by part number
  - stage: scrape
    desc: Pull fields from vendor product pages
  - stage: taxonomy
    desc: Assign Speedway part types
  - stage: normalize
    desc: Map attributes to your schema
  - stage: content
    desc: 65-char titles, descriptions, FAB
  - stage: export
    desc: Prepare the loadsheet
catalog: AC Delco Q3
owner: Aakarsh C.

Bash deploy snippet

Comments, strings and shell variables colour separately
scripts/bump-kit.shComments, strings and shell variables colour separately
#!/bin/bash
# Bump the kit and let the publish-kit workflow pick it up.
set -euo pipefail
CURRENT=$(npm pkg get version --workspace=packages/ui)
echo "Current kit version: $CURRENT"
npm version "$1" --workspace=packages/ui --no-git-tag-version
if [ -z "${SKIP_PUSH:-}" ]; then
  git add packages/ui/package.json
  git commit -m "kit: bump to $1"
  git push origin main
else
  echo "SKIP_PUSH set, staged only"
fi

Header actions

Download sits beside the built-in copy button
job_9421.jsonDownload saves the file, copy still copies the source
{
  "id": "job_9421",
  "module": "Content",
  "catalog": "AC Delco Q3",
  "owner": "Aakarsh C.",
  "status": "ok",
  "rows": 3214
}

Compare two versions

Two blocks side by side, each with its own title
Before re-run2 of 4 attributes mapped
{
  "sku": "BRK-2214",
  "attributes": {
    "boltPattern": "5 x 4.5",
    "finish": "Black"
  }
}
After re-run4 of 4 attributes mapped
{
  "sku": "BRK-2214",
  "attributes": {
    "boltPattern": "5 x 4.5",
    "finish": "Black",
    "material": "Aluminum",
    "loadRating": "1200 lb"
  }
}

Skeleton

Block-shaped placeholder

Styling slots

Every className the component exposes, and what it reaches
className
the outer frame
headerClassName
the title bar above the code
titleClassName
the mono title text
subtitleClassName
the muted second header line
actionsClassName
the header actions cluster
bodyClassName
the scroll area around the code
codeClassName
the pre element itself
@versable-git/ui · all states, both themes