Constella

Kbd

Shows a key or a shortcut.

View as Markdown
⌘⇧⌥⌃Ctrl+B
<KbdGroup>  <Kbd>⌘</Kbd>  <Kbd>⇧</Kbd>  <Kbd>⌥</Kbd>  <Kbd>⌃</Kbd></KbdGroup><KbdGroup>  <Kbd>Ctrl</Kbd>  <span>+</span>  <Kbd>B</Kbd></KbdGroup>

Installation

$ npx shadcn@latest add @constella/kbd

Usage

import { Kbd, KbdGroup } from "@/components/primitives/kbd";
<Kbd>Ctrl</Kbd>

Composition

KbdGroup└── Kbd

Group

Use KbdGroup to keep keys together.

Use Ctrl + BCtrl + K to open the command palette

<p>  Use{" "}  <KbdGroup>    <Kbd>Ctrl + B</Kbd>    <Kbd>Ctrl + K</Kbd>  </KbdGroup>{" "}  to open the command palette</p>

Button

Put a Kbd inside a Button with data-icon="inline-end", so the button tightens its end around it.

<Button size="sm" variant="outline">  Accept <Kbd data-icon="inline-end">⏎</Kbd></Button>

Tooltip

Inside a Tooltip, the key inverts with the popup.

<Tooltip>  <TooltipTrigger render={<Button size="sm" variant="outline" />}>    Print  </TooltipTrigger>  <TooltipContent>    Print Document{" "}    <KbdGroup>      <Kbd>Ctrl</Kbd>      <Kbd>P</Kbd>    </KbdGroup>  </TooltipContent></Tooltip>

API Reference

Kbd and KbdGroup take every prop of <kbd>, plus sx, applied last. Kbd also takes render; see Base UI useRender.