Primitives

Kbd

One look for every keyboard hint: a key cap chip, or plain text for rows that already have a surface. Inside a highlighted menu or palette row it takes the brand ink. Dropdown, CommandPalette, Tooltip and Input all use it.

view .md

Preview

chip

⌘Kesc↵↑↓⌘+⇧+P

in a button and an input

Installation

terminal

bash

npx @entrepta/cli@latest add kbd

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

kbd.tsx

tsx

import { Kbd } from "@/components/entrepta/kbd"

<Kbd>⌘K</Kbd>
<Button variant="secondary">search <Kbd>/</Kbd></Button>
<span><Kbd>⌘</Kbd>+<Kbd>⇧</Kbd>+<Kbd>P</Kbd></span>

// in a row with its own surface, such as a menu item
<Kbd variant="plain">⌘P</Kbd>

Props

Prop	Type	Default	Description
variant	"chip" \| "plain"	"chip"	A bordered key cap, or bare text