All components
Kbd
Keyboard shortcut hints with raised, outline, subtle, and plain treatments.
⌘K
Variants
⌘Kraised
⌘Koutline
⌘Ksubtle
⌘Kplain
Sizes
⌘Kxs
⌘Ksm
⌘Kmd
⌘Klg
Install
zsh — kbd
1bunx stylexblocks add kbdUsage — Base UI
kbd.tsx
1234567891011121314import { Kbd } from "#components/ui/base-ui/kbd.tsx";
export function Example() { return ( <> {/* variant + size props resolve through the StyleX recipe and are exposed as data-variant / data-size attributes */} <Kbd variant="raised" size="md">⌘K</Kbd>
{/* composition: the render prop replaces the underlying element */} <Kbd variant="outline" render={<abbr title="Command" />}>⌘</Kbd> </> );}