Candor UI

Kbd

Pro

Keyboard keys, single or grouped, as shown in menus and shortcuts.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/kbd

Brings in: utils

Usage

TSX · The example above
"use client"

import { Kbd, KbdGroup } from "@/components/ui/kbd"

export default function Example() {
  return (
    <div className="flex flex-col gap-2 text-sm text-muted-foreground">
      <p>
        Search repositories, tables and flags with{" "}
        <KbdGroup>
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </KbdGroup>
      </p>
      <p>
        Send your message with <Kbd>Enter</Kbd>; add a line with{" "}
        <KbdGroup>
          <Kbd>Shift</Kbd>
          <Kbd>Enter</Kbd>
        </KbdGroup>
      </p>
    </div>
  )
}

<Kbd>

No props.

Also takes the props of React.ComponentProps<"kbd">.

<KbdGroup>

No props.

Also takes the props of React.ComponentProps<"kbd">.