Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Inline with Text Kbd for Svelte

⌘ and K set inline in a sentence about opening the command palette. The caps are labels, not a live shortcut.

UI library: Ark UI

A short paragraph reads Press, then a ⌘ cap, a K cap, and the rest of the sentence. The caps are inline. They do not open a palette.

Use inline caps when you are teaching the shortcut in prose. On a control, group them. The palette itself is a Command. In Svelte, Ark UI does not listen for the keys in the sentence.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Part of Pro

Anatomy

Kbd anatomy: kbd, group

Usage

<div class="rounded-md border bg-background p-4"><p class="text-sm">Press <Kbd>⌘</Kbd> <Kbd>K</Kbd> to open the command palette</p></div>

FAQ

Should inline key caps match the surrounding text size?

Close to it. The Kbd's extra-small type sits well in small text like this paragraph. In larger body text, the caps read a bit smaller than the words, which is fine; if they look too small, raise their text size one step.

How should inline key caps be spaced?

Ordinary spaces in the text, as here, are enough between a word and a cap. To keep the keys of one shortcut tight together, put them in a KbdGroup instead of separating them with spaces.

When should I use separate Kbd caps instead of a KbdGroup?

A KbdGroup marks the keys as one shortcut pressed together and spaces them evenly. Separate caps in the text read as separate keys. For a chord like ⌘K, a KbdGroup inside the sentence is usually clearer.

Are inline key caps accessible?

Yes. Kbd renders a kbd element, and screen readers read its text as part of the sentence. A symbol like ⌘ may be read as a symbol name or skipped, so for important instructions add the key's name as visually hidden text.

Should inline key caps look different from standalone ones?

Usually not: the same cap in a sentence and next to a menu item helps people recognize shortcuts. If the caps look heavy in long text, a lighter fill on them is enough.

What happens when a shortcut wraps to the next line?

Separate caps can end up on different lines, splitting ⌘ from K. A KbdGroup doesn't wrap inside, so put chords in one to keep them together.

API Reference

Kbd

No extra props in this demo. The rest is on the Kbd page.