GlassCard

GlassCard is a Panel in an inline-block wrapper, framed by the panel's own corner brackets. Use it for standalone dashboard tiles that size themselves to their content.

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

Basic

The outer wrapper is an inline-block and takes the size of the panel inside it. Size the panel through bodyClassName; className goes to the wrapper and suits margins or positioning. Only one set of corner brackets is drawn: the panel's own, which lengthen on hover.

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

export default function Basic() {
    return (
        <GlassCard title="System" bodyClassName="w-[260px] h-[110px]">
            <span className="text-text-secondary">CPU · 42%</span>
        </GlassCard>
    );
}

Focus

focused switches the panel to its focused look: longer corner brackets in the bright accent, an accent border and an animated bloom. GlassCard does not track focus itself, so keep the focused card in state.

import { useState } from 'react';
import { Button, GlassCard } from 'jarvis-react-ui';

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

    return (
        <div className="flex flex-col items-center gap-6">
            <GlassCard title="Uplink" focused={focused} bodyClassName="w-[260px] h-[110px]">
                <span className={focused ? 'text-accent' : 'text-text-secondary'}>
                    {focused ? 'Focused' : 'Standby'}
                </span>
            </GlassCard>
            <Button size="sm" onClick={() => setFocused((f) => !f)}>
                {focused ? 'Blur' : 'Focus'}
            </Button>
        </div>
    );
}

Dashboard tiles

GlassCard takes any content. Combine it with Metric and StatusBadge for compact status tiles. For header actions, an index glyph or a badge, use a Panel directly; GlassCard only forwards title.

import { GlassCard, Metric, StatusBadge } from 'jarvis-react-ui';

export default function Dashboard() {
    return (
        <>
            <GlassCard title="Vitals" bodyClassName="w-[220px] h-[120px]">
                <div className="grid grid-cols-2 gap-3">
                    <Metric value={42} unit="%" />
                    <Metric value={68} unit="°C" warn />
                </div>
            </GlassCard>
            <GlassCard title="Network" bodyClassName="w-[220px] h-[120px]">
                <div className="flex flex-col gap-2">
                    <StatusBadge label="Uplink · secure" />
                    <StatusBadge state="warn" label="Relay · degraded" />
                    <StatusBadge state="offline" label="Backup · offline" />
                </div>
            </GlassCard>
        </>
    );
}

Sound

Hovering the card plays hover_panel through the nearest SfxProvider, like every Panel. Without a provider it stays silent. See Sound effects.

Accessibility

• GlassCard renders presentational <div>s without a landmark role; the brackets are decorative empty elements. Wrap it in a <section> with an aria-label when it is a distinct region.
• focused is purely visual and does not move keyboard focus.

API