kbd - examples - Adam Jurek

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Phone22remthe floor, the narrowest this promises to work at

tanstacktanstack add https://adamjurek.com/r/tanstack/kbd.json

shadcnpnpm dlx shadcn@latest add https://adamjurek.com/r/shadcn/kbd.json

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { Item, Kbd } from "@sushindustries/ui";

export function ShortcutRow() {
	return (
		<div className="item">
			<span className="min-w-0">
				<span className="block font-semibold text-sm">Open search</span>
			</span>
			<span className="flex items-center gap-1 shrink-0">
				<Kbd>⌘</Kbd>
				<Kbd>K</Kbd>
			</span>
		</div>
	);
}

tsx

What this example is not

This reuses the itemItemOne row of a list: tile, title, description, meta - the nav panel's anatomy, extracted for reuse.@sushindustries/ui · layout class by hand rather than the ItemItemOne row of a list: tile, title, description, meta - the nav panel's anatomy, extracted for reuse.@sushindustries/ui · layout component, because ItemItemOne row of a list: tile, title, description, meta - the nav panel's anatomy, extracted for reuse.@sushindustries/ui · layout's meta slot is plain text and cannot hold two chips side by side - a shortcuts list needs the row shape without the rest of ItemItemOne row of a list: tile, title, description, meta - the nav panel's anatomy, extracted for reuse.@sushindustries/ui · layout's layout decisions.