Kbd

Displays a keyboard shortcut key indicator.

Displays a keyboard shortcut key indicator.

Preview

Press⌘Kto open search.

pnpm dlx vibe-ui-kit@latest add kbd

Explore layout variations and visual themes.

Default

⌘K

Glassmorphic

⌘P

Retro

⌘S

Glow

⌘H

Prop	Type	Default	Description
variant	'default' \| 'glass' \| 'retro' \| 'glow'	'default'	The visual aesthetic theme of the keycaps.
asChild	boolean	false	Change the underlying rendered element to a Slot component for polymorphism.

Jenish Sabhadiya

Primary Theme Accent

Border Corner Radius

Glass Backdrop Blur8px

Export CSS Config

@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}

Changes apply instantly to this documentation workspace.

Kbd | Vibe UI