Code Block

Manager Tabs

Команда установки сразу в npm, pnpm, yarn и bun: вкладки собраны из радиокнопок, переключение работает без единой строки JavaScript.

code
tabs
package-manager
no-js

Превью

1440pxHost theme

Использовать с AI

1. Скопируйте ссылку.
2. Напишите агенту своими словами и вставьте её в предложение.
3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/codeblock-003

npmpnpmyarnbun

npm install @vibeui/button --save-exact

pnpm add @vibeui/button --save-exact

yarn add @vibeui/button --exact

bun add @vibeui/button --exact

Пакет

Имя радиогруппы

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «codeblock-003» (Manager Tabs) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/codeblock-003.json

Registry item: https://vibeui.ru/r/codeblock-003.json
Ставится в: components/vibeui/codeblock-003.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Команда установки сразу в npm, pnpm, yarn и bun: вкладки собраны из радиокнопок, переключение работает без единой строки JavaScript.

Команда установки в четырёх менеджерах пакетов с переключением вкладок на радиокнопках и :has(). Ноль зависимостей, ноль клиентского JS, работает до гидратации.

## 3. Как использовать
import { Codeblock003 } from "@/components/vibeui/codeblock-003"

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-codeblock-003-* и не подменять её токенами вашей темы
- радиокнопки как источник состояния: переписав их на useState, вы теряете работу без JS
- скрытие input через clip-path, а не display:none — иначе вкладки выпадают из обхода клавиатурой
- подсветку фокуса через label:has(input:focus-visible): сам input невидим и рамку не покажет
- порядок менеджеров: npm первым, потому что он выбран по умолчанию и виден сразу
- тёмную подложку блока — она несёт контраст для светлого моноширинного текста

## 6. Можно менять
- имя пакета через packageName
- имя радиогруппы через group, если на странице несколько таких блоков
- набор менеджеров и их флаги в константе внутри файла
- цвета вкладок и ширину блока

## 7. Правила
- Два блока с одинаковым group на одной странице образуют одну радиогруппу и переключают друг друга.
- Выбор не запоминается между страницами: для этого нужен клиентский стейт и хранилище.
- Кнопки копирования здесь нет намеренно — она вернула бы клиентский JS, ради отсутствия которого блок и сделан.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/codeblock-003.json

https://vibeui.ru/r/codeblock-003.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-codeblock-003-*. Серверный: состояние держит нативная радиогруппа, а нужная панель выбирается селектором :has(input[value=...]:checked), поэтому вкладки переключаются до гидратации и без JS вообще. Радиокнопки спрятаны clip-path, а не display:none, чтобы остаться в порядке обхода клавиатурой; фокус и выбранная вкладка подсвечиваются через label:has(). Имя радиогруппы вынесено в пропс group: два блока на одной странице с общим именем переключали бы друг друга.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { CSSProperties } from "react"

export type Codeblock003Props = {
  packageName?: string
  group?: string
  className?: string
  style?: CSSProperties
}

