Kbd
XS · 350B gzip budgetA single keyboard key, styled and marked up as one.
- Category
- Accessibility & preferences
- Budget
- xs, static display primitive
- External runtime
- React / React DOM only
axe fixtureSSR rendersource scanbundle budget
Preview
Live fixtureEsc
Try the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.
Install
npx shadcn@latest add https://gear5-ui.vercel.app/r/kbd.jsonCopies the source into your project. Pulls in 1 shared registry item: cn.
New here? Set up Tailwind and import aliases first →Source & props
Edit on GitHub ↗Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.
import { cn } from "../lib/cn";
/**
* A single keyboard key, styled like one and marked up as one.
*
* `<kbd>` over a styled `<span>` because screen readers that expose landmark
* navigation announce it distinctly, and browser find-in-page / translation
* tools treat it as inline code rather than prose to reflow.
*/
export function Kbd({ children, className }: { children: React.ReactNode; className?: string }) {
return (
<kbd
className={cn(
"inline-flex min-w-5 items-center justify-center rounded border border-neutral-300 bg-neutral-100 px-1.5 py-0.5 font-mono text-xs text-neutral-700 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-300",
className,
)}
>
{children}
</kbd>
);
}
What CI checks
Quality contract- Bundled, minified and gzipped against its tier budget
- Audited by axe in the state previewed above
- Rendered through react-dom/server with no browser globals
- Scanned for network calls, dangerous sinks, and unguarded animation