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 — Ark UI
kbd.tsx
123456789101112131415import { Kbd } from "#components/ui/ark-ui/kbd.tsx";
export function Example() { return ( <> {/* variant + size props resolve through the StyleX recipe */} <Kbd variant="raised" size="md">⌘K</Kbd>
{/* composition: asChild forwards everything onto your element */} <Kbd asChild variant="outline"> <abbr title="Command">⌘</abbr> </Kbd> </> );}