VibeUI

Display

Wide Label Keys

A row of keys with long labels: "Backspace" and "Page Down" never fit a square, so the row offers two honest width modes instead of one compromise.

  • kbd
  • keyboard
  • layout
  • labels

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/kbd-006?lang=en

ShiftBackspacePage DownSpace↵

Editor keys

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "kbd-006" (Wide Label Keys) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/kbd-006.json

Registry item: https://vibeui.ru/r/kbd-006.json
Installs to: components/vibeui/kbd-006.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A row of keys with long labels: "Backspace" and "Page Down" never fit a square, so the row offers two honest width modes instead of one compromise.

A row of long-label keys: width by content, or equal grid columns. Zero dependencies, one file, no client JS.

## 3. How to use it
import { Kbd006 } from "@/components/vibeui/kbd-006"

<Kbd006
  keys={["Shift", "Backspace", "Page Down", "Space"]}
  width="even"
  caption="Editor keys"
/>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-kbd-006-* palette — do not swap it for your theme tokens
- the shared key height in both modes: differing heights break the rhythm of the row
- nowrap on the label — a split "Page Down" stops reading as one key
- the minimum key width: a narrow "K" beside "Backspace" looks dropped out of the row
- the kbd tag for keys so a screen reader announces them as input
- the component's own light surface: keys and caption are dark and vanish on a dark background

## 6. You may change
- the width mode through width: auto or even
- the caption under the row through caption
- the row contents through keys
- the key height through the --vibeui-kbd-006-height variable

## 7. Rules
- In even mode a very long label is truncated with an ellipsis instead of stretching the column.
- The 4.5rem column minimum is tuned for "Backspace"; raise it for longer words.
- The row does not imitate a keyboard layout — it is a list of keys, not a map.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/kbd-006.json
https://vibeui.ru/r/kbd-006.json

Серверный компонент, хуков нет. Режим auto даёт клавише ширину по содержимому при общей минимальной — ряд выглядит как настоящая клавиатура с разными клавишами. Режим even переводит ряд на grid с repeat(auto-fit, minmax(4.5rem, 1fr)), и все клавиши получают равные колонки: это нужно, когда ряд должен читаться строем, например в легенде. Высота и кегль в обоих режимах общие, поэтому переключение не меняет ритм строки. Подписи помечены nowrap, чтобы «Page Down» не разорвался. Подложка светлая: клавиши и подпись тёмные.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Kbd006Props = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
  keys?: string[]
  width?: "auto" | "even"
  caption?: string
}

// Идея компонента: клавиши с длинными подписями. «Backspace» и «Page Down» не
// влезают в квадрат, а растягивать под них все клавиши — терять сходство с
// клавиатурой. Здесь два честных режима: auto — ширина по содержимому при
// общей минимальной, even — равные колонки на grid, когда ряд должен быть
// строем. Высота и кегль в обоих режимах общие, поэтому ряд остаётся рядом.
const STYLES = `
:where([data-vibeui-block="kbd-006"]){
--vibeui-kbd-006-surface:oklch(1 0 0);
--vibeui-kbd-006-fg:oklch(0.24 0.014 265);
--vibeui-kbd-006-muted:oklch(0.55 0.014 265);
--vibeui-kbd-006-border:oklch(0.88 0.008 265);
--vibeui-kbd-006-key:oklch(0.975 0.003 265);
--vibeui-kbd-006-height:2rem;
--vibeui-kbd-006-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Своя светлая подложка: клавиши и подпись тёмные. */
[data-vibeui-block="kbd-006"]{
display:flex;flex-direction:column;gap:0.625rem;
width:100%;max-width:24rem;box-sizing:border-box;padding:0.875rem 1rem;
background:var(--vibeui-kbd-006-surface);
border:1px solid var(--vibeui-kbd-006-border);border-radius:0.875rem;
font-family:var(--vibeui-kbd-006-font);color:var(--vibeui-kbd-006-fg);
}
[data-vibeui-block="kbd-006"] [data-part="row"]{
display:flex;flex-wrap:wrap;gap:0.375rem;
}
/* even — равные колонки на grid: ряд встаёт строем, а не по содержимому. */
[data-vibeui-block="kbd-006"][data-width="even"] [data-part="row"]{
display:grid;grid-template-columns:repeat(auto-fit,minmax(4.5rem,1fr));
}
[data-vibeui-block="kbd-006"] kbd{
display:inline-flex;align-items:center;justify-content:center;
min-width:2rem;height:var(--vibeui-kbd-006-height);
padding:0 0.625rem;box-sizing:border-box;
background:var(--vibeui-kbd-006-key);
border:1px solid var(--vibeui-kbd-006-border);border-bottom-width:2px;
border-radius:0.4375rem;
font-family:inherit;font-size:0.75rem;font-weight:650;line-height:1;
white-space:nowrap;
}
/* Длинная подпись не переносится: разорванное «Page Down» перестаёт читаться. */
[data-vibeui-block="kbd-006"][data-width="even"] kbd{
overflow:hidden;text-overflow:ellipsis;display:flex;
}
[data-vibeui-block="kbd-006"] [data-part="caption"]{
margin:0;font-size:0.75rem;color:var(--vibeui-kbd-006-muted);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="kbd-006"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_KEYS = ["Shift", "Backspace", "Page Down", "Space", "↵"]

/**
 * Ряд клавиш с длинными подписями: ширина по содержимому или равными колонками.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Kbd006({
  keys = DEFAULT_KEYS,
  width = "auto",
  caption = "Клавиши редактора текста",
  className,
  style,
  ...props
}: Kbd006Props) {
  return (
    <>
      <style href="vibeui-kbd-006" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="kbd-006"
        data-width={width}
        className={className}
        style={style as CSSProperties}
      >
        <div data-part="row">
          {keys.map((key) => (
            <kbd key={key}>{key}</kbd>
          ))}
        </div>
        <p data-part="caption">{caption}</p>
      </div>
    </>
  )
}