Badges

Shortcut Key

A clean keyboard shortcut badge for command hints, docs, and toolbars.

shortcutkeyboarddocs

Installation

Copy and paste the code into your project.

Accessibility notes

Pair shortcuts with text actions so users do not need to memorize key combinations.

Ctrl+K

Preview accent

TypeScript

export function ShortcutKey() {
  return (
    <span className="inline-flex items-center gap-1 rounded-md border border-white/12 bg-white/[0.06] p-1 text-xs font-semibold text-slate-200">
      <kbd className="rounded bg-[#1b1b1d] px-2 py-1 text-[#d8fffb]">Ctrl</kbd>
      <span className="text-slate-500">+</span>
      <kbd className="rounded bg-[#1b1b1d] px-2 py-1 text-[#d8fffb]">K</kbd>
    </span>
  );
}

Usage

<ShortcutKey />

Related components

Command palette

⌘K

Generate dashboard layout

3 actions ready · 1 agent online

Cards

Glass Command Card

Beginner

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

glasscommandshortcut

View component

Prompt tuned

Badges

Prompt Badge

Beginner

A small status badge for prompt state, tuning, review, or evaluation labels.

promptstatusbadge

View component

4.2k tokens

Badges

Token Usage Pill

Beginner

A compact usage indicator for token budgets, metering, and AI billing surfaces.

tokensmeterusage

View component