Zaidan

Command Palette

Search for a command to run...

GitHub

Kbd

Used to display textual user input from keyboard.

Installation

CLI

Manual

Copy and paste the following code into your project.

import type { ComponentProps } from "solid-js";
import { splitProps } from "solid-js";


import { cn } from "~/lib/utils";


type KbdProps = ComponentProps<"kbd">;


const Kbd = (props: KbdProps) => {
  const [local, others] = splitProps(props, ["class"]);


  return (
    <kbd
      class={cn(
        "pointer-events-none z-kbd inline-flex select-none items-center justify-center",
        local.class,
      )}
      data-slot="kbd"
      {...others}
    />
  );
};


type KbdGroupProps = ComponentProps<"div">;


const KbdGroup = (props: KbdGroupProps) => {
  const [local, others] = splitProps(props, ["class"]);


  return (
    <div
      class={cn("z-kbd-group inline-flex items-center", local.class)}
      data-slot="kbd-group"
      {...others}
    />
  );
};


export { Kbd, KbdGroup };

Examples

Here are the source code of all the examples from the preview page:

Basic

import { Kbd } from "~/components/ui/kbd";
function KbdBasic() {
  return (
    <Example title="Basic">
      <div class="flex items-center gap-2">
        <Kbd>Ctrl</Kbd>
        <Kbd>⌘K</Kbd>
        <Kbd>Ctrl + B</Kbd>
      </div>
    </Example>
  );
}

Modifier Keys

import { Kbd } from "~/components/ui/kbd";
function KbdModifierKeys() {
  return (
    <Example title="Modifier Keys">
      <div class="flex items-center gap-2">
        <Kbd>⌘</Kbd>
        <Kbd>C</Kbd>
      </div>
    </Example>
  );
}

KbdGroup

Use the KbdGroup component to group keyboard keys together.

import { Kbd, KbdGroup } from "~/components/ui/kbd";
function KbdGroupExample() {
  return (
    <Example title="KbdGroup">
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </Example>
  );
}

Arrow Keys

import { Kbd } from "~/components/ui/kbd";
function KbdArrowKeys() {
  return (
    <Example title="Arrow Keys">
      <div class="flex items-center gap-2">
        <Kbd>↑</Kbd>
        <Kbd>↓</Kbd>
        <Kbd>←</Kbd>
        <Kbd>→</Kbd>
      </div>
    </Example>
  );
}

With Icons

import { ArrowLeft, ArrowRight, CircleDashed } from "lucide-solid";
import { Kbd, KbdGroup } from "~/components/ui/kbd";
function KbdWithIcons() {
  return (
    <Example title="With Icons">
      <KbdGroup>
        <Kbd>
          <CircleDashed />
        </Kbd>
        <Kbd>
          <ArrowLeft />
        </Kbd>
        <Kbd>
          <ArrowRight />
        </Kbd>
      </KbdGroup>
    </Example>
  );
}

With Icons and Text

import { ArrowLeft, CircleDashed } from "lucide-solid";
import { Kbd, KbdGroup } from "~/components/ui/kbd";
function KbdWithIconsAndText() {
  return (
    <Example title="With Icons and Text">
      <KbdGroup>
        <Kbd>
          <ArrowLeft />
          Left
        </Kbd>
        <Kbd>
          <CircleDashed />
          Voice Enabled
        </Kbd>
      </KbdGroup>
    </Example>
  );
}

InputGroup

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

import { InputGroup, InputGroupAddon, InputGroupInput } from "~/components/ui/input-group";
import { Kbd } from "~/components/ui/kbd";
function KbdInInputGroup() {
  return (
    <Example title="InputGroup">
      <InputGroup>
        <InputGroupInput />
        <InputGroupAddon align="inline-end">
          <Kbd>Space</Kbd>
        </InputGroupAddon>
      </InputGroup>
    </Example>
  );
}

Tooltip

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

import { Save } from "lucide-solid";
import { Button } from "~/components/ui/button";
import { Kbd } from "~/components/ui/kbd";
import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
function KbdInTooltip() {
  return (
    <Example title="Tooltip">
      <Tooltip>
        <TooltipTrigger as={Button} size="icon-sm" variant="outline">
          <Save />
        </TooltipTrigger>
        <TooltipContent class="pr-1.5">
          <div class="flex items-center gap-2">
            Save Changes <Kbd>S</Kbd>
          </div>
        </TooltipContent>
      </Tooltip>
    </Example>
  );
}

With samp

import { Kbd } from "~/components/ui/kbd";
function KbdWithSamp() {
  return (
    <Example title="With samp">
      <Kbd>
        <samp>File</samp>
      </Kbd>
    </Example>
  );
}

API Reference

Kbd

Use the Kbd component to display a keyboard key.

PropTypeDefault
classstring``
<Kbd>Ctrl</Kbd>

KbdGroup

Use the KbdGroup component to group Kbd components together.

PropTypeDefault
classstring``
<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>
PreviewDocs