VibeUI

Navigation

CSS Tabs

Вкладки на радиокнопках: переключение, выбор одной из группы и стрелки достаются от браузера, JS не нужен.

  • tabs
  • radio
  • no-js
  • css

Превью

1440pxHost theme

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

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

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

Компонент рендерится без единого пропа: значения по умолчанию заданы прямо в файле.

Файл копируется в проект одной командой. Внешних зависимостей нет — только react.

Цвета живут в переменных с префиксом компонента, поэтому тема хозяина не перебивает их.

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

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

# Установка и размещение «tabs-002» (CSS Tabs) из VibeUI

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

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

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

## 2. Что это
Вкладки на радиокнопках: переключение, выбор одной из группы и стрелки достаются от браузера, JS не нужен.

Вкладки без JS: полоса с прокруткой, выбранная вкладка на светлой подложке, панель открывается селектором :has(). Ноль зависимостей, один файл.

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

<Tabs002 tabs={[{ label: "Обзор", text: "…" }]} name="docs" />

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-tabs-002-* и не подменять её токенами вашей темы
- радиокнопки: браузер сам следит, что выбрана одна, и даёт стрелки по группе
- уникальный name для каждой пары вкладок на странице — иначе группы смешаются
- правила :has() на шесть вкладок: седьмой нужна ещё одна строка CSS
- прокрутку полосы вместо переноса подписей
- видимую рамку фокуса на выбранной вкладке

## 6. Можно менять
- массив tabs и их содержимое
- name — имя группы радиокнопок
- акцент через проп accent
- ширину блока

## 7. Правила
- Роли tab/tabpanel не проставлены намеренно: без JS их состояние нечем поддерживать, поэтому группа объявлена радиогруппой.
- Адрес вкладки не попадает в URL: если нужна ссылка на раздел, берите tabs-001.
- Содержимое всех вкладок приходит сразу: тяжёлые панели лучше грузить своим кодом.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

npx shadcn@latest add https://vibeui.ru/r/tabs-002.json
https://vibeui.ru/r/tabs-002.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-tabs-002-*. Серверный: хуков нет, состояние держат радиокнопки. Панель показывает селектор :has() по отмеченной кнопке, поэтому правила выписаны на шесть вкладок. Полоса вкладок прокручивается по горизонтали: на узком экране подписи не переносятся.

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

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

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Tabs002Tab = {
  label: string
  text: string
}

export type Tabs002Props = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
  tabs?: Tabs002Tab[]
  name?: string
  accent?: string
}

