Figma UI component

Figma Kbd component

A Kbd component for Figma, used to visually represent keyboard keys or shortcuts in your interface. It helps users understand available commands or actions that can be triggered from the keyboard.

Usability tip

Use Kbd elements to reinforce learnability and accessibility for power users. Keep shortcuts consistent across screens, and only display combinations that are supported by your product.

Usage

Ideal for tooltips, command palettes, onboarding flows, or documentation where you want to show how to perform actions with keyboard shortcuts.

shadcn/ui Components are available in our Base Figma UI Kit.

Female avatar image
Female avatar image
Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

Female avatar image
Female avatar image
Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

Female avatar image
Female avatar image
Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

Stay in the know

Keep updated on all things happening with Shadcraft.

We respect your privacy

Stay in the know

Keep updated on all things happening with Shadcraft.

We respect your privacy

Stay in the know

Keep updated on all things happening with Shadcraft.

We respect your privacy