Kbd

Компонент для отображения клавиш и сочетаний клавиш.

Отдельные клавиши:

K⌘⌃⇧

Сочетания клавиш:

⌘K⌘ShiftPCtrlAltDelete

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

export default function Particle() {
  return (
    <div className="flex flex-col gap-4">
      <div>
        <p className="mb-2 text-muted-foreground text-sm">Отдельные клавиши:</p>
        <div className="flex gap-2">
          <Kbd>K</Kbd>
          <Kbd>⌘</Kbd>
          <Kbd>⌃</Kbd>
          <Kbd>⇧</Kbd>
        </div>
      </div>
      <div>
        <p className="mb-2 text-muted-foreground text-sm">Сочетания клавиш:</p>
        <div className="flex gap-2">
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>K</Kbd>
          </KbdGroup>
          <KbdGroup>
            <Kbd>⌘</Kbd>
            <Kbd>Shift</Kbd>
            <Kbd>P</Kbd>
          </KbdGroup>
          <KbdGroup>
            <Kbd>Ctrl</Kbd>
            <Kbd>Alt</Kbd>
            <Kbd>Delete</Kbd>
          </KbdGroup>
        </div>
      </div>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/kbd

Использование

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

Одна клавиша:

<Kbd>K</Kbd>

Несколько клавиш (сочетание клавиш):

<KbdGroup>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Справочник API

Kbd

Отображает одну клавишу.

Свойство	Тип	По умолчанию
`className`	`string`

KbdGroup

Группирует несколько клавиш для отображения сочетаний клавиш.

Свойство	Тип	По умолчанию
`className`	`string`

Примеры

Группа полей ввода

⌘K

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

export default function Particle() {
  return (
    <InputGroup>
      <InputGroupInput placeholder="Поиск…" type="search" />
      <InputGroupAddon align="inline-end">
        <Kbd>⌘K</Kbd>
      </InputGroupAddon>
    </InputGroup>
  );
}

На этой странице

Установка Использование Справочник API Kbd KbdGroup Примеры Группа полей ввода