키보드

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

export function KbdDemo() {

Kbd 컴포넌트는 키캡을 렌더링합니다. 하위 프리미티브 없이 스타일만 입힌 네이티브 <kbd> 요소이며, 두꺼운 테두리, 선명한 그림자, 모노스페이스 서체로 네오브루탈리즘 공식을 따릅니다. 두 백엔드 변형은 같은 파일을 사용합니다.

다음과 같은 경우에 사용합니다.

• 커맨드 팔레트와 검색 — 트리거 옆이나 입력 안에 ⌘ K 힌트를 보여 줍니다.
• 메뉴 항목과 툴팁 — 동작 레이블 옆에 단축키를 두어 그 자리에서 익히게 합니다.
• 문서와 변경 로그 — 스크린샷 없이 정확한 키 입력을 인라인으로 표기합니다.

설치#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
npx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/kbd.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/kbd.json
복사

import { cn } from "@/lib/utils"

function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
  return (
    <kbd
      data-slot="kbd"
      className={cn(
        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded border-2 bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground shadow-sm select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
        className
      )}
      {...props}
    />
  )
}

function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <kbd
      data-slot="kbd-group"
      className={cn("inline-flex items-center gap-1", className)}
      {...props}
    />
  )
}

export { Kbd, KbdGroup }

사용법#

복사import { Kbd } from "@/components/ui/kbd"

복사<Kbd>Ctrl</Kbd>

구성#

Kbd와 KbdGroup을 만들려면 다음 구성을 사용합니다.

복사Kbd
KbdGroup
├── Kbd
└── Kbd

예제#

그룹#

KbdGroup 컴포넌트를 사용해서 키보드 키를 함께 묶습니다.

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

export function KbdGroupExample() {

버튼#

Kbd 컴포넌트를 Button 컴포넌트 안에서 사용하면 버튼 안에 키보드 키를 표시할 수 있습니다.

import { Button } from "@/components/ui/button"
import { Kbd } from "@/components/ui/kbd"

툴팁#

Kbd 컴포넌트를 Tooltip 컴포넌트 안에서 사용하면 키보드 키를 담은 툴팁을 표시할 수 있습니다.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

입력 그룹#

Kbd 컴포넌트를 InputGroupAddon 컴포넌트 안에서 사용하면 입력 그룹 안에 키보드 키를 표시할 수 있습니다.

import { SearchIcon } from "lucide-react"

import {

RTL#

Neobrutalism에서 RTL 지원을 활성화하는 방법은 RTL 설정 가이드를 참고하세요.

"use client"

import * as React from "react"

접근성#

Kbd는 키보드 입력에 맞는 HTML 시맨틱인 네이티브 <kbd> 요소를 렌더링하며 순수히 표현용입니다. pointer-events-none, select-none, 포커스 가능 요소 없음. 단축키가 실제로 동작한다면, 처리하는 컨트롤에도 aria-keyshortcuts로 선언하세요(예: 버튼에 aria-keyshortcuts="Control+B"). 보조 기술이 읽어 줄 수 있습니다. ⌘ 같은 기호 글리프는 스크린 리더마다 읽기가 들쭉날쭉합니다. 단축키가 중요하면 키 이름을 풀어 쓰세요.

API 참조#

Kbd#

Kbd 컴포넌트를 사용해서 키보드 키를 표시합니다.

복사<Kbd>Ctrl</Kbd>

KbdGroup#

KbdGroup 컴포넌트를 사용해서 Kbd 컴포넌트를 함께 묶습니다.

복사<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>