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 kbd

Usage

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

<Kbd>Ctrl</Kbd>

Composition

Use the following composition to build Kbd and KbdGroup:

Kbd
KbdGroup
├── Kbd
└── Kbd

Examples

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 { SearchIcon } from "lucide-react"

import {

RTL

To enable RTL support in DWL Components, 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>

Item Label

On This Page

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

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.