VibeUI

Inputs

Active Chips

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

  • filters
  • chips
  • reset
  • catalog

Превью

1440pxHost theme

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

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

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

Активные фильтры

Найдено 128 компонентов

  • Категория:Формы
  • Цена:до 5000 ₽
  • Лицензия:MIT
  • Обновлён:за месяц
Показать полную инструкцию

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

# Установка и размещение «filters-002» (Active Chips) из VibeUI

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

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

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

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

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

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

<Filters002
  chips={[{ id: "1", group: "Цена", value: "до 5000 ₽" }]}
  total="Найдено 128 компонентов"
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-filters-002-* и не подменять её токенами вашей темы (bg-muted, border-input и подобными)
- название группы внутри фишки: «до 5000» без слова «Цена» ничего не значит
- подпись кнопки удаления с группой и значением, а не «удалить» — на слух иначе непонятно, что снимается
- aria-live="polite" у счётчика найденного: он меняется от действий пользователя, а не от перехода по странице
- отдельную кнопку сброса на расстоянии от фишек — рядом с ними её нажимают по инерции
- внятное пустое состояние вместо исчезающей строки: пропавший блок читается как поломка
- блок <style> внутри компонента — в нём вся палитра, фишки и оформление сброса

## 6. Можно менять
- массив chips: группы, значения и их порядок
- текст счётчика total над строкой
- подпись кнопки сброса resetLabel
- обработчик onChange: он получает оставшийся набор условий
- акцент через проп accent — цвет наведения на крестик и цвет сброса

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

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

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

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

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-filters-002-*. Клиентский: "use client" ради снятия условий. Фишка показывает группу и значение вместе, а подпись кнопки удаления называет условие целиком, а не номер. Счётчик найденного стоит в aria-live="polite": он меняется от действий пользователя. Кнопка «сбросить всё» появляется от двух фишек — на одной она дублирует крестик.

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

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

"use client"

import { useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Filters002Chip = {
  id: string
  group: string
  value: string
}

export type Filters002Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "onChange"
> & {
  chips?: Filters002Chip[]
  total?: string
  resetLabel?: string
  onChange?: (chips: Filters002Chip[]) => void
  accent?: string
}

// Идея компонента: строка того, что уже включено. Фильтры почти всегда
// прячутся в панели, и через минуту непонятно, почему список такой короткий.
// Здесь каждое условие — отдельная фишка с названием группы («Цена: до 5000»),
// а не голое значение: «до 5000» само по себе ничего не значит. Снять условие
// можно поштучно, а «сбросить всё» стоит отдельно и появляется от двух фишек.
const STYLES = `
:where([data-vibeui-block="filters-002"]){
--vibeui-filters-002-surface:oklch(1 0 0);
--vibeui-filters-002-chip:oklch(0.97 0.004 265);
--vibeui-filters-002-fg:oklch(0.23 0.014 265);
--vibeui-filters-002-muted:oklch(0.55 0.014 265);
--vibeui-filters-002-border:oklch(0.89 0.008 265);
--vibeui-filters-002-shell:oklch(0.91 0.006 265);
--vibeui-filters-002-accent:oklch(0.53 0.18 268);
--vibeui-filters-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Своя светлая подложка: строку показывают поверх любого фона. */
[data-vibeui-block="filters-002"]{
display:flex;flex-direction:column;gap:0.5rem;
width:100%;max-width:32rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-filters-002-surface);
border:1px solid var(--vibeui-filters-002-shell);border-radius:0.875rem;
font-family:var(--vibeui-filters-002-font);color:var(--vibeui-filters-002-fg);
}
[data-vibeui-block="filters-002"] *{box-sizing:border-box}
[data-vibeui-block="filters-002"] [data-part="head"]{
display:flex;align-items:baseline;justify-content:space-between;gap:0.75rem;
}
[data-vibeui-block="filters-002"] h3{margin:0;font-size:0.8125rem;font-weight:650}
[data-vibeui-block="filters-002"] [data-part="total"]{
margin:0;font-size:0.75rem;color:var(--vibeui-filters-002-muted);
font-variant-numeric:tabular-nums;
}
[data-vibeui-block="filters-002"] ul{
display:flex;flex-wrap:wrap;gap:0.375rem;margin:0;padding:0;list-style:none;
}
/* Фишка называет группу: «до 5000» без «Цена» ничего не значит. */
[data-vibeui-block="filters-002"] [data-part="chip"]{
display:inline-flex;align-items:center;gap:0.375rem;
padding:0.25rem 0.25rem 0.25rem 0.5625rem;border-radius:9999px;
background:var(--vibeui-filters-002-chip);
border:1px solid var(--vibeui-filters-002-border);
font-size:0.75rem;line-height:1.35;
}
[data-vibeui-block="filters-002"] [data-part="group"]{color:var(--vibeui-filters-002-muted)}
[data-vibeui-block="filters-002"] [data-part="value"]{font-weight:650}
[data-vibeui-block="filters-002"] [data-part="chip"] button{
appearance:none;cursor:pointer;flex:none;
display:grid;place-items:center;
width:1.125rem;height:1.125rem;border-radius:9999px;border:0;
background:oklch(1 0 0);color:var(--vibeui-filters-002-muted);
font:inherit;font-size:0.75rem;line-height:1;
transition:background-color .16s ease,color .16s ease;
}
[data-vibeui-block="filters-002"] [data-part="chip"] button:hover{
background:var(--vibeui-filters-002-accent);color:oklch(1 0 0);
}
[data-vibeui-block="filters-002"] [data-part="chip"] button:focus-visible{
outline:2px solid var(--vibeui-filters-002-accent);outline-offset:2px;
}
/* «Сбросить всё» отделено: рядом с фишками его нажимают по инерции. */
[data-vibeui-block="filters-002"] [data-part="reset"]{
appearance:none;cursor:pointer;align-self:flex-start;
padding:0.25rem 0.625rem;border-radius:9999px;
border:1px dashed var(--vibeui-filters-002-border);
background:none;color:var(--vibeui-filters-002-accent);
font:inherit;font-size:0.75rem;font-weight:650;
}
[data-vibeui-block="filters-002"] [data-part="reset"]:hover{border-style:solid;border-color:var(--vibeui-filters-002-accent)}
[data-vibeui-block="filters-002"] [data-part="reset"]:focus-visible{outline:2px solid var(--vibeui-filters-002-accent);outline-offset:2px}
[data-vibeui-block="filters-002"] [data-part="empty"]{
margin:0;font-size:0.8125rem;color:var(--vibeui-filters-002-muted);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="filters-002"] *{animation:none!important;transition:none!important}}
`

const DEFAULT_CHIPS: Filters002Chip[] = [
  { id: "1", group: "Категория", value: "Формы" },
  { id: "2", group: "Цена", value: "до 5000 ₽" },
  { id: "3", group: "Лицензия", value: "MIT" },
  { id: "4", group: "Обновлён", value: "за месяц" },
]

/**
 * Строка активных фильтров: снятие по одному и отдельный сброс всего набора.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Filters002({
  chips = DEFAULT_CHIPS,
  total = "Найдено 128 компонентов",
  resetLabel = "Сбросить всё",
  onChange,
  accent,
  className,
  style,
  ...props
}: Filters002Props) {
  const [list, setList] = useState(chips)

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

  const apply = (next: Filters002Chip[]) => {
    setList(next)
    onChange?.(next)
  }

  return (
    <>
      <style href="vibeui-filters-002" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="filters-002"
        className={className}
        style={palette}
      >
        <div data-part="head">
          <h3>Активные фильтры</h3>
          <p data-part="total" aria-live="polite">
            {total}
          </p>
        </div>

        {list.length === 0 ? (
          <p data-part="empty">Фильтров нет — показан весь каталог целиком.</p>
        ) : (
          <ul>
            {list.map((chip) => (
              <li key={chip.id} data-part="chip">
                <span data-part="group">{chip.group}:</span>
                <span data-part="value">{chip.value}</span>
                <button
                  type="button"
                  aria-label={`Снять фильтр ${chip.group}: ${chip.value}`}
                  onClick={() =>
                    apply(list.filter((item) => item.id !== chip.id))
                  }
                >
                  ×
                </button>
              </li>
            ))}
          </ul>
        )}

        {/* Сброс появляется от двух фишек: на одной он дублирует крестик. */}
        {list.length > 1 ? (
          <button type="button" data-part="reset" onClick={() => apply([])}>
            {resetLabel}
          </button>
        ) : null}
      </div>
    </>
  )
}