codefast/ui

Command Palette

Search for a command to run...

Source
Display

Kbd

Keyboard shortcut display. Use KbdGroup to compose multi-key combos.

Examples

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

13 lines
import { Button } from "@codefast/ui/button";
import { Kbd } from "@codefast/ui/kbd";

export function KbdButton() {
  return (
    <Button variant="outline">
      Accept{" "}
      <Kbd data-icon="inline-end" className="translate-x-0.5">
        ⏎
      </Kbd>
    </Button>
  );
}

Group

Use the KbdGroup component to group keyboard keys together.

Use Ctrl + BCtrl + K to open the command palette

16 lines
import { Kbd, KbdGroup } from "@codefast/ui/kbd";

export function KbdGroupExample() {
  return (
    <div className="flex flex-col items-center gap-4">
      <p className="text-sm text-ui-muted">
        Use{" "}
        <KbdGroup>
          <Kbd>Ctrl + B</Kbd>
          <Kbd>Ctrl + K</Kbd>
        </KbdGroup>{" "}
        to open the command palette
      </p>
    </div>
  );
}

Input Group

You can use the Kbd component inside a InputGroupAddon component to display a keyboard key inside an input group.

⌘K
20 lines
import { InputGroup, InputGroupAddon, InputGroupInput } from "@codefast/ui/input-group";
import { Kbd } from "@codefast/ui/kbd";
import { SearchIcon } from "lucide-react";

export function KbdInputGroup() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-6">
      <InputGroup>
        <InputGroupInput placeholder="Search..." />
        <InputGroupAddon>
          <SearchIcon />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

⌘⇧⌥⌃Ctrl+B
39 lines
import { Kbd, KbdGroup } from "@codefast/ui/kbd";

import type { Translations } from "#/features/components-catalog/components/detail/language";
import { useTranslation } from "#/features/components-catalog/components/detail/language-context";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {},
  },
  ar: {
    dir: "rtl",
    values: {},
  },
  he: {
    dir: "rtl",
    values: {},
  },
};

export function KbdRtl() {
  const { dir } = useTranslation(translations, "ar");

  return (
    <div className="flex flex-col items-center gap-4" dir={dir}>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>⌥</Kbd>
        <Kbd>⌃</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>B</Kbd>
      </KbdGroup>
    </div>
  );
}

Tooltip

You can use the Kbd component inside a Tooltip component to display a tooltip with a keyboard key.

33 lines
import { Button } from "@codefast/ui/button";
import { ButtonGroup } from "@codefast/ui/button-group";
import { Kbd, KbdGroup } from "@codefast/ui/kbd";
import { Tooltip, TooltipContent, TooltipTrigger } from "@codefast/ui/tooltip";

export function KbdTooltip() {
  return (
    <div className="flex flex-wrap gap-4">
      <ButtonGroup>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">Save</Button>
          </TooltipTrigger>
          <TooltipContent>
            Save Changes <Kbd>S</Kbd>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button variant="outline">Print</Button>
          </TooltipTrigger>
          <TooltipContent>
            Print Document{" "}
            <KbdGroup>
              <Kbd>Ctrl</Kbd>
              <Kbd>P</Kbd>
            </KbdGroup>
          </TooltipContent>
        </Tooltip>
      </ButtonGroup>
    </div>
  );
}

Usage

The minimal import and composition — see Examples below for styled, real-world variants.

5 lines
import { Kbd } from "@codefast/ui/kbd";

export function KbdUsage() {
  return <Kbd>⌘</Kbd>;
}

Anatomy

How the parts nest — every slot the component exposes, in composition order.

KbdGroup
├── Kbd
└── Kbd

Features

  • Automatically re-themes when placed inside a TooltipContent (dims to match the dark tooltip surface) or an InputGroupAddon — no manual colour override needed.
  • KbdGroup lays out several Kbd elements (or a Kbd next to plain text like "+") for multi-key combos.

API reference

Props for each part of the component. All native element props are also forwarded.

Kbd

A single keyboard key.

childrenReactNode

The key label, e.g. ⌘, Ctrl, Enter.

KbdGroup

childrenReactNode

Several Kbd elements that form one shortcut.

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

  • Kbd is presentational — it doesn’t bind any keyboard behaviour itself.
  • Use real key names so the shortcut reads correctly to everyone.
  • Match the symbols to the user’s platform (⌘ on macOS, Ctrl elsewhere) when you can.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Use to document shortcuts in menus, tooltips, and help text.
  • Group multi-key combos with KbdGroup.

Don’t

  • Don’t use Kbd for non-keyboard content.
  • Don’t invent symbols users won’t recognise.

Explore further

Ready to integrate?

Follow the Getting Started guide to install @codefast/ui, or browse the full component gallery.

Getting StartedBrowse all components