Card

Feed Skeleton

A comment feed skeleton: rows with an avatar and two lines of text, a shimmer travelling as a wave, and a flat fill under prefers-reduced-motion.

card
skeleton
loading
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/card-021?lang=en

Loading comments

Rows

Avatar

Caption

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 "card-021" (Feed Skeleton) 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/card-021.json

Registry item: https://vibeui.ru/r/card-021.json
Installs to: components/vibeui/card-021.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 comment feed skeleton: rows with an avatar and two lines of text, a shimmer travelling as a wave, and a flat fill under prefers-reduced-motion.

A feed skeleton: rows with an avatar circle, a short name line and two text lines, with a shimmer moving across them as a wave. Zero dependencies, one file, no client JS.

## 3. How to use it
import { Card021 } from "@/components/vibeui/card-021"

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-card-021-* palette — do not swap it for your theme tokens (bg-muted, animate-pulse and the like)
- the prefers-reduced-motion rule that removes the shimmer entirely: on-screen pulsing is a common cause of discomfort, and slowing it down does not cure that
- role="status" with aria-busy and a label: without them loading simply does not exist for a screen reader
- aria-hidden on the shapes themselves — otherwise a screen reader announces empty rectangles
- the varying line lengths: equal ones read as a table, not as text
- matching the metrics of the real feed row: otherwise the content jumps on arrival

## 6. You may change
- the loading caption through label
- the number of rows through rows — as many as the data you expect
- the avatar circle through avatar
- the accent through the accent prop — the base tone of the shapes

## 7. Rules
- The placeholder count should match the expected rows: six before two reads as a bug.
- rows is clamped between one and six: the shimmer delays are written for exactly six rows.
- If the response takes more than a couple of seconds, a skeleton is not enough: show progress or a reason.
- 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/card-021.json

https://vibeui.ru/r/card-021.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-card-021-*. Серверный: хуков нет. Блик — один @keyframes, двигающий background-position по градиенту шириной 300 %; задержка задана по nth-child строки, поэтому движение читается волной, а не синхронным миганием. В prefers-reduced-motion анимация снимается целиком, а фигуры заливаются ровным тоном — половинчатое замедление тут не помогает. Корень объявлен role="status" с aria-busy, подпись уходит в визуально скрытый текст, а сами фигуры помечены aria-hidden.

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 Card021Props = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
  /** Что именно грузится. Читается вслух, на экране не показывается. */
  label?: string
  /** Сколько строк ленты изобразить. Столько же, сколько придёт данных. */
  rows?: number
  /** Кружок аватара слева у каждой строки. */
  avatar?: boolean
  accent?: string
}

// Идея компонента: заглушка ленты, а не карточки. Метрики повторяют строку
// комментария: кружок аватара, имя, две строки текста и подпись. Блик —
// один @keyframes с задержкой по строкам, чтобы движение читалось как волна,
// а не как мигание. В prefers-reduced-motion блик снимается насовсем, и
// фигуры остаются ровной заливкой: пульсация — частая причина недомогания.
const STYLES = `
:where([data-vibeui-block="card-021"]){
--vibeui-card-021-bg:oklch(1 0 0);
--vibeui-card-021-border:oklch(0.91 0.006 265);
--vibeui-card-021-bone:oklch(0.93 0.005 265);
--vibeui-card-021-shine:oklch(0.97 0.003 265);
--vibeui-card-021-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="card-021"]{
position:relative;display:flex;flex-direction:column;gap:1rem;
width:100%;max-width:24rem;box-sizing:border-box;padding:1rem;
background:var(--vibeui-card-021-bg);
border:1px solid var(--vibeui-card-021-border);border-radius:0.9375rem;
font-family:var(--vibeui-card-021-font);
}
[data-vibeui-block="card-021"] [data-part="row"]{
display:flex;align-items:flex-start;gap:0.6875rem;
}
[data-vibeui-block="card-021"] [data-part="lines"]{
flex:1;min-width:0;display:flex;flex-direction:column;gap:0.4375rem;
}
[data-vibeui-block="card-021"] [data-part="face"],
[data-vibeui-block="card-021"] [data-part="name"],
[data-vibeui-block="card-021"] [data-part="text"]{
border-radius:0.375rem;
background:linear-gradient(100deg,
var(--vibeui-card-021-bone) 30%,
var(--vibeui-card-021-shine) 48%,
var(--vibeui-card-021-bone) 66%) 0 0 / 300% 100%;
animation:vibeui-card-021-sweep 1.5s linear infinite;
}
[data-vibeui-block="card-021"] [data-part="face"]{
flex:none;width:2.25rem;height:2.25rem;border-radius:9999px;
}
[data-vibeui-block="card-021"] [data-part="name"]{height:0.6875rem;width:42%}
[data-vibeui-block="card-021"] [data-part="text"]{height:0.5625rem;width:100%}
[data-vibeui-block="card-021"] [data-part="text"]:last-child{width:68%}
/* Задержка по строкам: волна вместо синхронного мигания всей ленты.
   Первый ребёнок — подпись для скринридера, поэтому строки начинаются с 2. */
[data-vibeui-block="card-021"] [data-part="row"]:nth-child(3) span{animation-delay:.12s}
[data-vibeui-block="card-021"] [data-part="row"]:nth-child(4) span{animation-delay:.24s}
[data-vibeui-block="card-021"] [data-part="row"]:nth-child(5) span{animation-delay:.36s}
[data-vibeui-block="card-021"] [data-part="row"]:nth-child(6) span{animation-delay:.48s}
[data-vibeui-block="card-021"] [data-part="row"]:nth-child(7) span{animation-delay:.6s}
[data-vibeui-block="card-021"] [data-part="sr"]{
position:absolute;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
@keyframes vibeui-card-021-sweep{from{background-position:100% 0}to{background-position:-100% 0}}
/* Блик снимается целиком, а не замедляется: пульсация на экране — частая
   причина недомогания, и половинчатое движение тут не помогает. */
@media (prefers-reduced-motion:reduce){
[data-vibeui-block="card-021"] *{animation:none!important;transition:none!important}
[data-vibeui-block="card-021"] [data-part="face"],
[data-vibeui-block="card-021"] [data-part="name"],
[data-vibeui-block="card-021"] [data-part="text"]{background:var(--vibeui-card-021-bone)}
}
`

/**
 * Заглушка ленты: строки с аватаром, именем и двумя строками текста.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Card021({
  label = "Загружаются комментарии",
  rows = 3,
  avatar = true,
  accent,
  className,
  style,
  ...props
}: Card021Props) {
  const count = Math.max(1, Math.min(6, Math.round(rows)))

  const palette = {
    ...(accent ? { "--vibeui-card-021-bone": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-card-021" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="card-021"
        role="status"
        aria-busy="true"
        aria-live="polite"
        className={className}
        style={palette}
      >
        <span data-part="sr">{label}</span>
        {Array.from({ length: count }, (_, index) => (
          <div key={index} data-part="row" aria-hidden="true">
            {avatar ? <span data-part="face" /> : null}
            <div data-part="lines">
              <span data-part="name" />
              <span data-part="text" />
              <span data-part="text" />
            </div>
          </div>
        ))}
      </div>
    </>
  )
}