VibeUI

Navigation

Editor Tabs

Вкладки редактора с закрытием: у несохранённого файла крестик заменён точкой, поэтому правки не теряются одним промахом мыши.

  • tabs
  • editor
  • close
  • dirty state

Превью

1440pxHost theme

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

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

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

export default function Page() {
  return <main>Главная</main>
}
Показать полную инструкцию

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

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

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

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

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

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

Ряд вкладок как в редакторе кода: моноширинные имена файлов, крестик закрытия, точка у несохранённого файла и явное состояние, когда закрыто всё. Закрытие переводит выбор на соседа слева. Ноль зависимостей, один файл, своя палитра.

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

<Tabs009
  defaultId="layout"
  files={[
    { id: "page", label: "page.tsx", text: "export default function Page() {}" },
    { id: "layout", label: "layout.tsx", dirty: true, text: "…" },
  ]}
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-tabs-009-* и не подменять её токенами вашей темы (bg-muted, border-border и подобными)
- точку вместо крестика у несохранённого файла: крестик на месте метки правок приводит к случайной потере работы
- остановку всплытия у кнопки закрытия — без неё закрытие заодно переключает вкладку
- tabIndex -1 у крестика: иначе Tab перебирает по две цели на каждую вкладку
- aria-label у кнопки закрытия с именем файла: «×» скринридер прочитает как символ
- перевод выбора на соседа слева при закрытии — иначе после закрытия активной вкладки не остаётся ни одной

## 6. Можно менять
- массив files: имена, признак dirty и содержимое
- defaultId — какой файл открыт изначально
- моноширинный шрифт и высоту ряда
- акцент через проп accent — цвет верхней полоски активной вкладки

## 7. Правила
- Закрытие безусловно: подтверждения для несохранённого файла компонент не показывает, добавьте его под свою модель.
- Закрытые вкладки не возвращаются: список открытого живёт в состоянии компонента.
- Вкладка — это div с role="tab", а не кнопка: внутри неё уже есть своя кнопка, и кнопка в кнопке недопустима.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

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

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-tabs-009-*. Клиентский: "use client" ради списка открытых файлов и выбора. Вкладка — элемент с role="tab", а крестик внутри неё — отдельная кнопка с tabIndex -1 и остановкой всплытия, поэтому закрытие не срабатывает при переключении. Точка несохранённого файла подменяется крестиком по :hover и :focus-within. Закрытая вкладка отдаёт выбор соседу слева.

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

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

"use client"

import { useRef, useState } from "react"
import type { CSSProperties, KeyboardEvent } from "react"

export type Tabs009File = {
  id: string
  label: string
  dirty?: boolean
  text?: string
}

export type Tabs009Props = {
  files?: Tabs009File[]
  defaultId?: string
  accent?: string
  className?: string
  style?: CSSProperties
}

