Kbd

Inline keystroke affordance. Renders a native `<kbd>` with a muted chip treatment; wrap a KbdGroup around chords or sequences.

Single key

⌘ Enter Esc Tab

kbd.svelte

<script lang="ts">
	import { Kbd } from '$lib/components/ui/kbd';
</script>

<Kbd>⌘</Kbd>
<Kbd>Enter</Kbd>

Chord

⌘ K Shift ? Ctrl Alt Del

kbd-chord.svelte

<script lang="ts">
	import { Kbd, KbdGroup } from '$lib/components/ui/kbd';
</script>

<KbdGroup>
	<Kbd>⌘</Kbd>
	<Kbd>K</Kbd>
</KbdGroup>

Inline with copy

Press ⌘K to open the command palette, or ? for shortcuts.

kbd.svelte

<script lang="ts">
	import { cn, type WithElementRef } from '$lib/utils.js';
	import type { HTMLAttributes } from 'svelte/elements';

	let {
		ref = $bindable(null),
		class: className,
		children,
		...restProps
	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>

<kbd
	bind:this={ref}
	data-slot="kbd"
	class={cn(
		"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
		className
	)}
	{...restProps}
>
	{@render children?.()}
</kbd>

Inside Button

Append a KbdGroup inside a Button to surface a keyboard shortcut hint directly on the control.

kbd-in-button.svelte

<script lang="ts">
	import { Kbd, KbdGroup } from '$lib/components/ui/kbd';
	import { Button } from '$lib/components/ui/button';
</script>

<Button variant="outline">
	Search
	<KbdGroup>
		<Kbd>⌘</Kbd>
		<Kbd>K</Kbd>
	</KbdGroup>
</Button>

Place a KbdGroup inside TooltipContent to show the shortcut only on hover — keeps the trigger clean.

kbd-in-tooltip.svelte

<script lang="ts">
	import { Kbd, KbdGroup } from '$lib/components/ui/kbd';
	import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '$lib/components/ui/tooltip';
	import { Button } from '$lib/components/ui/button';
</script>

<TooltipProvider>
	<Tooltip>
		<TooltipTrigger>
			{#snippet child({ props })}
				<Button variant="ghost" size="icon" aria-label="Search" {...props}>⌕</Button>
			{/snippet}
		</TooltipTrigger>
		<TooltipContent>
			Search
			<KbdGroup>
				<Kbd>⌘</Kbd>
				<Kbd>K</Kbd>
			</KbdGroup>
		</TooltipContent>
	</Tooltip>
</TooltipProvider>

Inside Input Group

An inline-end addon containing Kbd signals the shortcut that opens or activates a search field.

⌘ K

kbd-in-input-group.svelte

<script lang="ts">
	import { Kbd, KbdGroup } from '$lib/components/ui/kbd';
	import { InputGroup, InputGroupAddon, InputGroupInput } from '$lib/components/ui/input-group';
	import { Icon } from '$lib/components/ui/icon';
</script>

<InputGroup>
	<InputGroupAddon>
		<Icon name="search-line" size="1rem" class="mx-2 size-4 text-muted-foreground" />
	</InputGroupAddon>
	<InputGroupInput placeholder="Search…" />
	<InputGroupAddon align="inline-end" class="pr-2">
		<KbdGroup>
			<Kbd>⌘</Kbd>
			<Kbd>K</Kbd>
		</KbdGroup>
	</InputGroupAddon>
</InputGroup>

Kbd props

Both Kbd and KbdGroup accept every native HTML attribute via spread. Inside tooltips, Kbd inverts its surface automatically.

Prop	Type	Default	Description
	`string`	—	Merged onto the root <kbd> via tailwind-merge.
	`HTMLElement \| null`	`null`	Two-way-bindable element reference.