Kbd

⌘⇧⌥⌃Ctrl+B

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

export function KbdDemo() {
	return (
		<div className="flex flex-col items-center gap-4">
			<KbdGroup>
				<Kbd>⌘</Kbd>
				<Kbd>⇧</Kbd>
				<Kbd>⌥</Kbd>
				<Kbd>⌃</Kbd>
			</KbdGroup>
			<KbdGroup>
				<Kbd>Ctrl</Kbd>
				<span className="text-muted-foreground text-sm">+</span>
				<Kbd>B</Kbd>
			</KbdGroup>
		</div>
	);
}

Installation

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

Usage

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

<Kbd>Ctrl</Kbd>

Composition

Use the following composition to build Kbd and KbdGroup:

Kbd
KbdGroup
├── Kbd
└── Kbd

Examples

Variants

Use the variant prop on Kbd for the default filled style or a lighter appearance (variant="light").

Ctrl + BCtrl + B

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

export function KbdVariants() {
	return (
		<div className="flex flex-wrap items-center gap-4">
			<Kbd variant="default">Ctrl + B</Kbd>
			<Kbd variant="light">Ctrl + B</Kbd>
		</div>
	);
}

Group

Use KbdGroup to group multiple keys with consistent spacing.

Use Ctrl + BCtrl + K to open the command palette

import { Kbd, KbdGroup } from "@/registry/new-york-v4//ui/kbd";

export function KbdGroupExample() {
	return (
		<div className="flex flex-col items-center gap-4">
			<p className="text-muted-foreground">
				Use{" "}
				<KbdGroup>
					<Kbd>Ctrl + B</Kbd>
					<Kbd>Ctrl + K</Kbd>
				</KbdGroup>{" "}
				to open the command palette
			</p>
		</div>
	);
}

Button

Put Kbd inside Button to show an accelerator hint next to the label. Use data-icon="inline-end" so spacing respects RTL.

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

export function KbdButton() {
	return (
		<Button variant="outline">
			Accept <Kbd data-icon="inline-end">⏎</Kbd>
		</Button>
	);
}

Use Kbd inside TooltipContent to show shortcuts in hover hints.

"use client";

import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from "@/components/ui/tooltip";

export function KbdTooltip() {
	return (
		<div className="flex flex-wrap gap-4">
			<ButtonGroup>
				<Tooltip>
					<TooltipTrigger
						render={<Button variant="tertiary" className="w-fit" />}
					>
						Save
					</TooltipTrigger>
					<TooltipContent>
						Save Changes <Kbd>S</Kbd>
					</TooltipContent>
				</Tooltip>
				<Tooltip>
					<TooltipTrigger
						render={<Button variant="tertiary" className="w-fit" />}
					>
						Print
					</TooltipTrigger>
					<TooltipContent className="flex flex-wrap items-center gap-1">
						Print Document{" "}
						<KbdGroup>
							<Kbd>Ctrl</Kbd>
							<Kbd>P</Kbd>
						</KbdGroup>
					</TooltipContent>
				</Tooltip>
			</ButtonGroup>
		</div>
	);
}

Input group

Show shortcuts inside InputGroupAddon, for example on the trailing edge of a search field.

⌘K

import { SearchIcon } from "lucide-react";

import {
	InputGroup,
	InputGroupAddon,
	InputGroupInput,
} from "@/components/ui/input-group";
import { Kbd } from "@/components/ui/kbd";

export function KbdInputGroup() {
	return (
		<div className="flex w-full max-w-xs flex-col gap-6">
			<InputGroup>
				<InputGroupInput placeholder="Search..." />
				<InputGroupAddon>
					<SearchIcon />
				</InputGroupAddon>
				<InputGroupAddon align="inline-end">
					<Kbd>⌘</Kbd>
					<Kbd>K</Kbd>
				</InputGroupAddon>
			</InputGroup>
		</div>
	);
}

RTL

To enable RTL support in shadcn/ui, see the RTL configuration guide.

اختصارات شائعة

⌘⇧⌥⌃Ctrl+B

"use client";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { Kbd, KbdGroup } from "@/components/ui/kbd";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			hint: "Common shortcuts",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			hint: "اختصارات شائعة",
		},
	},
	he: {
		dir: "rtl",
		values: {
			hint: "קיצורי דרך נפוצים",
		},
	},
};

export function KbdRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	return (
		<div className="flex flex-col items-center gap-4" lang={language} dir={dir}>
			<p className="text-muted-foreground text-sm">{t.hint}</p>
			<KbdGroup>
				<Kbd>⌘</Kbd>
				<Kbd>⇧</Kbd>
				<Kbd>⌥</Kbd>
				<Kbd>⌃</Kbd>
			</KbdGroup>
			<KbdGroup>
				<Kbd>Ctrl</Kbd>
				<span className="text-muted-foreground text-sm">+</span>
				<Kbd>B</Kbd>
			</KbdGroup>
		</div>
	);
}

API Reference

Kbd

Displays a keyboard key or shortcut fragment.

Prop	Type	Default
variant	`"default" \| "light"`	`"default"`
className	`string`	—

KbdGroup

Groups multiple Kbd nodes with inline layout and gap spacing.

Prop	Type	Default
className	`string`	—