Kbd

Installation

<CodeTabs> <TabsList> <TabsTrigger value="cli">Command</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

bash

npx shadcn@latest add kbd

</TabsContent> <TabsContent value="manual"> <Steps className="mb-0 pt-2">

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

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

</Steps> </TabsContent> </CodeTabs>

Usage

tsx

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

tsx

<Kbd>Ctrl</Kbd>

Examples

Group

Use the KbdGroup component to group keyboard keys together.

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

Input Group

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

API Reference

Use the Kbd component to display a keyboard key.

Prop	Type	Default
`className`	`string`	``

tsx

<Kbd>Ctrl</Kbd>

KbdGroup

Use the KbdGroup component to group Kbd components together.

Prop	Type	Default
`className`	`string`	``

tsx

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>