// Идея компонента: вкладки редактора — их закрывают. Крестик живёт внутри
// вкладки отдельной кнопкой, поэтому сама вкладка остаётся ролью tab, а закрытие
// не срабатывает по ошибке при переключении. У несохранённого файла крестик
// заменяется точкой, чтобы правки нельзя было потерять одним промахом.
const STYLES = `
:where([data-vibeui-block="tabs-009"]){
--vibeui-tabs-009-bg:oklch(1 0 0);
--vibeui-tabs-009-strip:oklch(0.96 0.003 265);
--vibeui-tabs-009-fg:oklch(0.22 0.014 265);
--vibeui-tabs-009-muted:oklch(0.55 0.014 265);
--vibeui-tabs-009-border:oklch(0.91 0.006 265);
--vibeui-tabs-009-hover:oklch(0.55 0.02 265 / 9%);
--vibeui-tabs-009-dirty:oklch(0.72 0.15 75);
--vibeui-tabs-009-accent:oklch(0.55 0.2 262);
--vibeui-tabs-009-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--vibeui-tabs-009-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
[data-vibeui-block="tabs-009"]{
box-sizing:border-box;width:100%;max-width:30rem;overflow:hidden;
background:var(--vibeui-tabs-009-bg);color:var(--vibeui-tabs-009-fg);
border:1px solid var(--vibeui-tabs-009-border);border-radius:0.75rem;
font-family:var(--vibeui-tabs-009-font);
}
[data-vibeui-block="tabs-009"] [data-part="list"]{
display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;
background:var(--vibeui-tabs-009-strip);
border-bottom:1px solid var(--vibeui-tabs-009-border);
}
[data-vibeui-block="tabs-009"] [data-part="list"]::-webkit-scrollbar{display:none}
[data-vibeui-block="tabs-009"] [data-part="tab"]{
display:flex;align-items:center;gap:0.5rem;cursor:pointer;
padding:0.5rem 0.5rem 0.5rem 0.75rem;white-space:nowrap;
background:var(--vibeui-tabs-009-strip);color:var(--vibeui-tabs-009-muted);
font-family:var(--vibeui-tabs-009-mono);font-size:0.75rem;
border-top:2px solid transparent;
}
[data-vibeui-block="tabs-009"] [data-part="tab"]:hover{color:var(--vibeui-tabs-009-fg)}
[data-vibeui-block="tabs-009"] [data-part="tab"]:focus-visible{outline:2px solid var(--vibeui-tabs-009-accent);outline-offset:-2px}
[data-vibeui-block="tabs-009"] [data-part="tab"][aria-selected="true"]{
background:var(--vibeui-tabs-009-bg);color:var(--vibeui-tabs-009-fg);
border-top-color:var(--vibeui-tabs-009-accent);
}
[data-vibeui-block="tabs-009"] [data-part="close"]{
appearance:none;border:0;background:none;cursor:pointer;
width:1.125rem;height:1.125rem;flex:none;border-radius:0.25rem;
display:grid;place-items:center;
font:inherit;font-size:0.75rem;line-height:1;color:var(--vibeui-tabs-009-muted);
}
[data-vibeui-block="tabs-009"] [data-part="close"]:hover{background:var(--vibeui-tabs-009-hover);color:var(--vibeui-tabs-009-fg)}
[data-vibeui-block="tabs-009"] [data-part="close"]:focus-visible{outline:2px solid var(--vibeui-tabs-009-accent);outline-offset:-2px}
/* Несохранённый файл: точка вместо крестика, пока на вкладку не навели. */
[data-vibeui-block="tabs-009"] [data-part="dot"]{
width:0.5rem;height:0.5rem;border-radius:999px;background:var(--vibeui-tabs-009-dirty);
}
[data-vibeui-block="tabs-009"] [data-part="tab"]:hover [data-part="dot"],
[data-vibeui-block="tabs-009"] [data-part="tab"]:focus-within [data-part="dot"]{display:none}
[data-vibeui-block="tabs-009"] [data-part="tab"] [data-part="close"][data-dirty="true"]{display:none}
[data-vibeui-block="tabs-009"] [data-part="tab"]:hover [data-part="close"][data-dirty="true"],
[data-vibeui-block="tabs-009"] [data-part="tab"]:focus-within [data-part="close"][data-dirty="true"]{display:grid}
[data-vibeui-block="tabs-009"] [data-part="panel"]{
padding:0.875rem;font-family:var(--vibeui-tabs-009-mono);font-size:0.75rem;line-height:1.7;
color:var(--vibeui-tabs-009-muted);white-space:pre-wrap;margin:0;
}
[data-vibeui-block="tabs-009"] [data-part="panel"]:focus-visible{outline:2px solid var(--vibeui-tabs-009-accent);outline-offset:-3px;border-radius:0.5rem}
[data-vibeui-block="tabs-009"] [data-part="empty"]{
padding:1.5rem 0.875rem;text-align:center;font-size:0.8125rem;color:var(--vibeui-tabs-009-muted);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="tabs-009"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_FILES: Tabs009File[] = [
  {
    id: "page",
    label: "page.tsx",
    text: "export default function Page() {\n  return <main>Главная</main>\n}",
  },
  {
    id: "layout",
    label: "layout.tsx",
    dirty: true,
    text: "export const metadata = {\n  title: 'Полотно',\n}",
  },
  {
    id: "styles",
    label: "globals.css",
    text: ":root {\n  color-scheme: light;\n}",
  },
]

/**
 * Вкладки редактора с закрытием и меткой несохранённого файла.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Tabs009({
  files = DEFAULT_FILES,
  defaultId,
  accent,
  className,
  style,
}: Tabs009Props) {
  const [open, setOpen] = useState(files)
  const [active, setActive] = useState(defaultId ?? files[0]?.id)
  const listRef = useRef<HTMLDivElement>(null)

  const palette = {
    ...(accent ? { "--vibeui-tabs-009-accent": accent } : null),
    ...style,
  } as CSSProperties

  const index = Math.max(
    0,
    open.findIndex((file) => file.id === active),
  )

  // Закрытая вкладка отдаёт выбор соседу слева: так фокус остаётся в ряду,
  // а не улетает в начало документа.
  function close(id: string) {
    const position = open.findIndex((file) => file.id === id)
    const rest = open.filter((file) => file.id !== id)

    setOpen(rest)

    if (id === active) {
      setActive(rest[Math.max(position - 1, 0)]?.id)
    }
  }

  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    const keys = ["ArrowLeft", "ArrowRight", "Home", "End"]

    if (!keys.includes(event.key) || open.length === 0) {
      return
    }

    event.preventDefault()

    const last = open.length - 1
    const next =
      event.key === "Home"
        ? 0
        : event.key === "End"
          ? last
          : event.key === "ArrowLeft"
            ? (index - 1 + open.length) % open.length
            : (index + 1) % open.length

    setActive(open[next].id)
    listRef.current
      ?.querySelectorAll<HTMLDivElement>('[data-part="tab"]')
      [next]?.focus()
  }

  const current = open.find((file) => file.id === active)

  return (
    <>
      <style href="vibeui-tabs-009" precedence="medium">
        {STYLES}
      </style>
      <div data-vibeui-block="tabs-009" className={className} style={palette}>
        <div
          data-part="list"
          role="tablist"
          aria-label="Открытые файлы"
          ref={listRef}
          onKeyDown={onKeyDown}
        >
          {open.map((file) => (
            <div
              key={file.id}
              data-part="tab"
              role="tab"
              id={`vibeui-tabs-009-${file.id}-tab`}
              aria-selected={file.id === active}
              aria-controls="vibeui-tabs-009-panel"
              tabIndex={file.id === active ? 0 : -1}
              onClick={() => setActive(file.id)}
            >
              {file.label}
              {file.dirty ? <span data-part="dot" aria-hidden="true" /> : null}
              <button
                type="button"
                data-part="close"
                data-dirty={file.dirty ? "true" : undefined}
                tabIndex={-1}
                aria-label={`Закрыть ${file.label}`}
                onClick={(event) => {
                  event.stopPropagation()
                  close(file.id)
                }}
              >
                ×
              </button>
            </div>
          ))}
        </div>
        {current ? (
          <pre
            data-part="panel"
            role="tabpanel"
            id="vibeui-tabs-009-panel"
            aria-labelledby={`vibeui-tabs-009-${current.id}-tab`}
            tabIndex={0}
          >
            {current.text}
          </pre>
        ) : (
          <p data-part="empty">Все вкладки закрыты</p>
        )}
      </div>
    </>
  )
}