Kbd | Cortexcn

Ctrl⌘KCtrl + B

Installation

pnpm dlx shadcn@latest add @cortexcn/kbd

pnpm dlx shadcn@latest add @cortexcn/kbd

Usage

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

Examples

Basic

Ctrl⌘KCtrl + B

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

export function KbdBasic() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-2">
        <Kbd>Ctrl</Kbd>
        <Kbd>⌘K</Kbd>
        <Kbd>Ctrl + B</Kbd>
      </div>
    </div>
  )
}

import { Kbd } from "@/components/kbd"export function KbdBasic() {  return (    <div className="flex flex-col gap-6">      <div className="flex items-center gap-2">        <Kbd>Ctrl</Kbd>        <Kbd>⌘K</Kbd>        <Kbd>Ctrl + B</Kbd>      </div>    </div>  )}

Modifier keys

⌘C

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

export function KbdModifierKeys() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-2">
        <Kbd>⌘</Kbd>
        <Kbd>C</Kbd>
      </div>
    </div>
  )
}

import { Kbd } from "@/components/kbd"export function KbdModifierKeys() {  return (    <div className="flex flex-col gap-6">      <div className="flex items-center gap-2">        <Kbd>⌘</Kbd>        <Kbd>C</Kbd>      </div>    </div>  )}

KbdGroup

CtrlShiftP

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

export function KbdGroupExample() {
  return (
    <div className="flex flex-col gap-6">
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
    </div>
  )
}

import { Kbd, KbdGroup } from "@/components/kbd"export function KbdGroupExample() {  return (    <div className="flex flex-col gap-6">      <KbdGroup>        <Kbd>Ctrl</Kbd>        <Kbd>Shift</Kbd>        <Kbd>P</Kbd>      </KbdGroup>    </div>  )}

Arrow keys

↑↓←→

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

export function KbdArrowKeys() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-2">
        <Kbd>↑</Kbd>
        <Kbd>↓</Kbd>
        <Kbd>←</Kbd>
        <Kbd>→</Kbd>
      </div>
    </div>
  )
}

import { Kbd } from "@/components/kbd"export function KbdArrowKeys() {  return (    <div className="flex flex-col gap-6">      <div className="flex items-center gap-2">        <Kbd>↑</Kbd>        <Kbd>↓</Kbd>        <Kbd>←</Kbd>        <Kbd>→</Kbd>      </div>    </div>  )}

With icons

import { Kbd, KbdGroup } from "@/components/kbd"
import { ArrowLeftIcon, ArrowRightIcon, CircleDashedIcon } from "lucide-react"

export function KbdWithIcons() {
  return (
    <div className="flex flex-col gap-6">
      <KbdGroup>
        <Kbd>
          <CircleDashedIcon />
        </Kbd>
        <Kbd>
          <ArrowLeftIcon />
        </Kbd>
        <Kbd>
          <ArrowRightIcon />
        </Kbd>
      </KbdGroup>
    </div>
  )
}

import { Kbd, KbdGroup } from "@/components/kbd"import { ArrowLeftIcon, ArrowRightIcon, CircleDashedIcon } from "lucide-react"export function KbdWithIcons() {  return (    <div className="flex flex-col gap-6">      <KbdGroup>        <Kbd>          <CircleDashedIcon />        </Kbd>        <Kbd>          <ArrowLeftIcon />        </Kbd>        <Kbd>          <ArrowRightIcon />        </Kbd>      </KbdGroup>    </div>  )}

With icons and text

LeftVoice Enabled

import { Kbd, KbdGroup } from "@/components/kbd"
import { ArrowLeftIcon, CircleDashedIcon } from "lucide-react"

export function KbdWithIconsAndText() {
  return (
    <div className="flex flex-col gap-6">
      <KbdGroup>
        <Kbd>
          <ArrowLeftIcon />
          Left
        </Kbd>
        <Kbd>
          <CircleDashedIcon />
          Voice Enabled
        </Kbd>
      </KbdGroup>
    </div>
  )
}

import { Kbd, KbdGroup } from "@/components/kbd"import { ArrowLeftIcon, CircleDashedIcon } from "lucide-react"export function KbdWithIconsAndText() {  return (    <div className="flex flex-col gap-6">      <KbdGroup>        <Kbd>          <ArrowLeftIcon />          Left        </Kbd>        <Kbd>          <CircleDashedIcon />          Voice Enabled        </Kbd>      </KbdGroup>    </div>  )}

InputGroup

Space

import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/input-group"
import { Kbd } from "@/components/kbd"

export function KbdInInputGroup() {
  return (
    <div className="flex flex-col gap-6">
      <InputGroup>
        <InputGroupInput />
        <InputGroupAddon>
          <Kbd>Space</Kbd>
        </InputGroupAddon>
      </InputGroup>
    </div>
  )
}

import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/input-group"import { Kbd } from "@/components/kbd"export function KbdInInputGroup() {  return (    <div className="flex flex-col gap-6">      <InputGroup>        <InputGroupInput />        <InputGroupAddon>          <Kbd>Space</Kbd>        </InputGroupAddon>      </InputGroup>    </div>  )}

import { Button } from "@/components/button"
import { Kbd } from "@/components/kbd"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"
import { SaveIcon } from "lucide-react"

export function KbdInTooltip() {
  return (
    <div className="flex flex-col gap-6">
      <Tooltip>
        <TooltipTrigger asChild>
          <Button size="icon-sm" variant="outline">
            <SaveIcon />
          </Button>
        </TooltipTrigger>
        <TooltipContent className="pr-1.5">
          <div className="flex items-center gap-2">
            Save Changes <Kbd>S</Kbd>
          </div>
        </TooltipContent>
      </Tooltip>
    </div>
  )
}

import { Button } from "@/components/button"import { Kbd } from "@/components/kbd"import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/tooltip"import { SaveIcon } from "lucide-react"export function KbdInTooltip() {  return (    <div className="flex flex-col gap-6">      <Tooltip>        <TooltipTrigger asChild>          <Button size="icon-sm" variant="outline">            <SaveIcon />          </Button>        </TooltipTrigger>        <TooltipContent className="pr-1.5">          <div className="flex items-center gap-2">            Save Changes <Kbd>S</Kbd>          </div>        </TooltipContent>      </Tooltip>    </div>  )}

With samp

File

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

export function KbdWithSamp() {
  return (
    <div className="flex flex-col gap-6">
      <Kbd>
        <samp>File</samp>
      </Kbd>
    </div>
  )
}

import { Kbd } from "@/components/kbd"export function KbdWithSamp() {  return (    <div className="flex flex-col gap-6">      <Kbd>        <samp>File</samp>      </Kbd>    </div>  )}

Adapted from the shadcn/ui Kbd (MIT).