Kbd

키보드 입력 텍스트를 표시하는 컴포넌트입니다.

⌘⇧⌥⌃Ctrl+B

examples/krds/kbd-demo.tsx

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

export default function KbdDemo() {

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/kbd.json

사용법

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

<Kbd>Ctrl</Kbd>

구성

다음 조합으로 Kbd and KbdGroup:

Kbd
KbdGroup
├── Kbd
└── Kbd

예제

Group

Use the KbdGroup component to group keyboard keys together.

Use Ctrl + BCtrl + K to open the command palette

examples/krds/kbd-group.tsx

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

export default function KbdGroupExample() {

Button

Use the Kbd component inside a Button component to display a keyboard key inside a button.

examples/krds/kbd-button.tsx

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

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

examples/krds/kbd-tooltip.tsx

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

Input Group

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

⌘K

examples/krds/kbd-input-group.tsx

import { SearchIcon } from "lucide-react"

import {

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

⌘⇧⌥⌃Ctrl+B

examples/krds/kbd-rtl.tsx

"use client"

import * as React from "react"

API 참조

Kbd

Use the Kbd component to display a keyboard key.

속성	타입	기본값
`className`	`string`	``

<Kbd>Ctrl</Kbd>

KbdGroup

Use the KbdGroup component to group Kbd components together.

속성	타입	기본값
`className`	`string`	``

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>

Item Label