Code & developer

Code, keyboard shortcuts, logs, JSON, APIs and delivery pipelines.

Code #

Inline code and highlighted blocks.

Code #

Inline code.

Run bun run ui:docs after changing an example.

<Text>
    Run <Code>bun run ui:docs</Code> after changing an example.
</Text>

Prop	Type	Required	Default	Description
`children`	`content`			Inline code.

CodeBlock #

Highlighted code with copy button.

tsx

import { Button } from "@arachnejs/ui";

export const Save = () => <Button>Save</Button>;

<CodeBlock
    language="tsx"
    radius="lg"
    code={
        'import { Button } from "@arachnejs/ui";\n\nexport const Save = () => <Button>Save</Button>;'
    }
/>

Slots: root bar code copy language pre

Prop	Type	Required	Default	Description
`code`	`string`	yes		Source code to highlight and copy.
`copiedLabel`	`string`		`"Copied"`	Copy button text shown briefly after copying.
`copyLabel`	`string`		`"Copy"`	Copy button text.
`language`	`string`		`"tsx"`	Language for highlighting, shown in the header.
`radius`	`(string & {}) \| RadiusName`			Corner radius: `"none"` \| `"sm"` \| `"lg"` or any CSS length (default: the theme radius).

RadiusName — Corner radius scale — sm is the kit default.

type RadiusName = "none" | "sm" | "lg";

Diff #

Unified diff lines.

 <Title-  size={5}+  order={3} size={5} >Settings</Title>

<Diff
    lines={[
        { type: "ctx", text: "<Title" },
        { type: "del", text: "  size={5}" },
        { type: "add", text: "  order={3} size={5}" },
        { type: "ctx", text: ">Settings</Title>" },
    ]}
/>

Slots: root line prefix

Prop	Type	Required	Default	Description
`lines`	`DiffLine[]`	yes		Diff lines, in order.

DiffLine

Field	Type	Required	Description
`type`	`"add" \| "del" \| "ctx"`	yes	`add`, `del` or `ctx` (unchanged context).
`text`	`string`	yes	The line's text (without the `+` / `-` prefix).

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Keyboard #

Keys and shortcuts.

Kbd #

Keyboard key.

Press Esc to close.

<Text>
    Press <Kbd>Esc</Kbd> to close.
</Text>

Prop	Type	Required	Default	Description
`children`	`content`			Key or key combination text, e.g. `⌘K`.

Hotkey #

Display a key combo (⌘K, Ctrl+S).

⌘K

<Hotkey keys={["⌘", "K"]} />

Slots: root key part separator

Prop	Type	Required	Default	Description
`keys`	`string[]`	yes		Keys to show and (with `onTrigger`) listen for, e.g. `["Ctrl", "K"]` or `["⌘", "Shift", "P"]`.
`ignoreInInputs`	`boolean`			Ignore the shortcut while typing in inputs (default true).
`onTrigger`	`(e: KeyboardEvent) => void`			Bind the combination on `document`; called when it is pressed (default prevented).
`separator`	`content`		`"+"`	Separator between keys (default `+`).

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Terminal & logs #

Command output and log streams.

Terminal #

Terminal window mock-up.

zsh

$ bun add @arachnejs/ui
installed @arachnejs/[email protected]

<Terminal title="zsh">
    {"$ bun add @arachnejs/ui\ninstalled @arachnejs/[email protected]"}
</Terminal>

Slots: root bar body title

Prop	Type	Required	Default	Description
`children`	`content`			Terminal text (newlines are kept).
`title`	`string`		`"Terminal"`	Window title in the header bar.

LogViewer #

Monospace log output with levels and timestamps.

12:04:01INFOListening on :300012:04:07WARNSlow query (812 ms): SELECT * FROM runs12:04:09ERRORECONNRESET redis://cache:6379

<LogViewer
    lines={[
        { time: "12:04:01", level: "info", message: "Listening on :3000" },
        { time: "12:04:07", level: "warn", message: "Slow query (812 ms): SELECT * FROM runs" },
        { time: "12:04:09", level: "error", message: "ECONNRESET redis://cache:6379" },
    ]}
/>

Slots: root level line message time

Prop	Type	Required	Default	Description
`lines`	`LogLineData[]`	yes		Log lines, oldest first.

LogLineData

Field	Type	Required	Description
`time`	`string`		Timestamp text.
`level`	`LogLevel`	yes	Severity; sets the colour.
`message`	`string`	yes	Log message.

LogLevel

type LogLevel = "debug" | "info" | "warn" | "error";

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

JSON #

Read-only JSON views.

JsonViewer #

Pretty-printed JSON (handles undefined, circular references and BigInt).

{
  "id": "dep_128",
  "status": "ready",
  "regions": [
    "fra1",
    "iad1"
  ]
}

<JsonViewer value={{ id: "dep_128", status: "ready", regions: ["fra1", "iad1"] }} />

Prop	Type	Required	Default	Description
`value`	`content`	yes		Any JSON-serializable value to show, pretty-printed.

JsonTree #

Collapsible JSON tree.

name: "arachne"

private: true

0: "packages/*"

1: "apps/*"

const configJson: JsonNode = {
    kind: "object",
    entries: [
        { key: "name", value: { kind: "primitive", value: "arachne" } },
        { key: "private", value: { kind: "primitive", value: true } },
        {
            key: "workspaces",
            value: {
                kind: "array",
                items: [
                    { kind: "primitive", value: "packages/*" },
                    { kind: "primitive", value: "apps/*" },
                ],
            },
        },
    ],
};

<JsonTree data={configJson} />

