1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографикаtypographyutilitykeyboard

KBD Key Cap

Элегантная клавиша клавиатуры (Kbd) с 3D-объемом для показа горячих клавиш.

KBD Key Cap

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

Скопируйте и вставьте этот код в ваш React-компонент:

tsx
import { KbdIndicator } from 'react-component-kit-ui/typography';

<KbdIndicator>Content</KbdIndicator>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/KbdIndicator.tsx + KbdIndicator.css:

KbdIndicator.tsx
'use client';

import type { ReactNode } from 'react';
import './KbdIndicator.css';

/** KbdIndicator — ported from astro-component-kit. */
export interface KbdIndicatorProps {
  children?: ReactNode;
}

export function KbdIndicator({ children }: KbdIndicatorProps) {
  return (
    <>
      <kbd className="tau-kbd" data-rk-ca0051="">{children}</kbd>
    </>
  );
}

export default KbdIndicator;
KbdIndicator.css
/* KbdIndicator — ported from astro-component-kit (typography/KbdIndicator.astro) */

.tau-kbd:where([data-rk-ca0051]) { background: #1e293b; border: 1px solid #334155; border-bottom-width: 3px; border-radius: 6px; padding: 2px 8px; color: #f1f5f9; font-family: sans-serif; font-weight: 700; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.4); vertical-align: middle; }

Краткая информация

Категория
Типографика
Имя файла
KbdIndicator.tsx
Зависимости
Нет — чистый React + CSS
Теги
typographyutilitykeyboard