Kbd - KTUI

Docs

Kbd

Displays keyboard input or shortcut keys with customizable styles and sizes.

Examples

Basic Usage

<div class="flex items-center gap-4">
  <span class="kt-kbd"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-arrow-up"
      aria-hidden="true"
    >
      <path d="m5 12 7-7 7 7"></path>
      <path d="M12 19V5"></path></svg></span
  ><span class="kt-kbd"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-arrow-down"
      aria-hidden="true"
    >
      <path d="M12 5v14"></path>
      <path d="m19 12-7 7-7-7"></path></svg></span
  ><span class="kt-kbd">space</span
  ><span class="kt-kbd"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-command"
      aria-hidden="true"
    >
      <path
        d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
      ></path>
    </svg>
    +K</span
  >
</div>

Outline

<div class="flex items-center gap-4">
  <span class="kt-kbd kt-kbd-outline"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-arrow-up"
      aria-hidden="true"
    >
      <path d="m5 12 7-7 7 7"></path>
      <path d="M12 19V5"></path></svg></span
  ><span class="kt-kbd kt-kbd-outline"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-arrow-down"
      aria-hidden="true"
    >
      <path d="M12 5v14"></path>
      <path d="m19 12-7 7-7-7"></path></svg></span
  ><span class="kt-kbd kt-kbd-outline">space</span
  ><span class="kt-kbd kt-kbd-outline"
    ><svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-command"
      aria-hidden="true"
    >
      <path
        d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
      ></path>
    </svg>
    +K</span
  >
</div>

Size

<div class="space-y-4">
  <div class="flex items-center gap-4">
    <span class="kt-kbd kt-kbd-xs kt-kbd-outline"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-up"
        aria-hidden="true"
      >
        <path d="m5 12 7-7 7 7"></path>
        <path d="M12 19V5"></path></svg></span
    ><span class="kt-kbd kt-kbd-xs kt-kbd-outline"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-down"
        aria-hidden="true"
      >
        <path d="M12 5v14"></path>
        <path d="m19 12-7 7-7-7"></path></svg></span
    ><span class="kt-kbd kt-kbd-xs kt-kbd-outline">space</span
    ><span class="kt-kbd kt-kbd-xs kt-kbd-outline"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-command"
        aria-hidden="true"
      >
        <path
          d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
        ></path>
      </svg>
      +K</span
    >
  </div>
  <div class="flex items-center gap-4">
    <span class="kt-kbd kt-kbd-sm kt-kbd-outline"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-up"
        aria-hidden="true"
      >
        <path d="m5 12 7-7 7 7"></path>
        <path d="M12 19V5"></path></svg></span
    ><span class="kt-kbd kt-kbd-sm kt-kbd-outline"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-down"
        aria-hidden="true"
      >
        <path d="M12 5v14"></path>
        <path d="m19 12-7 7-7-7"></path></svg></span
    ><span class="kt-kbd kt-kbd-sm kt-kbd-outline">space</span
    ><span class="kt-kbd kt-kbd-sm kt-kbd-outline"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-command"
        aria-hidden="true"
      >
        <path
          d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
        ></path>
      </svg>
      +K</span
    >
  </div>
  <div class="flex items-center gap-4">
    <span class="kt-kbd kt-kbd-outline"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-up"
        aria-hidden="true"
      >
        <path d="m5 12 7-7 7 7"></path>
        <path d="M12 19V5"></path></svg></span
    ><span class="kt-kbd kt-kbd-outline"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-arrow-down"
        aria-hidden="true"
      >
        <path d="M12 5v14"></path>
        <path d="m19 12-7 7-7-7"></path></svg></span
    ><span class="kt-kbd kt-kbd-outline">space</span
    ><span class="kt-kbd kt-kbd-outline"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-command"
        aria-hidden="true"
      >
        <path
          d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
        ></path>
      </svg>
      +K</span
    >
  </div>
</div>

PreviouseInput NextLink

On This Page

Examples