Prop	Type	Required	Default	Description
`data`	`JsonNode`	yes		The JSON tree to show; objects and arrays can be collapsed.

JsonNode

type JsonNode = | { kind: "primitive"; value: string | number | boolean | null } | { kind: "object"; entries: Array<{ key: string; value: JsonNode }> } | { kind: "array"; items: JsonNode[] };

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

FileTree #

File / folder tree. Rows expose data-kind.

Open: src/button.tsx

const repoTree: FileTreeNode[] = [
    {
        id: "src",
        name: "src",
        kind: "folder",
        children: [
            { id: "src/index.ts", name: "index.ts", kind: "file" },
            { id: "src/button.tsx", name: "button.tsx", kind: "file" },
        ],
    },
    { id: "package.json", name: "package.json", kind: "file" },
];

function Example() {
    const file = signal("src/button.tsx");
    return (
        <Stack gap="0.5rem">
            <FileTree label="Repository" nodes={repoTree} selected={file()} onSelect={file.set} />
            <Text muted>Open: {file()}</Text>
        </Stack>
    );
}

Prop	Type	Required	Default	Description
`nodes`	`FileTreeNode[]`	yes		Root files and folders.
`label`	`string`		`"Files"`	Accessible name for the tree.
`onSelect`	`(id: string) => void`			Called with the id of the file the user picks.
`selected`	`string`			Id of the selected file.

FileTreeNode

Field	Type	Required	Description
`id`	`string`	yes	Node id, passed to `onSelect` and matched against `selected`.
`name`	`string`	yes	File or folder name.
`kind`	`"file" \| "folder"`	yes	`file` or `folder` (sets the icon; folders expand).
`children`	`FileTreeNode[]`		Contents of a folder.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

API endpoints #

HTTP methods and endpoint rows.

EndpointRow #

API endpoint row: method, path and summary.

Interact with the example: callbacks show up here.

<EndpointRow
    method="POST"
    path="/v1/projects/{id}/deploys"
    summary="Start a deploy"
    onClick={() => {}}
/>

Slots: root path summary

Prop	Type	Required	Description
`method`	`HttpMethod`	yes	HTTP method.
`path`	`string`	yes	Endpoint path, e.g. `/v1/projects/{id}`.
`onClick`	`() => void`		Makes the row a button, e.g. to open the endpoint's docs.
`summary`	`string`		What the endpoint does.

HttpMethod

type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";

HttpMethodBadge #

Coloured HTTP method label (GET, POST, …).

DELETE

<HttpMethodBadge method="DELETE" />

Prop	Type	Required	Default	Description
`method`	`HttpMethod`	yes		HTTP method; sets the colour.

HttpMethod

type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS";

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Builds & git #

Pipelines, build status, commits and branches.

Pipeline #

CI pipeline of steps with their statuses.

Install
Test
Build
Deploy

<Pipeline
    steps={[
        { id: "install", label: "Install", status: "success" },
        { id: "test", label: "Test", status: "success" },
        { id: "build", label: "Build", status: "running" },
        { id: "deploy", label: "Deploy", status: "queued" },
    ]}
/>

Slots: root line step

Prop	Type	Required	Default	Description
`steps`	`PipelineStep[]`	yes		Pipeline steps, in order.

PipelineStep

Field	Type	Required	Description
`id`	`string`	yes	Step id.
`label`	`string`	yes	Step name.
`status`	`BuildStatusKind`	yes	Step state; sets the icon and colour.

BuildStatusKind

type BuildStatusKind = "success" | "failed" | "running" | "queued" | "cancelled";

BuildStatus #

CI build status (running, success, failed …).

running

<BuildStatus status="running" />

Prop	Type	Required	Default	Description
`status`	`BuildStatusKind`	yes		Build state; sets the icon and colour.
`label`	`string`			Custom text instead of the status name.

BuildStatusKind

type BuildStatusKind = "success" | "failed" | "running" | "queued" | "cancelled";

CommitChip #

Commit SHA and message chip.

Interact with the example: callbacks show up here.

<CommitChip
    sha="3f9c2e7a41d0b8"
    message="Fix toast focus"
    onClick={() => {}}
/>

Slots: root message sha

Prop	Type	Required	Description
`sha`	`string`	yes	Full commit hash (the first 7 characters are shown).
`message`	`string`		Commit message, shown after the hash.
`onClick`	`() => void`		Makes the chip a button, e.g. to open the commit.

BranchBadge #

Git branch name label.

feat/ui-kit

<BranchBadge name="feat/ui-kit" />

Prop	Type	Required	Default	Description
`name`	`string`	yes		Branch name.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Status & changelog #

Service status and release notes.

ServiceStatus #

Service name with its operational status.

Build workersdegraded

<ServiceStatus name="Build workers" status="degraded" />

Slots: root name status

Prop	Type	Required	Default	Description
`name`	`string`	yes		Service name.
`status`	`ServiceStatusKind`	yes		Current state; sets the dot colour and text.

ServiceStatusKind

type ServiceStatusKind = "operational" | "degraded" | "outage" | "maintenance";

ChangelogItem #

One release entry in a changelog.

v2.4.0Sep 12, 2026

Tables gain sticky headers and keyboard row selection.

<ChangelogItem version="2.4.0" date="Sep 12, 2026">
    Tables gain sticky headers and keyboard row selection.
</ChangelogItem>

Slots: root body date header title

Prop	Type	Required	Description
`version`	`string`	yes	Release version, e.g. `2.4.0`.
`children`	`content`		What changed.
`date`	`string`		Release date text.
`title`	`string`		Release name.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.