Feedback
Reading Drawer
A full-height drawer for long text: section headings stick to the top and the consent footer stays put — reaching the action does not require reaching the end.
- drawer
- long read
- sticky
- consent
Preview
1440pxHost theme
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this in the header: https://vibeui.ru/c/drawer-007?lang=en
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
# Install and place "drawer-007" (Reading Drawer) from VibeUI
## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/drawer-007.json
Registry item: https://vibeui.ru/r/drawer-007.json
Installs to: components/vibeui/drawer-007.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.
Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.
## 2. What it is
A full-height drawer for long text: section headings stick to the top and the consent footer stays put — reaching the action does not require reaching the end.
A full-height drawer: long text with sticky section headings, and at the bottom a consent checkbox with an accept button that stays disabled until it is ticked. Zero dependencies, one file, its own palette.
## 3. How to use it
import { Drawer007 } from "@/components/vibeui/drawer-007"
<Drawer007
triggerLabel="Read the terms"
title="Updated terms"
sections={sections}
acceptLabel="Accept"
/>
Read the installed file for the full prop list.
## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.
Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)
## 5. Keep exactly as installed
- the local --vibeui-drawer-007-* palette — do not swap it for your theme tokens
- min-height:0 on the scrolling column: without it the flex container stretches and the scroll escapes
- the opaque background on the sticky heading — otherwise text shows through it while scrolling
- the footer outside the scroll: consent must not require scrolling to the end of the document
- the accept button disabled until the box is ticked: consent has to be a deliberate act
- the 30rem width: a longer line is hard to read even inside a drawer
## 6. You may change
- title — the drawer heading and its accessible name
- the sections array: headings and paragraphs of any length
- triggerLabel, agreeLabel and acceptLabel — the trigger, checkbox and button wording
- the drawer width and the body font size
- what accepting does: the button only closes the drawer today
## 7. Rules
- Scrolling to the end is not tracked: catch the scroll yourself if you need proof of reading.
- Do not use this drawer instead of a document page: long text deserves its own address and printing.
- The checkbox does not persist between openings — the consent state belongs to the caller.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.
## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.For developers
npx shadcn@latest add https://vibeui.ru/r/drawer-007.jsonhttps://vibeui.ru/r/drawer-007.jsonКомпонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-drawer-007-*. Клиентский: "use client", useState держит согласие, useRef — showModal и close. Прокручивается только средняя колонка (flex:1 и min-height:0), заголовки разделов держатся на position:sticky с непрозрачным фоном, иначе текст просвечивает под ними. Кнопка принятия заблокирована, пока флажок не отмечен.
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
"use client"
import { useRef, useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Drawer007Section = {
heading: string
text: string
}
export type Drawer007Props = Omit<
ComponentPropsWithoutRef<"div">,
"children" | "title"
> & {
triggerLabel?: string
title?: string
sections?: Drawer007Section[]
agreeLabel?: string
acceptLabel?: string
accent?: string
}
// Идея компонента: ящик во всю высоту для длинного текста. Прокручивается
// только середина; заголовки разделов прилипают к верху колонки, а подвал с
// согласием и кнопкой стоит на месте — до действия не нужно доезжать до
// конца документа, и видно, в каком разделе сейчас находишься.
const STYLES = `
:where([data-vibeui-block="drawer-007"]){
--vibeui-drawer-007-bg:oklch(1 0 0);
--vibeui-drawer-007-fg:oklch(0.21 0.014 265);
--vibeui-drawer-007-muted:oklch(0.55 0.014 265);
--vibeui-drawer-007-border:oklch(0.91 0.006 265);
--vibeui-drawer-007-accent:oklch(0.55 0.17 265);
--vibeui-drawer-007-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="drawer-007"]{
display:inline-block;font-family:var(--vibeui-drawer-007-font);color:var(--vibeui-drawer-007-fg);
}
[data-vibeui-block="drawer-007"] [data-part="trigger"]{
appearance:none;cursor:pointer;height:2.25rem;padding:0 0.875rem;
border:1px solid var(--vibeui-drawer-007-border);border-radius:0.625rem;
background:var(--vibeui-drawer-007-bg);color:inherit;
font:inherit;font-size:0.8125rem;font-weight:600;
}
[data-vibeui-block="drawer-007"] [data-part="trigger"]:focus-visible{outline:2px solid var(--vibeui-drawer-007-accent);outline-offset:2px}
[data-vibeui-block="drawer-007"] dialog{
position:fixed;inset:0 0 0 auto;margin:0;
width:min(30rem,100vw);max-width:100vw;height:100dvh;max-height:100dvh;
padding:0;border:0;background:var(--vibeui-drawer-007-bg);color:inherit;
box-shadow:-24px 0 60px -30px oklch(0.2 0.02 265 / 55%);
translate:100% 0;transition:translate .22s ease,overlay .22s allow-discrete,display .22s allow-discrete;
}
[data-vibeui-block="drawer-007"] dialog[open]{translate:0 0}
@starting-style{
[data-vibeui-block="drawer-007"] dialog[open]{translate:100% 0}
}
[data-vibeui-block="drawer-007"] dialog::backdrop{background:oklch(0.19 0.02 265 / 45%)}
[data-vibeui-block="drawer-007"] [data-part="panel"]{display:flex;flex-direction:column;height:100%;box-sizing:border-box}
[data-vibeui-block="drawer-007"] [data-part="head"]{
display:flex;align-items:center;justify-content:space-between;gap:0.75rem;
padding:1rem 1.125rem 0.75rem;border-bottom:1px solid var(--vibeui-drawer-007-border);
}
[data-vibeui-block="drawer-007"] [data-part="title"]{margin:0;font-size:1.0625rem;font-weight:680}
[data-vibeui-block="drawer-007"] [data-part="close"]{
appearance:none;border:0;cursor:pointer;background:transparent;flex:none;
display:flex;align-items:center;justify-content:center;
width:2rem;height:2rem;border-radius:0.5rem;color:var(--vibeui-drawer-007-muted);
}
[data-vibeui-block="drawer-007"] [data-part="close"]:hover{background:oklch(0.96 0.004 265);color:var(--vibeui-drawer-007-fg)}
[data-vibeui-block="drawer-007"] [data-part="close"]:focus-visible{outline:2px solid var(--vibeui-drawer-007-accent);outline-offset:2px}
[data-vibeui-block="drawer-007"] [data-part="cross"]{position:relative;width:0.625rem;height:0.625rem}
[data-vibeui-block="drawer-007"] [data-part="cross"]::before,
[data-vibeui-block="drawer-007"] [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="drawer-007"] [data-part="cross"]::before{transform:rotate(45deg)}
[data-vibeui-block="drawer-007"] [data-part="cross"]::after{transform:rotate(-45deg)}
/* Единственная прокручиваемая область: min-height:0 обязателен во flex. */
[data-vibeui-block="drawer-007"] [data-part="body"]{
flex:1;min-height:0;overflow-y:auto;padding:0 1.125rem 1rem;
}
/* Заголовок раздела прилипает: видно, где ты, не поднимаясь наверх. */
[data-vibeui-block="drawer-007"] [data-part="heading"]{
position:sticky;top:0;z-index:1;margin:0;
padding:0.75rem 0 0.5rem;background:var(--vibeui-drawer-007-bg);
font-size:0.75rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;
color:var(--vibeui-drawer-007-muted);
box-shadow:0 1px 0 var(--vibeui-drawer-007-border);
}
[data-vibeui-block="drawer-007"] [data-part="text"]{
margin:0.75rem 0 1.25rem;font-size:0.875rem;line-height:1.6;
}
[data-vibeui-block="drawer-007"] [data-part="foot"]{
display:flex;flex-direction:column;gap:0.625rem;
padding:0.875rem 1.125rem calc(0.875rem + env(safe-area-inset-bottom,0px));
border-top:1px solid var(--vibeui-drawer-007-border);background:var(--vibeui-drawer-007-bg);
}
[data-vibeui-block="drawer-007"] [data-part="agree"]{
display:flex;align-items:flex-start;gap:0.5rem;cursor:pointer;font-size:0.8125rem;line-height:1.4;
}
[data-vibeui-block="drawer-007"] [data-part="agree"] input{
appearance:none;flex:none;width:1.125rem;height:1.125rem;margin:0.0625rem 0 0;
border:1.5px solid var(--vibeui-drawer-007-border);border-radius:0.375rem;
background:var(--vibeui-drawer-007-bg);cursor:pointer;position:relative;
}
[data-vibeui-block="drawer-007"] [data-part="agree"] input:checked{
background:var(--vibeui-drawer-007-accent);border-color:var(--vibeui-drawer-007-accent);
}
[data-vibeui-block="drawer-007"] [data-part="agree"] input:checked::after{
content:"";position:absolute;left:0.3125rem;top:0.125rem;
width:0.25rem;height:0.5rem;border:solid oklch(0.99 0.01 265);
border-width:0 2px 2px 0;transform:rotate(45deg);
}
[data-vibeui-block="drawer-007"] [data-part="agree"] input:focus-visible{outline:2px solid var(--vibeui-drawer-007-accent);outline-offset:2px}
[data-vibeui-block="drawer-007"] [data-part="accept"]{
appearance:none;border:0;cursor:pointer;width:100%;height:2.75rem;border-radius:0.75rem;
background:var(--vibeui-drawer-007-accent);color:oklch(0.99 0.01 265);
font:inherit;font-size:0.9375rem;font-weight:650;
}
[data-vibeui-block="drawer-007"] [data-part="accept"]:disabled{cursor:not-allowed;opacity:.45}
[data-vibeui-block="drawer-007"] [data-part="accept"]:focus-visible{outline:2px solid var(--vibeui-drawer-007-accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="drawer-007"] *{animation:none!important;transition:none!important}
[data-vibeui-block="drawer-007"] dialog{translate:0 0}
}
`
const DEFAULT_SECTIONS: Drawer007Section[] = [
{
heading: "Что меняется",
text: "С 1 апреля публикация проекта считается по числу активных адресов, а не по числу сборок. Старые проекты пересчитываются автоматически, доплачивать за прошедшие месяцы не нужно.",
},
{
heading: "Хранение данных",
text: "Исходники и журналы сборки хранятся 90 дней с момента последней публикации. После этого журналы удаляются, исходники остаются доступными для скачивания ещё год.",
},
{
heading: "Доступ команды",
text: "Приглашённый участник видит проекты, к которым его добавили, и историю их публикаций. Права владельца остаются у создателя пространства и передаются только вручную.",
},
{
heading: "Отказ от условий",
text: "Если новые условия не подходят, проект можно выгрузить одним архивом и удалить пространство. Выгрузка содержит исходники, настройки сборки и список адресов.",
},
]
/**
* Ящик во всю высоту: липкие заголовки разделов и подвал с согласием.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Drawer007({
triggerLabel = "Читать условия",
title = "Обновлённые условия",
sections = DEFAULT_SECTIONS,
agreeLabel = "Я прочитал условия и согласен с ними",
acceptLabel = "Принять",
accent,
className,
style,
...props
}: Drawer007Props) {
const drawer = useRef<HTMLDialogElement>(null)
const [agreed, setAgreed] = useState(false)
const palette = {
...(accent ? { "--vibeui-drawer-007-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-drawer-007" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="drawer-007"
className={className}
style={palette}
>
<button
type="button"
data-part="trigger"
onClick={() => drawer.current?.showModal()}
>
{triggerLabel}
</button>
<dialog
ref={drawer}
aria-label={title}
onClick={(event) => {
if (event.target === drawer.current) {
drawer.current.close()
}
}}
>
<div data-part="panel">
<div data-part="head">
<h2 data-part="title">{title}</h2>
<button
type="button"
data-part="close"
aria-label="Закрыть панель"
onClick={() => drawer.current?.close()}
>
<span data-part="cross" aria-hidden="true" />
</button>
</div>
<div data-part="body">
{sections.map((section) => (
<section key={section.heading}>
<h3 data-part="heading">{section.heading}</h3>
<p data-part="text">{section.text}</p>
</section>
))}
</div>
<div data-part="foot">
<label data-part="agree">
<input
type="checkbox"
checked={agreed}
onChange={(event) => setAgreed(event.target.checked)}
/>
<span>{agreeLabel}</span>
</label>
<button
type="button"
data-part="accept"
disabled={!agreed}
onClick={() => drawer.current?.close()}
>
{acceptLabel}
</button>
</div>
</div>
</dialog>
</div>
</>
)
}