Kbd

Used to display textual user input from keyboard.

⌘⇧⌥⌃Ctrl+B

import { styled } from "styled-system/jsx";
import { Kbd, KbdGroup } from "@/components/ui/kbd";

export default function KbdDemo() {
  return (
    <styled.div css={{ display: "flex", flexDir: "column", alignItems: "center", gap: "4" }}>
      <KbdGroup>
        <Kbd>⌘</Kbd>
        <Kbd>⇧</Kbd>
        <Kbd>⌥</Kbd>
        <Kbd>⌃</Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <span>+</span>
        <Kbd>B</Kbd>
      </KbdGroup>
    </styled.div>
  );
}

Installation

npx nore-ui-cli@latest add kbd

Usage

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

<Kbd>Ctrl</Kbd>

Examples

Group

Use the KbdGroup component to group keyboard keys together.

Use Ctrl + BCtrl + K to open the command palette

import { styled } from "styled-system/jsx";
import { Kbd, KbdGroup } from "@/components/ui/kbd";

export default function KbdGroupExample() {
  return (
    <styled.div css={{ display: "flex", flexDir: "column", alignItems: "center", gap: "4" }}>
      <styled.p css={{ color: "muted.fg", textStyle: "sm" }}>
        Use{" "}
        <KbdGroup>
          <Kbd>Ctrl + B</Kbd>
          <Kbd>Ctrl + K</Kbd>
        </KbdGroup>{" "}
        to open the command palette
      </styled.p>
    </styled.div>
  );
}

Button

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

import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Kbd } from "@/components/ui/kbd";

export default function KbdButton() {
  return (
    <styled.div css={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: "4" }}>
      <Button variant="outline" size="sm" css={{ pr: "2" }}>
        Accept <Kbd>⏎</Kbd>
      </Button>
      <Button variant="outline" size="sm" css={{ pr: "2" }}>
        Cancel <Kbd>Esc</Kbd>
      </Button>
    </styled.div>
  );
}

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

import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import { Kbd, KbdGroup } from "@/components/ui/kbd";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

export default function KbdTooltip() {
  return (
    <styled.div css={{ display: "flex", flexWrap: "wrap", gap: "4" }}>
      <ButtonGroup>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button size="sm" variant="outline">
              Save
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <styled.div css={{ display: "flex", alignItems: "center", gap: "2" }}>
              Save Changes <Kbd>S</Kbd>
            </styled.div>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button size="sm" variant="outline">
              Print
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <styled.div css={{ display: "flex", alignItems: "center", gap: "2" }}>
              Print Document{" "}
              <KbdGroup>
                <Kbd>Ctrl</Kbd>
                <Kbd>P</Kbd>
              </KbdGroup>
            </styled.div>
          </TooltipContent>
        </Tooltip>
      </ButtonGroup>
    </styled.div>
  );
}

Input Group

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

⌘K

import { LuSearch } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
import { Kbd } from "@/components/ui/kbd";

export default function KbdInputGroup() {
  return (
    <styled.div css={{ display: "flex", w: "full", maxW: "xs", flexDir: "column", gap: "6" }}>
      <InputGroup>
        <InputGroupInput placeholder="Search..." />
        <InputGroupAddon>
          <LuSearch />
        </InputGroupAddon>
        <InputGroupAddon align="inline-end">
          <Kbd>⌘</Kbd>
          <Kbd>K</Kbd>
        </InputGroupAddon>
      </InputGroup>
    </styled.div>
  );
}

API Reference

Kbd

Use the Kbd component to display a keyboard key.

Prop	Type	Default
`css`	`SystemStyleObject`

<Kbd>Ctrl</Kbd>

KbdGroup

Use the KbdGroup component to group Kbd components together.

Prop	Type	Default
`css`	`SystemStyleObject`

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>