# Kbd

A component for displaying keyboard keys and shortcuts.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { Kbd, KbdGroup } from "coss-svelte";
</script>

<div class="flex flex-col gap-4">
	<div>
		<p class="mb-2 text-muted-foreground text-sm">Single keys:</p>
		<div class="flex gap-2">
			<Kbd>K</Kbd>
			<Kbd>⌘</Kbd>
			<Kbd>⌃</Kbd>
			<Kbd>⇧</Kbd>
		</div>
	</div>
	<div>
		<p class="mb-2 text-muted-foreground text-sm">Key combinations:</p>
		<div class="flex 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>

```

## Anatomy

- `Kbd`
- `KbdGroup`

## API Reference

### Kbd

A component for displaying keyboard keys and shortcuts.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <kbd> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### KbdGroup

Groups related items inside the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <kbd> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | native |
| Category | Content & Display |
| Particles | 1 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/kbd.json` for the complete local file and dependency closure.
- Kbd is stable in the current source catalog.