║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Kbd description: A component for displaying keyboard keys and shortcuts.

<ComponentPreview name="kbd-demo" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/kbd

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="kbd" title="components/ui/kbd.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

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

Single key:

<Kbd>K</Kbd>

Multiple keys (key combination):

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Examples

Input Group

<ComponentPreview name="input-group-with-kbd" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Button

<ComponentPreview name="button-with-kbd" />

API Reference

Kbd

Displays a single keyboard key.

| Prop | Type | Default | | ----------- | -------- | ------- | | className | string | |

<Kbd>⌘K</Kbd>

KbdGroup

Groups multiple keyboard keys for key combinations.

| Prop | Type | Default | | ----------- | -------- | ------- | | className | string | |

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║