Kbd

Used to display textual user input from keyboard.

⌘⇧⌥⌃Ctrl+B

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

export function KbdDemo() {

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/kbd.json

Usage

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

<Kbd>Ctrl</Kbd>

Composition

Use the following composition to build Kbd and KbdGroup:

Kbd
KbdGroup
├── Kbd
└── Kbd

Group

Use the KbdGroup component to group keyboard keys together.

Use Ctrl + BCtrl + K to open the command palette

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

export function KbdGroupExample() {

Button

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

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

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

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

Input Group

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

⌘K

import { MagnifyingGlassIcon } from "@phosphor-icons/react"

import {

RTL

To enable RTL support, see the RTL configuration guide.

⌘⇧⌥⌃Ctrl+B

"use client"

import * as React from "react"

API Reference

Kbd

Use the Kbd component to display a keyboard key.

Prop	Type	Default
`className`	`string`	``

<Kbd>Ctrl</Kbd>

KbdGroup

Use the KbdGroup component to group Kbd components together.

Prop	Type	Default
`className`	`string`	``

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

Kanban Label

On This Page

Installation Usage Composition Group Button Tooltip Input Group RTL API Reference Kbd KbdGroup