Display
Edge Shadow Scroll
Область прокрутки, где тени у краёв появляются только с той стороны, где ещё есть содержимое, и делает это чистый CSS: четыре слоя фона вместо обработчика прокрутки.
- scrollarea
- shadow
- css
- display
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/scrollarea-002
Очередь работ
- Пересобрать реестр
- Проверить типы
- Обновить снимки превью
- Написать описание блока
- Перевести metadata
- Прогнать линтер
- Свести конфликты
- Выложить на стенд
- Позвать на ревью
- Закрыть задачу
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «scrollarea-002» (Edge Shadow Scroll) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/scrollarea-002.json
Registry item: https://vibeui.ru/r/scrollarea-002.json
Ставится в: components/vibeui/scrollarea-002.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Область прокрутки, где тени у краёв появляются только с той стороны, где ещё есть содержимое, и делает это чистый CSS: четыре слоя фона вместо обработчика прокрутки.
Область прокрутки с подсказками у краёв: тени нарисованы четырьмя слоями фона и появляются сами, без onScroll. Ноль зависимостей, один файл, серверный рендер.
## 3. Как использовать
import { Scrollarea002 } from "@/components/vibeui/scrollarea-002"
<Scrollarea002 title="Очередь работ" items={["Пересобрать реестр", "Проверить типы"]} height="13rem" />
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-scrollarea-002-* и не подменять её токенами вашей темы
- порядок и attachment четырёх слоёв фона: перестановка ломает весь приём
- непрозрачный цвет крышек — на прозрачном фоне тень видна всегда и подсказка врёт
- tabindex="0" и role="region" с aria-label на прокручиваемом узле: иначе с клавиатуры не прокрутить
- overscroll-behavior: contain, чтобы прокрутка не проваливалась на страницу
- собственную светлую подложку: тени считаются от её цвета
## 6. Можно менять
- заголовок через title
- содержимое списка через items
- высоту области через height
- силу тени переменной цвета тени
## 7. Правила
- Приём работает только на непрозрачном фоне: сквозь стеклянную подложку тень будет видна всегда.
- Горизонтальные тени этот вариант не рисует — для ленты вбок слои нужно переписать по оси X.
- Слишком высокие крышки съедают первые строки списка: держите их около двух строк.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/scrollarea-002.jsonhttps://vibeui.ru/r/scrollarea-002.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-scrollarea-002-*. Серверный: хуков и обработчиков нет. Приём держится на background-attachment: две «крышки» цвета подложки объявлены как local и едут вместе с содержимым, две радиальные тени объявлены как scroll и приколоты к рамке. Пока лента не сдвинута, крышка накрывает тень; при прокрутке крышка уезжает и тень открывается. Прокручиваемый узел получает tabindex="0" и role="region" с aria-label: без них область нельзя пролистать с клавиатуры и она не попадает в список ориентиров. overscroll-behavior: contain не даёт прокрутке провалиться на страницу.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Scrollarea002Props = Omit<
ComponentPropsWithoutRef<"div">,
"children" | "title"
> & {
title?: string
items?: string[]
height?: string
}
// Идея компонента: тени у краёв появляются только с той стороны, где ещё есть
// содержимое, и делает это чистый CSS. Четыре слоя фона: две «крышки» цвета
// подложки прокручиваются вместе с содержимым (background-attachment:local),
// две тени приколоты к рамке (scroll). У верхнего края крышка накрывает тень,
// пока лента не сдвинута, — и уезжает, открывая её. Никакого onScroll.
const STYLES = `
:where([data-vibeui-block="scrollarea-002"]){
--vibeui-scrollarea-002-bg:oklch(1 0 0);
--vibeui-scrollarea-002-fg:oklch(0.24 0.014 265);
--vibeui-scrollarea-002-muted:oklch(0.55 0.014 265);
--vibeui-scrollarea-002-border:oklch(0.9 0.006 265);
--vibeui-scrollarea-002-shadow:oklch(0.24 0.014 265 / 16%);
--vibeui-scrollarea-002-accent:oklch(0.55 0.17 265);
--vibeui-scrollarea-002-height:13rem;
--vibeui-scrollarea-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="scrollarea-002"]{
display:flex;flex-direction:column;
width:100%;max-width:20rem;box-sizing:border-box;overflow:hidden;
background:var(--vibeui-scrollarea-002-bg);
border:1px solid var(--vibeui-scrollarea-002-border);border-radius:0.875rem;
font-family:var(--vibeui-scrollarea-002-font);color:var(--vibeui-scrollarea-002-fg);
}
[data-vibeui-block="scrollarea-002"] [data-part="head"]{
padding:0.625rem 0.875rem;border-bottom:1px solid var(--vibeui-scrollarea-002-border);
font-size:0.8125rem;font-weight:650;
}
/* Четыре слоя: крышки едут с содержимым, тени приколоты к рамке. */
[data-vibeui-block="scrollarea-002"] [data-part="area"]{
height:var(--vibeui-scrollarea-002-height);
overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
background:
linear-gradient(var(--vibeui-scrollarea-002-bg) 30%,transparent) center top,
linear-gradient(transparent,var(--vibeui-scrollarea-002-bg) 70%) center bottom,
radial-gradient(farthest-side at 50% 0,var(--vibeui-scrollarea-002-shadow),transparent) center top,
radial-gradient(farthest-side at 50% 100%,var(--vibeui-scrollarea-002-shadow),transparent) center bottom;
background-repeat:no-repeat;
background-size:100% 2.25rem,100% 2.25rem,100% 0.6875rem,100% 0.6875rem;
background-attachment:local,local,scroll,scroll;
}
[data-vibeui-block="scrollarea-002"] [data-part="area"]:focus-visible{
outline:2px solid var(--vibeui-scrollarea-002-accent);outline-offset:-2px;
}
[data-vibeui-block="scrollarea-002"] ul{margin:0;padding:0.25rem 0;list-style:none}
[data-vibeui-block="scrollarea-002"] li{
display:flex;align-items:center;gap:0.5rem;
min-height:2.125rem;padding:0 0.875rem;font-size:0.8125rem;
}
[data-vibeui-block="scrollarea-002"] li span{
flex:none;width:0.375rem;height:0.375rem;border-radius:9999px;
background:var(--vibeui-scrollarea-002-muted);
}
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="scrollarea-002"] *{animation:none!important;transition:none!important}
}
`
const DEFAULT_ITEMS = [
"Пересобрать реестр",
"Проверить типы",
"Обновить снимки превью",
"Написать описание блока",
"Перевести metadata",
"Прогнать линтер",
"Свести конфликты",
"Выложить на стенд",
"Позвать на ревью",
"Закрыть задачу",
]
/**
* Область прокрутки, где тени у краёв нарисованы фоном без JS.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Scrollarea002({
title = "Очередь работ",
items = DEFAULT_ITEMS,
height = "13rem",
className,
style,
...props
}: Scrollarea002Props) {
const palette = {
"--vibeui-scrollarea-002-height": height,
...style,
} as CSSProperties
return (
<>
<style href="vibeui-scrollarea-002" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="scrollarea-002"
className={className}
style={palette}
>
<div data-part="head">{title}</div>
<div data-part="area" tabIndex={0} role="region" aria-label={title}>
<ul>
{items.map((item) => (
<li key={item}>
<span aria-hidden="true" />
{item}
</li>
))}
</ul>
</div>
</div>
</>
)
}