Typography

Kbd

A keyboard key, for documenting shortcuts.

Server safeSource

Import

import { Kbd } from '@the_viveksingh/vivek-ui'

Keys

EscEnterShiftTab

<Kbd size="sm">Esc</Kbd>
<Kbd>Enter</Kbd>
<Kbd>Shift</Kbd>
<Kbd>Tab</Kbd>

In a sentence

Press Ctrl K to open the command palette.

<Text>
  Press <Kbd>Ctrl</Kbd> <Kbd>K</Kbd> to open the command palette.
</Text>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Kbd
Prop	Type	Default	Description
`size`	`'sm' \| 'md'`	—	—

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Kbd carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.