Kbd

Keyboard shortcut chips with a raised border treatment. Includes a KbdGroup helper for multi-key combos like ⌘K.

keyboardshortcutaccessibility

Search⌘K·Save⌘S

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { Kbd, KbdGroup } from "@/registry/components/kbd";

export function Example() {
  return <Kbd />;
}

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

Avatar Stack

Overlapping avatars with an overflow counter and a lift on hover. Falls back to initials when no image is supplied.

Glow Button

A pill button with a sweeping specular highlight and a soft brand-coloured bloom behind it. Both effects are hidden under reduced motion.

Copy Button

One-click clipboard copy with a checkmark confirmation. Uses the Clipboard API and resets after 1.6 seconds.