Feedback
Toast Stack
Стопка сообщений с пределом: больше трёх карточек подряд никто не читает, остальные сворачиваются в строку.
- toast
- stack
- notifications
- limit
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/toast-003
Компонент button-020 опубликован
Сборка каталога завершена за 42 с
Не удалось загрузить превью chart-009
и ещё 2
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «toast-003» (Toast Stack) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/toast-003.json
Registry item: https://vibeui.ru/r/toast-003.json
Ставится в: components/vibeui/toast-003.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Стопка сообщений с пределом: больше трёх карточек подряд никто не читает, остальные сворачиваются в строку.
Стопка сообщений: до трёх карточек, свёрнутый хвост со счётчиком, тон полоской слева и закрытие каждой. Ноль зависимостей, один файл.
## 3. Как использовать
import { Toast003 } from "@/components/vibeui/toast-003"
<Toast003 items={items} max={3} />
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-toast-003-* и не подменять её токенами вашей темы
- предел в три карточки: остальное сворачивается, иначе стопка закрывает экран
- role="log" с aria-live: поток сообщений читается иначе, чем одно
- тон полоской, а не заливкой: сообщение должно оставаться читаемым
- имя сообщения в подписи кнопки закрытия
- новые сообщения сверху — читают сверху вниз
## 6. Можно менять
- массив items и их тон
- max — сколько показывать сразу
- поведение кнопки закрытия
- акцент через проп accent
## 7. Правила
- Автоскрытия здесь нет: для одиночного сообщения с таймером есть toast-001.
- Ошибки не должны исчезать сами: их закрывает человек, и в стопке они стоят рядом с обычными.
- Позиционирование стопки — задача вызывающего кода.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/toast-003.jsonhttps://vibeui.ru/r/toast-003.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-toast-003-*. Клиентский: "use client". Контейнер объявлен role="log" с aria-live="polite": так читаются потоки сообщений. Тон задаётся полоской слева через data-tone, у каждой карточки есть кнопка скрытия с именем сообщения.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
"use client"
import { useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Toast003Item = {
id: string
title: string
tone?: "info" | "success" | "danger"
}
export type Toast003Props = Omit<
ComponentPropsWithoutRef<"div">,
"children"
> & {
items?: Toast003Item[]
max?: number
accent?: string
}
// Идея компонента: стопка сообщений с пределом. Больше трёх карточек подряд
// никто не читает — остальные сворачиваются в строку «и ещё N». Новые
// приходят сверху, потому что читают сверху вниз, а не наоборот.
const STYLES = `
:where([data-vibeui-block="toast-003"]){
--vibeui-toast-003-bg:oklch(1 0 0);
--vibeui-toast-003-fg:oklch(0.22 0.014 265);
--vibeui-toast-003-muted:oklch(0.56 0.014 265);
--vibeui-toast-003-border:oklch(0.9 0.006 265);
--vibeui-toast-003-info:oklch(0.58 0.16 265);
--vibeui-toast-003-success:oklch(0.58 0.15 152);
--vibeui-toast-003-danger:oklch(0.58 0.19 25);
--vibeui-toast-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="toast-003"]{
display:flex;flex-direction:column;gap:0.375rem;
width:100%;max-width:21rem;box-sizing:border-box;
font-family:var(--vibeui-toast-003-font);color:var(--vibeui-toast-003-fg);
}
[data-vibeui-block="toast-003"] [data-part="item"]{
display:flex;align-items:center;gap:0.625rem;
padding:0.625rem 0.75rem;box-sizing:border-box;
border:1px solid var(--vibeui-toast-003-border);border-radius:0.75rem;
background:var(--vibeui-toast-003-bg);
box-shadow:0 12px 28px -22px oklch(0.2 0.02 265 / 55%);
}
/* Тон — полоской слева, а не заливкой: сообщение остаётся читаемым. */
[data-vibeui-block="toast-003"] [data-part="bar"]{
flex:none;width:0.1875rem;align-self:stretch;border-radius:9999px;
background:var(--vibeui-toast-003-info);
}
[data-vibeui-block="toast-003"] [data-part="item"][data-tone="success"] [data-part="bar"]{background:var(--vibeui-toast-003-success)}
[data-vibeui-block="toast-003"] [data-part="item"][data-tone="danger"] [data-part="bar"]{background:var(--vibeui-toast-003-danger)}
[data-vibeui-block="toast-003"] [data-part="title"]{flex:1;min-width:0;font-size:0.8125rem;line-height:1.35}
[data-vibeui-block="toast-003"] [data-part="close"]{
appearance:none;border:0;cursor:pointer;background:transparent;flex:none;
display:flex;align-items:center;justify-content:center;
width:1.5rem;height:1.5rem;padding:0;border-radius:9999px;
color:var(--vibeui-toast-003-muted);
}
[data-vibeui-block="toast-003"] [data-part="close"]:hover{background:oklch(0.95 0.004 265);color:var(--vibeui-toast-003-fg)}
[data-vibeui-block="toast-003"] [data-part="close"]:focus-visible{outline:2px solid var(--vibeui-toast-003-info);outline-offset:1px}
[data-vibeui-block="toast-003"] [data-part="cross"]{position:relative;width:0.5rem;height:0.5rem}
[data-vibeui-block="toast-003"] [data-part="cross"]::before,
[data-vibeui-block="toast-003"] [data-part="cross"]::after{
content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;
margin-top:-0.75px;background:currentColor;border-radius:9999px;
}
[data-vibeui-block="toast-003"] [data-part="cross"]::before{transform:rotate(45deg)}
[data-vibeui-block="toast-003"] [data-part="cross"]::after{transform:rotate(-45deg)}
/* Хвост стопки — одной строкой: три карточки подряд ещё читают, десять нет. */
[data-vibeui-block="toast-003"] [data-part="more"]{
display:flex;align-items:center;justify-content:space-between;gap:0.5rem;
padding:0.5rem 0.75rem;border-radius:0.75rem;
border:1px dashed var(--vibeui-toast-003-border);
font-size:0.75rem;color:var(--vibeui-toast-003-muted);
}
[data-vibeui-block="toast-003"] [data-part="more"] button{
appearance:none;border:0;background:transparent;cursor:pointer;padding:0;
color:var(--vibeui-toast-003-info);font:inherit;font-size:0.75rem;font-weight:650;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="toast-003"] *{animation:none!important;transition:none!important}}
`
const DEFAULT_ITEMS: Toast003Item[] = [
{ id: "1", title: "Компонент button-020 опубликован", tone: "success" },
{ id: "2", title: "Сборка каталога завершена за 42 с" },
{ id: "3", title: "Не удалось загрузить превью chart-009", tone: "danger" },
{ id: "4", title: "Обновлены зависимости" },
{ id: "5", title: "Кто-то вошёл с нового устройства" },
]
/**
* Стопка сообщений с пределом: хвост сворачивается в строку «и ещё N».
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Toast003({
items = DEFAULT_ITEMS,
max = 3,
accent,
className,
style,
...props
}: Toast003Props) {
const [list, setList] = useState(items)
const [expanded, setExpanded] = useState(false)
const limit = Math.max(1, max)
const shown = expanded ? list : list.slice(0, limit)
const rest = list.length - shown.length
const palette = {
...(accent ? { "--vibeui-toast-003-info": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-toast-003" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="toast-003"
role="log"
aria-live="polite"
aria-label="Сообщения"
className={className}
style={palette}
>
{shown.map((item) => (
<div key={item.id} data-part="item" data-tone={item.tone ?? "info"}>
<span data-part="bar" aria-hidden="true" />
<span data-part="title">{item.title}</span>
<button
type="button"
data-part="close"
aria-label={`Скрыть сообщение: ${item.title}`}
onClick={() =>
setList(list.filter((entry) => entry.id !== item.id))
}
>
<span data-part="cross" aria-hidden="true" />
</button>
</div>
))}
{rest > 0 ? (
<p data-part="more">
<span>и ещё {rest}</span>
<button type="button" onClick={() => setExpanded(true)}>
Показать все
</button>
</p>
) : null}
{expanded && list.length > limit ? (
<p data-part="more">
<span>Показаны все {list.length}</span>
<button type="button" onClick={() => setExpanded(false)}>
Свернуть
</button>
</p>
) : null}
</div>
</>
)
}