Display
Inline Text Key
Клавиша внутри строки текста, которая не рвёт интерлиньяж: высота задана в em, вертикальные отступы нулевые, объём даёт горизонтальный паддинг.
- kbd
- inline
- typography
- text
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/kbd-003
Нажмите ⌘+K чтобы открыть поиск по каталогу — строка ввода появится поверх страницы.
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «kbd-003» (Inline Text Key) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/kbd-003.json
Registry item: https://vibeui.ru/r/kbd-003.json
Ставится в: components/vibeui/kbd-003.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Клавиша внутри строки текста, которая не рвёт интерлиньяж: высота задана в em, вертикальные отступы нулевые, объём даёт горизонтальный паддинг.
Клавиша внутри абзаца: высота в em, нулевые вертикальные отступы, сдвиг на базовую линию. Ноль зависимостей, один файл, клиентского JS нет.
## 3. Как использовать
import { Kbd003 } from "@/components/vibeui/kbd-003"
<Kbd003
before="Нажмите"
keys={["⌘", "K"]}
after="чтобы открыть поиск."
/>
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-kbd-003-* и не подменять её токенами вашей темы
- нулевые вертикальные отступы клавиши: с ними строка становится выше соседних
- высоту и кегль в em — клавиша обязана масштабироваться вместе с абзацем
- сдвиг на 0.05em вместо правки line-height: правка line-height поедет на весь текст
- nowrap на сочетании, иначе «⌘ + K» разрывается переносом строки
- собственную светлую подложку: абзац и клавиши тёмные и на тёмном фоне пропадают
## 6. Можно менять
- текст до клавиши через before
- текст после клавиши через after
- состав сочетания через keys
- ширину абзаца через max-width
## 7. Правила
- Клавиша занимает 1.5em высоты: при интерлиньяже меньше 1.5 строки начнут задевать друг друга.
- Внутри одного абзаца допустимо одно-два сочетания — дальше текст превращается в список.
- Сдвиг на базовую линию подобран для системного шрифта; при своём шрифте проверьте посадку.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/kbd-003.jsonhttps://vibeui.ru/r/kbd-003.jsonСерверный компонент, хуков нет. Обычная kbd с вертикальным паддингом делает свою строку выше соседних, и абзац «разъезжается». Здесь высота клавиши выражена в em и вписана в строку, вертикальные отступы нулевые, а точная посадка на базовую линию сделана сдвигом на 0.05em — не изменением line-height абзаца, которое поехало бы на весь текст. Кегль клавиши задан долей от текста (0.85em), поэтому она масштабируется вместе с абзацем. Сочетание обёрнуто в nowrap, чтобы «⌘ + K» не разорвался переносом. Подложка светлая: текст тёмный.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Kbd003Props = Omit<ComponentPropsWithoutRef<"p">, "children"> & {
before?: string
keys?: string[]
after?: string
}
// Идея компонента: клавиша внутри строки текста, которая не рвёт интерлиньяж.
// Обычная kbd с паддингом делает строку выше соседних, и абзац «разъезжается».
// Здесь высота клавиши задана в em и вписана в строку: вертикальные отступы
// нулевые, объём даёт padding по горизонтали и рамка, а вертикальное
// выравнивание — сдвиг на 0.05em, а не изменение line-height абзаца.
const STYLES = `
:where([data-vibeui-block="kbd-003"]){
--vibeui-kbd-003-surface:oklch(1 0 0);
--vibeui-kbd-003-fg:oklch(0.24 0.014 265);
--vibeui-kbd-003-border:oklch(0.87 0.008 265);
--vibeui-kbd-003-key:oklch(0.97 0.003 265);
--vibeui-kbd-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Своя светлая подложка: абзац и клавиши тёмные. */
[data-vibeui-block="kbd-003"]{
display:block;box-sizing:border-box;margin:0;
width:100%;max-width:24rem;padding:0.875rem 1rem;
background:var(--vibeui-kbd-003-surface);
border:1px solid var(--vibeui-kbd-003-border);border-radius:0.875rem;
font-family:var(--vibeui-kbd-003-font);color:var(--vibeui-kbd-003-fg);
font-size:0.875rem;line-height:1.7;
}
/* Клавиша вписана в строку: нулевые вертикальные отступы, высота в em. */
[data-vibeui-block="kbd-003"] kbd{
display:inline-block;
height:1.5em;padding:0 0.4em;box-sizing:border-box;
background:var(--vibeui-kbd-003-key);
border:1px solid var(--vibeui-kbd-003-border);border-bottom-width:2px;
border-radius:0.35em;
font-family:inherit;font-size:0.85em;font-weight:650;line-height:1.4;
vertical-align:baseline;transform:translateY(0.05em);
white-space:nowrap;
}
[data-vibeui-block="kbd-003"] [data-part="combo"]{white-space:nowrap}
[data-vibeui-block="kbd-003"] [data-part="plus"]{opacity:.55;padding:0 0.15em}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="kbd-003"] *{animation:none!important;transition:none!important}}
`
/**
* Клавиша внутри строки текста без ломки интерлиньяжа абзаца.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Kbd003({
before = "Нажмите",
keys = ["⌘", "K"],
after = "чтобы открыть поиск по каталогу — строка ввода появится поверх страницы.",
className,
style,
...props
}: Kbd003Props) {
return (
<>
<style href="vibeui-kbd-003" precedence="medium">
{STYLES}
</style>
<p
{...props}
data-vibeui-block="kbd-003"
className={className}
style={style as CSSProperties}
>
{before}{" "}
<span data-part="combo">
{keys.map((key, index) => (
<span key={key}>
{index > 0 ? <span data-part="plus">+</span> : null}
<kbd>{key}</kbd>
</span>
))}
</span>{" "}
{after}
</p>
</>
)
}