// Идея компонента: вкладки без единой строки JS. Переключение держат
// радиокнопки: браузер сам следит, что выбрана одна, и даёт стрелки по группе.
// Панель показывается селектором :has() по отмеченной кнопке, поэтому правила
// заданы на шесть вкладок — больше требует ещё одной строки CSS.
const STYLES = `
:where([data-vibeui-block="tabs-002"]){
--vibeui-tabs-002-bg:oklch(1 0 0);
--vibeui-tabs-002-fg:oklch(0.24 0.014 265);
--vibeui-tabs-002-muted:oklch(0.56 0.014 265);
--vibeui-tabs-002-border:oklch(0.91 0.006 265);
--vibeui-tabs-002-track:oklch(0.96 0.003 265);
--vibeui-tabs-002-accent:oklch(0.55 0.2 262);
--vibeui-tabs-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="tabs-002"]{
width:100%;max-width:24rem;box-sizing:border-box;padding:0.375rem;
background:var(--vibeui-tabs-002-bg);
border:1px solid var(--vibeui-tabs-002-border);border-radius:0.875rem;
font-family:var(--vibeui-tabs-002-font);color:var(--vibeui-tabs-002-fg);
}
[data-vibeui-block="tabs-002"] [data-part="strip"]{
display:flex;gap:0.125rem;padding:0.1875rem;
background:var(--vibeui-tabs-002-track);border-radius:0.625rem;
overflow-x:auto;scrollbar-width:none;
}
[data-vibeui-block="tabs-002"] [data-part="strip"]::-webkit-scrollbar{display:none}
[data-vibeui-block="tabs-002"] [data-part="strip"] label{flex:1 0 auto}
[data-vibeui-block="tabs-002"] input{position:absolute;opacity:0;pointer-events:none}
[data-vibeui-block="tabs-002"] [data-part="tab"]{
cursor:pointer;
display:flex;align-items:center;justify-content:center;
min-height:1.875rem;padding:0 0.75rem;border-radius:0.4375rem;
font-size:0.8125rem;color:var(--vibeui-tabs-002-muted);white-space:nowrap;
}
/* Отмеченная радиокнопка задаёт и вид вкладки, и видимость панели. */
[data-vibeui-block="tabs-002"] input:checked + [data-part="tab"]{
background:var(--vibeui-tabs-002-bg);color:var(--vibeui-tabs-002-fg);font-weight:650;
box-shadow:0 1px 2px oklch(0.2 0.02 265 / 12%);
}
[data-vibeui-block="tabs-002"] input:focus-visible + [data-part="tab"]{outline:2px solid var(--vibeui-tabs-002-accent);outline-offset:-2px}
/* Панель открывает :has() по отмеченной кнопке: правила заданы на шесть вкладок. */
[data-vibeui-block="tabs-002"] [data-part="panel"]{
display:none;padding:0.75rem 0.5rem 0.5rem;
font-size:0.8125rem;line-height:1.5;color:var(--vibeui-tabs-002-muted);
}
[data-vibeui-block="tabs-002"]:has(input[data-index="0"]:checked) [data-part="panel"][data-index="0"]{display:block}
[data-vibeui-block="tabs-002"]:has(input[data-index="1"]:checked) [data-part="panel"][data-index="1"]{display:block}
[data-vibeui-block="tabs-002"]:has(input[data-index="2"]:checked) [data-part="panel"][data-index="2"]{display:block}
[data-vibeui-block="tabs-002"]:has(input[data-index="3"]:checked) [data-part="panel"][data-index="3"]{display:block}
[data-vibeui-block="tabs-002"]:has(input[data-index="4"]:checked) [data-part="panel"][data-index="4"]{display:block}
[data-vibeui-block="tabs-002"]:has(input[data-index="5"]:checked) [data-part="panel"][data-index="5"]{display:block}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="tabs-002"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_TABS: Tabs002Tab[] = [
  {
    label: "Обзор",
    text: "Компонент рендерится без единого пропа: значения по умолчанию заданы прямо в файле.",
  },
  {
    label: "Установка",
    text: "Файл копируется в проект одной командой. Внешних зависимостей нет — только react.",
  },
  {
    label: "Тема",
    text: "Цвета живут в переменных с префиксом компонента, поэтому тема хозяина не перебивает их.",
  },
]

/**
 * Вкладки на радиокнопках: переключение и стрелки без JS.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Tabs002({
  tabs = DEFAULT_TABS,
  name = "vibeui-tabs-002",
  accent,
  className,
  style,
  ...props
}: Tabs002Props) {
  const palette = {
    ...(accent ? { "--vibeui-tabs-002-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-tabs-002" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="tabs-002"
        className={className}
        style={palette}
      >
        <div data-part="strip" role="radiogroup" aria-label="Разделы">
          {tabs.map((tab, index) => (
            <label key={tab.label}>
              <input
                type="radio"
                name={name}
                value={tab.label}
                data-index={index}
                defaultChecked={index === 0}
              />
              <span data-part="tab">{tab.label}</span>
            </label>
          ))}
        </div>
        {tabs.map((tab, index) => (
          <p key={tab.label} data-part="panel" data-index={index}>
            {tab.text}
          </p>
        ))}
      </div>
    </>
  )
}