Phím

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

export function KbdDemo() {

Thành phần kbd render một mặt phím — là thẻ <kbd> native đã được tạo kiểu, không phụ thuộc primitive nào, khoác lên công thức neobrutalist: viền dày, bóng đổ đậm và kiểu chữ mono. Cả hai biến thể backend dùng chung một tệp.

Nên dùng khi:

• Command palette và tìm kiếm — hiện gợi ý ⌘ K bên cạnh trigger hoặc ngay trong ô nhập.
• Mục menu và tooltip — đặt phím tắt cạnh nhãn hành động để người dùng học được ngay tại chỗ.
• Tài liệu và nhật ký thay đổi — dẫn chiếu chính xác các phím cần bấm ngay trong dòng văn bản, không cần ảnh chụp.

Cài đặt#

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
Sao chép

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 }

Cách dùng#

Sao chépimport { Kbd } from "@/components/ui/kbd"

Sao chép<Kbd>Ctrl</Kbd>

Kết hợp#

Dùng cách kết hợp sau để xây dựng Kbd và KbdGroup:

Sao chépKbd
KbdGroup
├── Kbd
└── Kbd

Ví dụ#

Nhóm#

Dùng component KbdGroup để nhóm các phím bàn phím với nhau.

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

export function KbdGroupExample() {

Nút#

Dùng component Kbd bên trong một component Button để hiển thị một phím bàn phím bên trong một nút.

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

Tooltip#

Bạn có thể dùng component Kbd bên trong một component Tooltip để hiển thị một tooltip có phím bàn phím.

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

Input Group#

Bạn có thể dùng component Kbd bên trong một component InputGroupAddon để hiển thị một phím bàn phím bên trong một input group.

import { SearchIcon } from "lucide-react"

import {

RTL#

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập#

Kbd render một thẻ <kbd> native — đúng ngữ nghĩa HTML cho phần nhập từ bàn phím — và hoàn toàn mang tính trình bày: pointer-events-none, select-none, không có gì nhận focus. Khi phím tắt thực sự hoạt động, hãy khai báo nó luôn trên điều khiển xử lý phím tắt đó bằng aria-keyshortcuts (ví dụ aria-keyshortcuts="Control+B" trên nút) để công nghệ hỗ trợ có thể đọc lên. Các ký hiệu như ⌘ được trình đọc màn hình đọc lên không nhất quán — hãy viết rõ tên phím ở những nơi phím tắt thật sự quan trọng.

Tham chiếu API#

Kbd#

Dùng component Kbd để hiển thị một phím bàn phím.

Sao chép<Kbd>Ctrl</Kbd>

KbdGroup#

Dùng component KbdGroup để nhóm các component Kbd với nhau.

Sao chép<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>