CornerBrackets

CornerBrackets draws four small L-shaped marks at the corners of its content, the signature frame of the HUD. Wrap any box in it to give it the same targeting look as a Panel.

import { CornerBrackets } from 'jarvis-react-ui';

Basic

CornerBrackets renders a relative wrapper <div> around its children and places the brackets 2px outside the wrapper's edges. Padding on className moves the brackets away from the content.

import { CornerBrackets } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <CornerBrackets className="p-3">
            <div className="border border-border px-6 py-4 text-[10px] text-text-secondary">
                CPU · 42%
            </div>
        </CornerBrackets>
    );
}

Focused

focused brightens the brackets to --accent-bright at full opacity. The change fades over 200ms, so it works well for hover, selection or an active state you keep in your own state.

import { useState } from 'react';
import { CornerBrackets, Switch } from 'jarvis-react-ui';

export default function Focused() {
    const [focused, setFocused] = useState(true);

    return (
        <div className="flex flex-col items-center gap-4">
            <CornerBrackets focused={focused} className="p-3">
                <div className="border border-border px-6 py-4 text-[10px] text-accent">
                    {focused ? 'FOCUSED' : 'IDLE'}
                </div>
            </CornerBrackets>
            <Switch label="Focused" size="sm" checked={focused} onCheckedChange={setFocused} />
        </div>
    );
}

Sizes

size sets the length of each bracket arm in pixels. The default is 12.

import { CornerBrackets } from 'jarvis-react-ui';

const SIZES = [8, 12, 20];

export default function Sizes() {
    return (
        <>
            {SIZES.map((size) => (
                <CornerBrackets key={size} size={size} className="p-3">
                    <div className="px-6 py-4 text-[10px] text-text-secondary">size={size}</div>
                </CornerBrackets>
            ))}
        </>
    );
}

Note: Panels already have brackets

Panel and TopBar draw their own corner brackets. Use CornerBrackets for custom surfaces; see LightTrace for a card that combines it with the other chrome layers.

Accessibility

• The four brackets are aria-hidden and ignore pointer events; only the children are exposed to assistive technology.
• The wrapper is a plain <div> without a role. focused is purely visual and does not move keyboard focus.
• The only motion is a 200ms color and opacity transition when focused changes; with prefers-reduced-motion: reduce the change is instant.

API