Kbd

A component for displaying keyboard keys and shortcuts.

<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>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Kbd, KbdGroup } from "coss-svelte";

Anatomy

Kbd
KbdGroup

API Reference

Kbd

A component for displaying keyboard keys and shortcuts.

children : Snippet<[]>

Inherits from Svelte <kbd> attributes.

KbdGroup

Groups related items inside the parent component.

children : Snippet<[]>

Inherits from Svelte <kbd> attributes.

Implementation Details

Status: Stable
Foundation: native
Category: Content & Display
Particles: 1