RadCN
Displayreadycomponentready

Kbd

Semantic keyboard shortcut primitives for single keys, grouped chords, inline prose, and composed control hints.

Importimport { Kbd, KbdGroup } from 'radcn/kbd'
Preview

Live package example

Render Button, demo, inline group, InputGroup, and Tooltip shortcut examples with package primitives and app-owned presentation glyphs.

Example Parity

Render Button, demo, inline group, InputGroup, and Tooltip shortcut examples with package primitives and app-owned presentation glyphs.

Preview
⌘⇧⌥⌃
Ctrl+B
Use
Ctrl+B
for bold and
Ctrl+K
for links.
⌘K
import { Button } from 'radcn/button'
import { ButtonGroup } from 'radcn/button-group'
import { InputGroup, InputGroupAddon, InputGroupInput } from 'radcn/input-group'
import { Kbd, KbdGroup } from 'radcn/kbd'
import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from 'radcn/tooltip'

export function KbdPreview() {
  return (
    <div class="kbd-preview">
      <div data-radcn-docs-kbd-family="kbd-button">
        <Button size="sm" variant="outline">Save <Kbd>⏎</Kbd></Button>
        <Button size="sm" variant="outline">Cancel <Kbd>Esc</Kbd></Button>
      </div>

      <div data-radcn-docs-kbd-family="kbd-demo">
        <KbdGroup><Kbd>⌘</Kbd><Kbd>⇧</Kbd><Kbd>⌥</Kbd><Kbd>⌃</Kbd></KbdGroup>
        <KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>B</Kbd></KbdGroup>
      </div>

      <div data-radcn-docs-kbd-family="kbd-group">
        Use <KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>B</Kbd></KbdGroup> for bold and
        <KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>K</Kbd></KbdGroup> for links.
      </div>

      <div data-radcn-docs-kbd-family="kbd-input-group">
        <InputGroup ariaLabel="Search documentation">
          <InputGroupAddon align="inline-start"><span aria-hidden="true">S</span></InputGroupAddon>
          <InputGroupInput name="q" placeholder="Search documentation" />
          <InputGroupAddon align="inline-end"><Kbd>⌘</Kbd><Kbd>K</Kbd></InputGroupAddon>
        </InputGroup>
      </div>

      <div data-radcn-docs-kbd-family="kbd-tooltip">
        <ButtonGroup ariaLabel="Kbd tooltip shortcuts">
          <Tooltip defaultOpen>
            <TooltipTrigger class="radcn-button radcn-button--outline radcn-button--sm" ariaLabel="Save command">Save</TooltipTrigger>
            <TooltipPortal><TooltipContent>Save draft <Kbd>S</Kbd></TooltipContent></TooltipPortal>
          </Tooltip>
          <Tooltip defaultOpen>
            <TooltipTrigger class="radcn-button radcn-button--outline radcn-button--sm" ariaLabel="Print command">Print</TooltipTrigger>
            <TooltipPortal><TooltipContent>Print page <KbdGroup><Kbd>Ctrl</Kbd><span>+</span><Kbd>P</Kbd></KbdGroup></TooltipContent></TooltipPortal>
          </Tooltip>
        </ButtonGroup>
      </div>
    </div>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { Kbd, KbdGroup } from 'radcn/kbd'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • Kbd renders a semantic kbd element for individual keys and shortcut labels.
  • KbdGroup groups related shortcut pieces without taking over button, input, or tooltip behavior.
  • Search icons and other decorative glyphs should use aria-hidden when they do not provide the control name.
  • Button, ButtonGroup, InputGroup, and Tooltip keep their native roles and labels when composed with Kbd.

Customization

  • Kbd exposes data-radcn-kbd and the radcn-kbd class for app-level size, border, background, and text styling.
  • KbdGroup exposes data-radcn-kbd-group and the radcn-kbd-group class for chord layout and inline composition.
  • Shortcut separators such as plus signs are authored content around Kbd rather than package behavior.
  • TooltipContent and InputGroup addons can style nested Kbd elements through their own public hooks, classes, and CSS variables.

Remix 3 Notes

  • shadcn/ui data-slot="kbd" and data-slot="kbd-group" map to RadCN public data-radcn-kbd and data-radcn-kbd-group hooks.
  • Tailwind utility and tooltip-context styling maps to RadCN classes, inline styles, and app CSS variables.
  • lucide icons are app presentation choices; RadCN Kbd examples use app-owned spans or inline SVGs instead of adding an icon dependency.
  • TooltipTrigger asChild maps to explicit RadCN TooltipTrigger composition, avoiding Radix Slot while preserving visible trigger behavior.
  • Kbd does not own Button, ButtonGroup, InputGroup, Tooltip, command palette, icon-package, or shortcut-routing state.