Badges

Command Hint Bar

A compact shortcut strip for command palettes, editors, and agent workspaces.

shortcutkeyboardcommand

Installation

Copy and paste the code into your project.

Accessibility notes

Use real keyboard labels and pair each shortcut with a visible action name.

KCommandEnterRunEscClose

Preview accent

TypeScript

const hints = [
  { key: "K", label: "Command" },
  { key: "Enter", label: "Run" },
  { key: "Esc", label: "Close" },
];

export function CommandHintBar() {
  return (
    <div className="flex flex-wrap items-center gap-2 rounded-full border border-white/12 bg-[#0b0f14]/82 px-3 py-2 shadow-xl backdrop-blur">
      {hints.map((hint) => (
        <span key={hint.label} className="inline-flex items-center gap-1.5 text-xs font-semibold text-slate-400">
          <kbd className="rounded-md border border-white/10 bg-white/[0.06] px-2 py-1 text-[#d8fffb]">{hint.key}</kbd>
          {hint.label}
        </span>
      ))}
    </div>
  );
}

Usage

<CommandHintBar />

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