PanelRails

PanelRails adds two dashed vertical rails just outside the left and right edges of a surface. Use them as an extra highlight for a hovered or selected panel.

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

Visible

PanelRails covers its parent (position: absolute; inset: 0), so the parent needs relative and must not clip overflow: the rails sit 4px outside its edges. They start 26px below the top, leaving room for a header strip, and end 4px above the bottom. visible fades them in over 300ms.

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

export default function Basic() {
    const [visible, setVisible] = useState(true);

    return (
        <div className="flex flex-col items-center gap-4">
            <div className="relative h-[110px] w-[260px] border border-border bg-surface">
                <PanelRails visible={visible} />
                <div className="border-b border-border px-3 py-[6px] text-[9px] uppercase tracking-[2px] text-text-secondary">
                    Telemetry
                </div>
            </div>
            <Switch label="Visible" size="sm" checked={visible} onCheckedChange={setVisible} />
        </div>
    );
}

To combine PanelRails with the other chrome layers, see the custom card on LightTrace.

Accessibility

• The rails are aria-hidden and ignore pointer events. They are a purely visual cue.
• The only motion is the 300ms opacity transition when visible changes.

API