Kbd

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

export function KbdDemo() {

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui/kbd
Copy

Usage#

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

Copy<Kbd>Ctrl</Kbd>

Composition#

Use the following composition to build Kbd and KbdGroup:

CopyKbd
KbdGroup
├── Kbd
└── Kbd

Group#

Use the KbdGroup component to group keyboard keys together.

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"

Tooltip#

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.

import SearchIcon from "@material-symbols/svg-400/rounded/search.svg?react"

import {

Primary#

Use variant="primary" when placing a Kbd on a solid or brand-coloured surface so the key label remains legible against the background.

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

export function KbdPrimary() {

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

"use client"

import * as React from "react"

API Reference#

Kbd#

Use the Kbd component to display a keyboard key.

Copy<Kbd>Ctrl</Kbd>

KbdGroup#

Use the KbdGroup component to group Kbd components together.

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