Kbd

Used to display textual user input from keyboard.

Radix UI Base UI

⌘⇧⌥⌃

Item Label

On This Page

Installation Usage Examples Group Button Tooltip Input Group API Reference Kbd KbdGroup

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add kbd

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

<Kbd>Ctrl</Kbd>

Use the KbdGroup component to group keyboard keys together.

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.

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

Use the Kbd component to display a keyboard key.

Prop	Type	Default
`className`	`string`	``

<Kbd>Ctrl</Kbd>

Use the KbdGroup component to group Kbd components together.

Prop	Type	Default
`className`	`string`	``

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

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

export function KbdDemo() {

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

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

import {
  InputGroup,
  InputGroupAddon,

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

export function KbdGroupExample() {