Cards

Glass Command Card

A glassmorphism command card for product shortcuts, palettes, and agent actions.

glasscommandshortcut

Installation

Copy and paste the code into your project.

Accessibility notes

Keyboard hints should match the supported platform shortcut in your app.

Command palette

⌘K

Generate dashboard layout

3 actions ready · 1 agent online

Preview accent

TypeScript

export function GlassCommandCard() {
  return (
    <div className="w-full max-w-sm rounded-lg border border-white/12 bg-white/[0.06] p-4 shadow-2xl backdrop-blur">
      <div className="flex items-center justify-between">
        <p className="text-sm font-semibold text-white">Command palette</p>
        <kbd className="rounded border border-white/10 bg-[#0b0f14]/80 px-2 py-1 text-xs text-slate-300">Cmd K</kbd>
      </div>
      <div className="mt-4 rounded-lg border border-[#40E0D0]/24 bg-[#40E0D0]/8 px-3 py-2 text-sm text-[#d8fffb]">
        Generate dashboard layout
      </div>
      <p className="mt-3 text-xs text-slate-400">3 actions ready - 1 agent online</p>
    </div>
  );
}

Usage

<GlassCommandCard />

Related components

Eval score

94.8%+6.2

Cards

Glass Metric Card

Beginner

A compact KPI card with a progress rail for evals, usage, and model quality signals.

metricdashboardglass

View component

Agent SLA

Production quality

Healthy

Task success: 98.4%; Target > 97%
P95 latency: 1.8s; Target < 2.5s
Escalations: 3.2%; Target < 5%

Monthly breach budget2 / 20

Cards

Agent SLA Scorecard

Intermediate

A compact production scorecard for tracking agent success, latency, escalations, and remaining breach budget.

agentsslaobservability

View component

component.tsx

<Button glow>
  Ship it
</Button>

Cards

Copy Code Card

Beginner

A compact code surface for snippets, component recipes, and copy actions.

codecopysnippet

View component