// Идея компонента: четыре менеджера пакетов в одном блоке без единой строки
// JS. Вкладки — это радиокнопки, а панель выбирается через :has() по
// отмеченному значению, поэтому переключение работает и до гидратации.
const STYLES = `
:where([data-vibeui-block="codeblock-003"]){
--vibeui-codeblock-003-bg:oklch(0.2 0.02 210);
--vibeui-codeblock-003-head:oklch(0.24 0.024 210);
--vibeui-codeblock-003-fg:oklch(0.94 0.006 210);
--vibeui-codeblock-003-muted:oklch(0.68 0.016 210);
--vibeui-codeblock-003-border:oklch(1 0 0 / 13%);
--vibeui-codeblock-003-active:oklch(0.98 0.01 210);
--vibeui-codeblock-003-accent:oklch(0.78 0.13 195);
--vibeui-codeblock-003-flag:oklch(0.8 0.12 195);
--vibeui-codeblock-003-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--vibeui-codeblock-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="codeblock-003"]{
display:block;width:100%;max-width:30rem;box-sizing:border-box;
font-family:var(--vibeui-codeblock-003-font);
}
[data-vibeui-block="codeblock-003"] [data-part="shell"]{
overflow:hidden;border:1px solid var(--vibeui-codeblock-003-border);border-radius:0.75rem;
background:var(--vibeui-codeblock-003-bg);color:var(--vibeui-codeblock-003-fg);
}
[data-vibeui-block="codeblock-003"] [data-part="tabs"]{
display:flex;gap:0.125rem;padding:0.3125rem 0.375rem;
background:var(--vibeui-codeblock-003-head);
border-bottom:1px solid var(--vibeui-codeblock-003-border);
}
[data-vibeui-block="codeblock-003"] label{
flex:1 1 0;cursor:pointer;text-align:center;
padding:0.375rem 0.5rem;border-radius:0.4375rem;
font-size:0.75rem;font-weight:650;color:var(--vibeui-codeblock-003-muted);
transition:background-color .16s ease,color .16s ease;
}
[data-vibeui-block="codeblock-003"] input{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
border:0;clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}
[data-vibeui-block="codeblock-003"] label:hover{color:var(--vibeui-codeblock-003-fg)}
[data-vibeui-block="codeblock-003"] label:has(input:checked){
background:oklch(1 0 0 / 12%);color:var(--vibeui-codeblock-003-active);
}
[data-vibeui-block="codeblock-003"] label:has(input:focus-visible){
outline:2px solid var(--vibeui-codeblock-003-accent);outline-offset:2px;
}
[data-vibeui-block="codeblock-003"] pre{
display:none;margin:0;padding:0.875rem;overflow-x:auto;
font-family:var(--vibeui-codeblock-003-mono);font-size:0.8125rem;line-height:1.5;
}
[data-vibeui-block="codeblock-003"] code{font:inherit;white-space:pre}
[data-vibeui-block="codeblock-003"] [data-token="flag"]{color:var(--vibeui-codeblock-003-flag)}
[data-vibeui-block="codeblock-003"] [data-token="entity"]{color:var(--vibeui-codeblock-003-accent)}
/* Панель выбирается отмеченной радиокнопкой — без состояния в JS. */
[data-vibeui-block="codeblock-003"] [data-part="shell"]:has(input[value="npm"]:checked) pre[data-manager="npm"],
[data-vibeui-block="codeblock-003"] [data-part="shell"]:has(input[value="pnpm"]:checked) pre[data-manager="pnpm"],
[data-vibeui-block="codeblock-003"] [data-part="shell"]:has(input[value="yarn"]:checked) pre[data-manager="yarn"],
[data-vibeui-block="codeblock-003"] [data-part="shell"]:has(input[value="bun"]:checked) pre[data-manager="bun"]{display:block}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="codeblock-003"] *{animation:none!important;transition:none!important}}
`

const MANAGERS = [
  { id: "npm", binary: "npm", verb: "install", flag: "--save-exact" },
  { id: "pnpm", binary: "pnpm", verb: "add", flag: "--save-exact" },
  { id: "yarn", binary: "yarn", verb: "add", flag: "--exact" },
  { id: "bun", binary: "bun", verb: "add", flag: "--exact" },
] as const

/** Команда установки в четырёх менеджерах пакетов, переключение без JS. */
export function Codeblock003({
  packageName = "@vibeui/button",
  group = "vibeui-codeblock-003",
  className,
  style,
}: Codeblock003Props) {
  return (
    <>
      <style href="vibeui-codeblock-003" precedence="medium">
        {STYLES}
      </style>
      <div
        data-vibeui-block="codeblock-003"
        className={className}
        style={style}
      >
        <div data-part="shell">
          <div data-part="tabs" role="group" aria-label="Менеджер пакетов">
            {MANAGERS.map((manager, index) => (
              <label key={manager.id}>
                <input
                  type="radio"
                  name={group}
                  value={manager.id}
                  defaultChecked={index === 0}
                />
                {manager.binary}
              </label>
            ))}
          </div>
          {MANAGERS.map((manager) => (
            <pre key={manager.id} data-manager={manager.id}>
              <code>
                <span data-token="entity">{manager.binary}</span>
                {` ${manager.verb} ${packageName} `}
                <span data-token="flag">{manager.flag}</span>
              </code>
            </pre>
          ))}
        </div>
      </div>
    </>
  )
}