Atoms / Kbd

Kbd

<Kbd />Stable

Keyboard shortcut chip. Use KbdGroup to render multi-key combinations with consistent spacing.

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

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Content

Context

⌘K

1<Kbd>⌘</Kbd>
2<Kbd>K</Kbd>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

⌘K

Code

1import { Kbd } from "@/components/upnext";
2
3<Kbd>⌘K</Kbd>

Keys

⌘

1<Kbd>⌘</Kbd>

Composition

⌘K

1<KbdGroup>
2  <Kbd>⌘</Kbd>
3  <Kbd>K</Kbd>
4</KbdGroup>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.