# Tech Frame

> An instrument panel: title tab, segments, status light.

Its segmented border lights up in sequence on arrival. For dashboards, HUD panels and spec sheets.

- Family: Chrome
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/tech-frame/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add tech-frame
```

It installs to `components/galactrex/tech-frame.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { TechFrame } from "@/components/galactrex/tech-frame";

<TechFrame title="Reactor" code="RX-07" status="blink">…</TechFrame>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Content. |
| `title` | `ReactNode` | — | Tab label. |
| `code` | `string` | — | Serial in the corner. |
| `status` | `"on" \| "off" \| "blink"` | `"on"` | Status light. |
| `segments` | `number` | `10` | Border segments. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Panel.** Title, status and a serial.

## Accessibility

- Title is real text; the light is decorative, so state it in words too.

## Motion

- Opacity sequence on arrival.
- Reduced motion: settled.