Kbd

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

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 KbdKbdA key, drawn as one. Semantically <kbd>, visually the chip the command palette already wears.@sushindustries/ui · content itself.

If nothing happens

The chip look comes from the palette-kbd class from @sushindustries/atoms@sushindustries/atomsThe design tokens and the atomic utilities built on them. One stylesheet, no build step, no framework.package. Without that stylesheet loaded, KbdKbdA key, drawn as one. Semantically <kbd>, visually the chip the command palette already wears.@sushindustries/ui · content still renders a semantic <kbd> element with your text inside, just unstyled.