Kbd — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to React Aria.

Installation

Complete project setup first. Your configuration must select react/aria and include your Design System ID.

pnpm exec frontfriend download kbd -f react --primitive aria

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { Kbd } from "@/components/ui/kbd";
<Kbd>⌘ K</Kbd>;

No component-specific props are declared in registry metadata; inherited HTML/Radix/Reka props are supported by the component implementation.

Subcomponents

KbdGroup

Examples

Default

import { Kbd } from "@/components/ui/kbd";
<Kbd>⌘</Kbd>;

Combo

import { KbdGroup, Kbd } from "@/components/ui/kbd";
<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>;

Inline

import { KbdGroup, Kbd } from "@/components/ui/kbd";
<p className="text-sm text-neutral-mid">
  Press{" "}
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>{" "}
  to open the command menu.
</p>;

In Button

import { Button } from "@/components/ui/button";
import { KbdGroup, Kbd } from "@/components/ui/kbd";
<Button variant="tertiary" size="sm">
  Search
  <KbdGroup>
    <Kbd>⌘</Kbd>
    <Kbd>K</Kbd>
  </KbdGroup>
</Button>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by React Aria.

This component adds no props of its own to React Aria.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.