본문으로 건너뛰기
언어

Kbdstandard

키보드 키를 표시하는 글자판(keyboard key) 표시입니다. shadcn base-nova 의 `kbd` 를 그대로 싣습니다. 누를 수 있는 요소가 아닙니다.

설치

pnpm
pnpm dlx shadcn@4.23.0 add @uikit/kbd

Default

kbd-example.tsx
import {  Example,  ExampleWrapper,} from "@/components/example"import { Button } from "@/components/ui/button"import {  InputGroup,  InputGroupAddon,  InputGroupInput,} from "@/components/ui/input-group"import { Kbd, KbdGroup } from "@/components/ui/kbd"import {  Tooltip,  TooltipContent,  TooltipTrigger,} from "@/components/ui/tooltip"import { ArrowLeftIcon, ArrowRightIcon, CircleDashedIcon, SaveIcon } from "lucide-react"
export default function KbdExample() {  return (    <ExampleWrapper>      <KbdBasic />      <KbdModifierKeys />      <KbdGroupExample />      <KbdArrowKeys />      <KbdWithIcons />      <KbdWithIconsAndText />      <KbdInInputGroup />      <KbdInTooltip />      <KbdWithSamp />    </ExampleWrapper>  )}
function KbdBasic() {  return (    <Example title="Basic">      <div className="flex items-center gap-2">        <Kbd>Ctrl</Kbd>        <Kbd>⌘K</Kbd>        <Kbd>Ctrl + B</Kbd>      </div>    </Example>  )}
function KbdModifierKeys() {  return (    <Example title="Modifier Keys">      <div className="flex items-center gap-2">        <Kbd>⌘</Kbd>        <Kbd>C</Kbd>      </div>    </Example>  )}
function KbdGroupExample() {  return (    <Example title="KbdGroup">      <KbdGroup>        <Kbd>Ctrl</Kbd>        <Kbd>Shift</Kbd>        <Kbd>P</Kbd>      </KbdGroup>    </Example>  )}
function KbdArrowKeys() {  return (    <Example title="Arrow Keys">      <div className="flex items-center gap-2">        <Kbd>↑</Kbd>        <Kbd>↓</Kbd>        <Kbd>←</Kbd>        <Kbd>→</Kbd>      </div>    </Example>  )}
function KbdWithIcons() {  return (    <Example title="With Icons">      <KbdGroup>        <Kbd>          <CircleDashedIcon />        </Kbd>        <Kbd>          <ArrowLeftIcon />        </Kbd>        <Kbd>          <ArrowRightIcon />        </Kbd>      </KbdGroup>    </Example>  )}
function KbdWithIconsAndText() {  return (    <Example title="With Icons and Text">      <KbdGroup>        <Kbd>          <ArrowLeftIcon />          Left        </Kbd>        <Kbd>          <CircleDashedIcon />          Voice Enabled        </Kbd>      </KbdGroup>    </Example>  )}
function KbdInInputGroup() {  return (    <Example title="InputGroup">      <InputGroup>        <InputGroupInput aria-label="Search" />        <InputGroupAddon>          <Kbd>Space</Kbd>        </InputGroupAddon>      </InputGroup>    </Example>  )}
function KbdInTooltip() {  return (    <Example title="Tooltip">      <Tooltip>        <TooltipTrigger aria-label="Save" render={<Button size="icon-sm" variant="outline" />}>          <SaveIcon />        </TooltipTrigger>        <TooltipContent className="pr-1.5">          <div className="flex items-center gap-2">            Save Changes <Kbd>S</Kbd>          </div>        </TooltipContent>      </Tooltip>    </Example>  )}
function KbdWithSamp() {  return (    <Example title="With samp">      <Kbd>        <samp>File</samp>      </Kbd>    </Example>  )}