Display
Day Groups
A feed cut into days: the day header sticks to the top of its own group, so it is always clear which day you are reading.
- timeline
- sticky
- groups
- feed
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/timeline-008?lang=en
Request feed
Сегодня
- 14:20Счёт оплачен
Платёж прошёл, чек отправлен на почту
- 11:05Заявка принята в работу
- 14:20
Вчера
- 19:42Добавлен комментарий инженера
- 16:10Назначен исполнитель
Бригада №3, выезд утром
- 09:30Создана заявка
- 19:42
12 марта
- 18:00Звонок клиенту
- 10:15Первичный осмотр
- 18:00
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 "timeline-008" (Day Groups) 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/timeline-008.json
Registry item: https://vibeui.ru/r/timeline-008.json
Installs to: components/vibeui/timeline-008.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 feed cut into days: the day header sticks to the top of its own group, so it is always clear which day you are reading.
An event feed grouped by day with sticky date headers inside a scrollable area. Zero dependencies, one file, no client JS.
## 3. How to use it
import { Timeline008 } from "@/components/vibeui/timeline-008"
<Timeline008
title="Request feed"
days={[
{ date: "Today", entries: [{ time: "14:20", title: "Invoice paid", text: "Receipt sent by e-mail" }] },
{ date: "Yesterday", entries: [{ time: "09:30", title: "Request created" }] },
]}
/>
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-timeline-008-* palette — do not swap it for your theme tokens
- the sticky header inside its group rather than above the whole feed: otherwise the label lies about the day below it
- the opaque background on the sticky date — rows show through a transparent one
- the tabIndex and aria-label on the scroll area: without them the feed cannot be scrolled by keyboard
- the height cap on the area: without it there is nothing for sticky to stick to
- the block's own light surface: dark text disappears on a dark page
## 6. You may change
- the heading through title
- the days and entries through days: date, time, title and note
- the accent colour through accent
- the height of the scroll area in the max-height rule
## 7. Rules
- Grouping entries by day is the application's job: the component draws what it receives.
- Remove the height cap and the sticky dates stop working — there is nothing to stick to.
- Dates are strings: "Today" and "Yesterday" are substituted by the application.
- 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/timeline-008.jsonhttps://vibeui.ru/r/timeline-008.jsonКомпонент самодостаточен: один файл, без зависимостей, палитра в локальных переменных --vibeui-timeline-008-*. Серверный: хуков нет. Дата — position:sticky внутри своей группы, а не внутри всей ленты: следующая дата выталкивает предыдущую, поэтому подпись всегда относится к тому, что под ней. Липкая дата несёт непрозрачный фон — иначе строки ленты просвечивают сквозь неё. Область прокрутки ограничена max-height, получает tabIndex и aria-label, чтобы прокручиваться с клавиатуры. Точка каждой записи позиционирована абсолютно и выпадает из grid-потока строки.
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Timeline008Entry = {
time: string
title: string
text?: string
}
export type Timeline008Day = {
date: string
entries: Timeline008Entry[]
}
export type Timeline008Props = Omit<
ComponentPropsWithoutRef<"section">,
"children"
> & {
days?: Timeline008Day[]
title?: string
accent?: string
}
// Идея компонента: длинная лента, разрезанная по дням, где дата не уезжает
// вместе с прокруткой. Заголовок дня липкий (position:sticky в своей группе),
// поэтому в любой момент видно, какой день читаешь. Липкая дата обязана быть
// непрозрачной: без собственного фона строки ленты просвечивают сквозь неё.
const STYLES = `
:where([data-vibeui-block="timeline-008"]){
--vibeui-timeline-008-bg:oklch(1 0 0);
--vibeui-timeline-008-fg:oklch(0.22 0.014 265);
--vibeui-timeline-008-muted:oklch(0.57 0.014 265);
--vibeui-timeline-008-border:oklch(0.91 0.006 265);
--vibeui-timeline-008-accent:oklch(0.55 0.18 262);
--vibeui-timeline-008-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="timeline-008"]{
display:flex;flex-direction:column;gap:0.5rem;
width:100%;max-width:26rem;box-sizing:border-box;padding:0.9375rem;
background:var(--vibeui-timeline-008-bg);
border:1px solid var(--vibeui-timeline-008-border);border-radius:0.875rem;
font-family:var(--vibeui-timeline-008-font);color:var(--vibeui-timeline-008-fg);
}
[data-vibeui-block="timeline-008"] [data-part="title"]{margin:0;font-size:0.9375rem;font-weight:650}
[data-vibeui-block="timeline-008"] [data-part="scroll"]{
max-height:15rem;overflow-y:auto;overscroll-behavior:contain;
margin:0;padding:0;list-style:none;
}
[data-vibeui-block="timeline-008"] [data-part="scroll"]:focus-visible{
outline:2px solid var(--vibeui-timeline-008-accent);outline-offset:2px;border-radius:0.5rem;
}
/* Дата липнет к верху своей группы, а не всей ленты: следующий день выталкивает
предыдущий, и подпись всегда относится к тому, что под ней. */
[data-vibeui-block="timeline-008"] [data-part="date"]{
position:sticky;top:0;z-index:1;
display:flex;align-items:center;gap:0.5rem;
margin:0;padding:0.3125rem 0;
background:var(--vibeui-timeline-008-bg);
font-size:0.6875rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;
color:var(--vibeui-timeline-008-muted);
}
[data-vibeui-block="timeline-008"] [data-part="date"]::after{
content:"";flex:1;height:1px;background:var(--vibeui-timeline-008-border);
}
[data-vibeui-block="timeline-008"] [data-part="day"] ul{margin:0 0 0.25rem;padding:0;list-style:none}
[data-vibeui-block="timeline-008"] [data-part="row"]{
position:relative;display:grid;grid-template-columns:2.75rem 1fr;
gap:0.5rem;padding:0.375rem 0 0.375rem 0;
}
[data-vibeui-block="timeline-008"] [data-part="row"]::before{
content:"";position:absolute;left:3.0625rem;top:0;bottom:0;
width:1px;background:var(--vibeui-timeline-008-border);
}
[data-vibeui-block="timeline-008"] [data-part="row"] [data-part="body"]{padding-left:0.75rem;min-width:0}
[data-vibeui-block="timeline-008"] [data-part="dot"]{
position:absolute;left:2.875rem;top:0.6875rem;
width:0.4375rem;height:0.4375rem;border-radius:9999px;
background:var(--vibeui-timeline-008-accent);
}
[data-vibeui-block="timeline-008"] [data-part="time"]{
font-size:0.6875rem;color:var(--vibeui-timeline-008-muted);
font-variant-numeric:tabular-nums;padding-top:0.125rem;
}
[data-vibeui-block="timeline-008"] [data-part="name"]{display:block;font-size:0.8125rem;font-weight:600;line-height:1.35}
[data-vibeui-block="timeline-008"] [data-part="text"]{margin:0.0625rem 0 0;font-size:0.75rem;line-height:1.4;color:var(--vibeui-timeline-008-muted)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="timeline-008"] *{animation:none!important;transition:none!important}}
`
const DEFAULT_DAYS: Timeline008Day[] = [
{
date: "Сегодня",
entries: [
{
time: "14:20",
title: "Счёт оплачен",
text: "Платёж прошёл, чек отправлен на почту",
},
{ time: "11:05", title: "Заявка принята в работу" },
],
},
{
date: "Вчера",
entries: [
{ time: "19:42", title: "Добавлен комментарий инженера" },
{
time: "16:10",
title: "Назначен исполнитель",
text: "Бригада №3, выезд утром",
},
{ time: "09:30", title: "Создана заявка" },
],
},
{
date: "12 марта",
entries: [
{ time: "18:00", title: "Звонок клиенту" },
{ time: "10:15", title: "Первичный осмотр" },
],
},
]
/**
* Лента, разрезанная по дням: заголовок дня липнет к верху своей группы.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Timeline008({
days = DEFAULT_DAYS,
title = "Лента заявки",
accent,
className,
style,
...props
}: Timeline008Props) {
const palette = {
...(accent ? { "--vibeui-timeline-008-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-timeline-008" precedence="medium">
{STYLES}
</style>
<section
{...props}
data-vibeui-block="timeline-008"
className={className}
style={palette}
>
<h3 data-part="title">{title}</h3>
<ol
data-part="scroll"
tabIndex={0}
role="group"
aria-label={`${title}: события по дням`}
>
{days.map((day) => (
<li data-part="day" key={day.date}>
<h4 data-part="date">{day.date}</h4>
<ul>
{day.entries.map((entry) => (
<li
data-part="row"
key={`${day.date}-${entry.time}-${entry.title}`}
>
<span data-part="time">{entry.time}</span>
<span data-part="dot" aria-hidden="true" />
<div data-part="body">
<span data-part="name">{entry.title}</span>
{entry.text ? <p data-part="text">{entry.text}</p> : null}
</div>
</li>
))}
</ul>
</li>
))}
</ol>
</section>
</>
)
}