Kbd

A component for displaying keyboard shortcuts and key combinations.

Loading...

Installation

npx shadcn@latest add @scrollxui/kbd

Usage

import { Kbd, KbdKey, KbdSeparator } from '@/components/ui/kbd';
<Kbd>
  <KbdKey aria-label='Meta'>⌘</KbdKey>
  <KbdSeparator className='font-mono text-foreground'>+</KbdSeparator>
  <KbdKey>K</KbdKey>
</Kbd>

API Reference

Kbd

A component for displaying keyboard shortcuts and key combinations.

Props

PropertyTypeDefaultDescription
childrenReactNoderequired
The content inside the Kbd component, usually the key label or elements.
classNamestringundefined
Optional additional CSS classes to customize styling.
...propsComponentProps<'span'>undefined
All other native span element props are supported.

Built withby Ahdeetai.