Kbd

Kbd renders a styled keyboard keycap, useful for documenting shortcuts. KbdGroup combines multiple keys with plus separators.

Installation

Terminal

pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/kbd.json

Usage

typescript

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

export default function Example() {
  return <Kbd>⌘K</Kbd>;
}

Examples

Default

⌘K

Group

⌘ShiftP

API

Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.

Part	Built on	Props
`Kbd`data-slot="kbd"	`<kbd>`HTML	—
`KbdGroup`data-slot="kbd-group"	`<kbd>`HTML	—

Changelog

v0.3.0KbdGroup is typed as a kbd element, Combobox imports its Base UI subpath, the motion lib mirrors the exit easing and travel tokens, and the chart item declares its react-is peer.patchSep 29, 2026

Full Kbd history

InstallationCopy Anchor Link

UsageCopy Anchor Link

ExamplesCopy Anchor Link

DefaultCopy Anchor Link

GroupCopy Anchor Link

APICopy Anchor Link