---
title: Kbd
description: A key, drawn as one. Semantically <kbd>, visually the chip the command palette already wears.
source: https://adamjurek.com/components/kbd
---

## Home


A single keyboard key, rendered as the semantic `<kbd>` element and styled as
the chip the command palette already wears. Reach for it anywhere prose or a
tooltip needs to show a key someone can press.

<!-- ::start:showcase demo="kbd" height="380" -->
<!-- ::end:showcase -->

## Why it is built this way

The command palette already drew this chip for its own shortcuts, so `Kbd`
exists to be that one shape for "press this" everywhere it appears, rather
than a border and a background reinvented per page.

## What it does not do

It holds one key, not a chord. `⌘K` is two `<Kbd>` elements joined by plain
text or a `+`, not one `<Kbd>` wrapping both characters - the chip shape was
drawn for a single press, and a chord inside it reads as one press instead
of two.

> [!NOTE] Install commands are not written here
> Anything in `packages/ui/registry.ts` gets its TanStack and shadcn commands
> attached automatically, so there is nothing to keep in sync.


## Install

<!-- ::start:tabs -->

### TanStack

```shell
tanstack add https://adamjurek.com/r/tanstack/kbd.json
```

### shadcn

```shell
pnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/kbd.json
```

### pnpm

```shell
pnpm add @sushindustries/ui @sushindustries/atoms
```

<!-- ::end:tabs -->

## What you get

| | |
| --- | --- |
| Version | 0.1.0 |
| Category | content · Text |
| Files | `kbd.tsx` |
| Dependencies | None |
| Tags | keyboard, no-deps |

> [!NOTE] No runtime dependencies
> It brings nothing with it beyond the stylesheet.

## Get Started


Install commands are on Home, attached from the registry - they are not written
here, because a second copy is a copy that goes stale. This tab starts after the
install worked.

## Use it

```tsx
import { Kbd } from "@sushindustries/ui";

export function Example() {
	return (
		<p>
			Press <Kbd>⌘</Kbd><Kbd>K</Kbd> to search.
		</p>
	);
}
```

## What you should see

Two small chips, each holding one character, in a monospace-leaning face with
a faint border and a slightly raised background - the same chip the command
palette shows for `esc`. There is no built-in "+" between them; that comes
from the surrounding text or markup, not from `Kbd` itself.

## If nothing happens

The chip look comes from the `palette-kbd` class from `@sushindustries/atoms`.
Without that stylesheet loaded, `Kbd` still renders a semantic `<kbd>`
element with your text inside, just unstyled.


## Guides


The Guides tab is for the things that are true after it works. If it belongs in
"how do I install this", it goes in Get Started; if it is a prop table, it goes
in API.

## One key per Kbd

A shortcut with more than one key - `⌘K`, `Ctrl+Shift+P` - is more than one
`<Kbd>`, joined by plain text or a `+`, not one `<Kbd>` with both characters
inside it:

```tsx
<Kbd>⌘</Kbd>+<Kbd>K</Kbd>
```

That is what the command palette itself does for its own shortcuts. A single
`<kbd>` wrapping "⌘K" would still render, but it reads as one press rather
than a chord, and the chip shape was drawn for a single key.


## API


<!-- generated:api -->

## Props

| Prop | Type | Default | Does |
| --- | --- | --- | --- |
| `children` | `ReactNode` | - |  |

<!-- /generated:api -->

## Notes

One prop, and it is the whole content of the chip - there is no `label` or
`tone` to set separately. `children` is not restricted to a single
character; a longer string still renders, it just widens the chip rather
than wrapping.


## Examples


Examples are the tab where the component is shown doing a job, not
demonstrating a prop. The API tab already lists the props.

<!-- ::start:showcase demo="kbd" height="420" -->
<!-- ::end:showcase -->

Press Compare. The frames are real viewports, so a layout that breaks at 320
breaks here too rather than in somebody's hands.

## In a page

```tsx
import { Item, Kbd } from "@sushindustries/ui";

export function ShortcutRow() {
	return (
		<div className="item">
			<span className="min-w-0">
				<span className="block font-semibold text-sm">Open search</span>
			</span>
			<span className="flex items-center gap-1 shrink-0">
				<Kbd>⌘</Kbd>
				<Kbd>K</Kbd>
			</span>
		</div>
	);
}
```

## What this example is not

This reuses the `item` class by hand rather than the `Item` component,
because `Item`'s `meta` slot is plain text and cannot hold two chips side by
side - a shortcuts list needs the row shape without the rest of `Item`'s
layout decisions.