Scene toolbar

A control surface assembled from the first-party primitives. The panel supplies the header, body, and footer; the toolbar groups the controls; the toggle and buttons share one state; the status row reports what changed.

Scene toolbarascii-things/ui · controls

interactive

Control surface

Calm the yard.

ModeLIVE

Calm modeSettles the scene

WakeSettleReset

State

SceneRobot dogMotionRunning

Last action · Ready

Installation

npx shadcn@latest add https://ascii-things.dev/r/scene-toolbar.json

This adds components/scene-toolbar.tsx and installs ascii-things.

Import the stylesheet once in your app shell or root layout:

import "ascii-things/ui.css";

Usage

import { SceneToolbar } from "@/components/scene-toolbar";

export function Controls() {
  return <SceneToolbar />;
}

Composition

The toolbar is an accessible role="toolbar" container. The toggle is a role="switch" button, not a checkbox, so it keeps the same keyboard behavior as the rest of the controls:

<AsciiPanel
  eyebrow="Control surface"
  heading="Calm the yard."
  actions={<AsciiStatus label="Mode" value={calm ? "CALM" : "LIVE"} />}
>
  <AsciiToolbar label="Scene controls">
    <AsciiToggle
      checked={calm}
      onCheckedChange={setCalm}
      label="Calm mode"
      hint="Settles the scene"
    />
    <AsciiDivider orientation="vertical" />
    <AsciiButton variant="solid" onClick={wake}>
      Wake
    </AsciiButton>
    <AsciiButton variant="ghost" onClick={settle}>
      Settle
    </AsciiButton>
  </AsciiToolbar>
  <AsciiDivider label="State" />
  <AsciiStatus label="Motion" value={calm ? "Settled" : "Running"} live />
</AsciiPanel>

AsciiButton has solid, ghost, and quiet variants and sm / md sizes. AsciiStatus takes a tone (neutral, accent, success, warning) and an optional pulse.

Source

• scene-toolbar.tsx
• UI components guide