ConsoleSurface

The shared instrument-card chrome behind ConsolePanel, DataStream, and BootSequence — a sharp mono-grid surface with a keyline header strip, a square status LED, and an optional scanline field.

● LIVE

SURFACE // CHROMECH // 0x4AONLINE

the shared shell — keyline card, header strip, status LED and scanline field. drop any body in: a line log, a live feed, a staged reveal.

import {  ConsoleStatusDot,  ConsoleSurface,  ConsoleSurfaceHeader,  ConsoleSurfaceTitle,} from "@/registry/okibi/ui/console-surface";export default function ConsoleSurfaceDemo() {  return (    <ConsoleSurface scanlines className="max-w-md text-sm text-foreground">      <ConsoleSurfaceHeader>        <ConsoleSurfaceTitle>SURFACE // CHROME</ConsoleSurfaceTitle>        <span className="ml-auto flex items-center gap-3 leading-none">          <ConsoleSurfaceTitle className="text-[0.65rem]">            CH // 0x4A          </ConsoleSurfaceTitle>          <span className="flex items-center gap-1.5">            <ConsoleStatusDot tint="text-success-spark" live />            <span className="text-[0.7rem] uppercase tracking-grid-wide text-success-spark">              ONLINE            </span>          </span>        </span>      </ConsoleSurfaceHeader>      <div className="p-3 text-muted-foreground">        the shared shell — keyline card, header strip, status LED and scanline        field. drop any body in: a line log, a live feed, a staged reveal.      </div>    </ConsoleSurface>  );}

npx shadcn@latest add https://okibi.cndr.dev/r/console-surface.json

Installation

Install the theme first, then add the component:

npx shadcn@latest add https://okibi.cndr.dev/r/console-surface.json

Copy the source from the Code tab above into components/ui/console-surface.tsx. It uses the cn helper and the okibi theme tokens — install the theme first if you haven't.

Usage

import { ConsoleSurface, ConsoleSurfaceHeader, ConsoleSurfaceTitle, ConsoleStatusDot } from "@/components/ui/console-surface"

<ConsoleSurface scanlines className="text-sm text-foreground">
  <ConsoleSurfaceHeader>
    <ConsoleSurfaceTitle>SURFACE // CHROME</ConsoleSurfaceTitle>
    <span className="ml-auto flex items-center gap-1.5">
      <ConsoleStatusDot tint="text-success-spark" live />
      <span className="text-[0.7rem] uppercase tracking-grid-wide text-success-spark">ONLINE</span>
    </span>
  </ConsoleSurfaceHeader>
  <div className="p-3 text-muted-foreground">drop any body in here.</div>
</ConsoleSurface>

API Reference

ConsoleSurface

Prop	Type	Default	Description
`scanlines`	`boolean`	`false`	Overlay the faint scanline texture across the whole surface.

ConsoleSurfaceHeader

Prop	Type	Default	Description
`children`	`ReactNode`	–	Header content — a `ConsoleSurfaceTitle` on the leading edge, trailing annotations pushed right with `ml-auto`, and an optional `ConsoleStatusDot`.

ConsoleSurfaceTitle

Prop	Type	Default	Description
`children`	`ReactNode`	–	Mono, uppercase, grid-tracked label text (a title or index).

ConsoleStatusDot

Prop	Type	Default	Description
`tint`	`string`	–	Text-color token class the LED emits via `bg-current`, e.g. `text-signal-spark`.
`live`	`boolean`	`false`	Flicker the LED when the channel is live.

Accessibility

ConsoleStatusDot is decorative (aria-hidden) — it emits colour, not text. Pair it with a perceivable status word (and a live region if the state changes) at the call site, the way ConsolePanel does.
ConsoleSurface renders an unlabelled div; give it a role/aria-label (or label it from a ConsoleSurfaceTitle via aria-labelledby) appropriate to the body you compose — a log, a status region, etc.
The scanline overlay and the LED glow are pure-CSS and reduced-motion gated (.animate-scan / .animate-blink-stutter); nothing animates when motion is off.

Guidelines

Reach for it when you need the console look on a new surface — it is the same chrome ConsolePanel, DataStream and BootSequence are built on, so they all stay in lock-step.
Lay the header out freely: a ConsoleSurfaceTitle on the leading edge, then push trailing annotations and a ConsoleStatusDot to the right with ml-auto.
Drive ConsoleStatusDot's tint/live from real channel state, and always sit a status word beside it.

Don't

Do not encode meaning in the LED colour alone — it is aria-hidden chrome.
Do not push behaviour (timers, data, state) into the surface itself; keep that in the component composing it, so the surface stays a pure, server-renderable shell.

ConsoleSurface

On this page