Kbd

new

Renders keyboard shortcuts consistently across platforms.

since v3.50.4 kB gzip

Preview

Code

Open search ⌘K

Toggle sidebar ⌘B

Copy code ⇧⌘C

CLI

Manual

npm

pnpm

bun

yarn

$ npx @strata/cli add kbd

React

Import only

import { Kbd, KbdGroup } from "@/components/strata";

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

Prop	Type	Default
`size` Key cap size.	"sm" \| "md"	"md"
`className` Extra Strata utilities, optionally derived from render state.	string \| (state) => string	—

Badge

Compact status or count label in four styles.

Avatar

User image with initials fallback, presence dot and stacked groups.

Was this page helpful?

Documented since v3.5 · components/kbd.mdx