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 @herocn/kbd

Usage

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

<Kbd>Ctrl</Kbd>

Composition

Use the following composition to build Kbd and KbdGroup:

KbdKbdGroup├── 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

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`	—