Dashral Pro is on the wayGet 30% off at launch

Dashral

Kbd

A key or a shortcut as on a keyboard: ⌘ K on a Mac, Ctrl K elsewhere, read out as words.

$ pnpm dlx shadcn@latest add https://dashral.com/r/kbd.json

Search

New tab

Close Esc

Small

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/kbd.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/kbd

Usage

example.tsx
import { Kbd } from "@/components/dashral/kbd"

<Kbd keys={["mod", "K"]} />

Examples

In a menu and a button

Beside what the keys do the same as: a search button, menu items.

  • New project
  • Duplicate
  • Delete

API reference

Kbd

Also takes every prop of <kbd>(opens in a new tab).

PropTypeDefault
keysstring[]

A shortcut's keys, e.g. ["mod", "K"]. "mod" is ⌘ on a Mac and Ctrl elsewhere; "shift", "alt", "ctrl", "enter", "esc", "tab", "backspace", "space" and "up" / "down" / "left" / "right" show as symbols and are read out by name.

—
childrenReactNode

A single key, as text, when keys isn't given.

—
size"sm" | "default"

20px or 24px caps.

"default"
classNamestring

Extra classes, merged with cn() so yours win.

—

Accessibility

  • A shortcut is nested <kbd> elements, read out as words ("Command K") through aria-label, not as symbols.
  • Mac or not is worked out after the page loads; the first paint shows ⌘.