Kbd
A shadcn-style keyboard key component for shortcuts and key combinations.
Single keys:
K⌘⌃⇧
Key combinations:
⌘K⌘ShiftPCtrlAltDelete
import { Kbd, KbdGroup } from "@/components/ui/kbd";
const KbdDemo = () => {
return (
<div className="flex flex-col gap-4">
<div>
<p className="mb-2 text-muted-foreground text-sm">Single keys:</p>
<div className="flex flex-wrap gap-2">
<Kbd>K</Kbd>
<Kbd>⌘</Kbd>
<Kbd>⌃</Kbd>
<Kbd>⇧</Kbd>
</div>
</div>
<div>
<p className="mb-2 text-muted-foreground text-sm">Key combinations:</p>
<div className="flex flex-wrap gap-2">
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>Shift</Kbd>
<Kbd>P</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>Alt</Kbd>
<Kbd>Delete</Kbd>
</KbdGroup>
</div>
</div>
</div>
);
};
export default KbdDemo;
Installation
npx shadcn@latest add @ark-cn/kbdInstall the dependency required by this primitive:
npm install @ark-ui/reactCopy the component source into your app:
TSXcomponents/ui/kbd.tsx
"use client";
import { ark } from "@ark-ui/react/factory";
import type { ComponentProps } from "react";
import { cn } from "@/lib/utils";
export const Kbd = ({
className,
...props
}: ComponentProps<typeof ark.kbd>) => {
return (
<ark.kbd
className={cn(
"pointer-events-none inline-flex h-5 min-w-5 select-none items-center justify-center gap-1 rounded bg-muted px-1 font-medium font-sans text-muted-foreground text-xs [&_svg:not([class*='size-'])]:size-3",
className,
)}
data-slot="kbd"
{...props}
/>
);
};
export const KbdGroup = ({
className,
...props
}: ComponentProps<typeof ark.kbd>) => {
return (
<ark.kbd
className={cn("inline-flex items-center gap-1", className)}
data-slot="kbd-group"
{...props}
/>
);
};
Update import aliases to match your project setup.
Usage
import { Kbd, KbdGroup } from "@/components/ui/kbd"Examples
Default
Single keys:
K⌘⌃⇧
Key combinations:
⌘K⌘ShiftPCtrlAltDelete
import { Kbd, KbdGroup } from "@/components/ui/kbd";
const KbdDemo = () => {
return (
<div className="flex flex-col gap-4">
<div>
<p className="mb-2 text-muted-foreground text-sm">Single keys:</p>
<div className="flex flex-wrap gap-2">
<Kbd>K</Kbd>
<Kbd>⌘</Kbd>
<Kbd>⌃</Kbd>
<Kbd>⇧</Kbd>
</div>
</div>
<div>
<p className="mb-2 text-muted-foreground text-sm">Key combinations:</p>
<div className="flex flex-wrap gap-2">
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>Shift</Kbd>
<Kbd>P</Kbd>
</KbdGroup>
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>Alt</Kbd>
<Kbd>Delete</Kbd>
</KbdGroup>
</div>
</div>
</div>
);
};
export default KbdDemo;
Inline Shortcut
Press ⌘K to open command search.
import { Kbd, KbdGroup } from "@/components/ui/kbd";
const KbdInline = () => {
return (
<p className="text-sm">
Press{" "}
<KbdGroup>
<Kbd>⌘</Kbd>
<Kbd>K</Kbd>
</KbdGroup>{" "}
to open command search.
</p>
);
};
export default KbdInline;