VibeUI

Feedback

Empty State

An empty state that explains the next step instead of reporting missing data. The illustration is CSS and hints at the list to come.

  • empty state
  • onboarding
  • placeholder
  • cta

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/empty-001?lang=en

Nothing here yet

Create your first project — it will appear in this list with its address and publish history.

Or drop a folder with an existing site here
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 "empty-001" (Empty State) 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/empty-001.json

Registry item: https://vibeui.ru/r/empty-001.json
Installs to: components/vibeui/empty-001.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
An empty state that explains the next step instead of reporting missing data. The illustration is CSS and hints at the list to come.

An empty state with a three-tile illustration, a heading, an explanation, a primary action and a hint beneath it. The action is the point: the screen says what to do rather than noting that nothing is there. Zero dependencies, one file, its own palette.

## 3. How to use it
import { Empty001 } from "@/components/vibeui/empty-001"

<Empty001
  title="Nothing here yet"
  description="Create your first project and it shows up in this list."
  actionLabel="Create project"
  onAction={createProject}
/>

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-empty-001-* palette — do not swap it for your theme tokens (bg-muted, text-muted-foreground and the like)
- the order: heading, explanation, action — the action has to come last and read strongest
- the CSS illustration with aria-hidden: it is decorative and must not be announced
- the dashed border: it is what separates an empty state from an ordinary card
- the ch-based width limit on the description: a long centred line reads poorly
- the @container query instead of a media query: an empty state lives both in a narrow panel and full page
- the <style> block inside the component — it holds the palette, the illustration and the layout

## 6. You may change
- the title, description and actionLabel copy
- hint — the secondary line under the button: a shortcut, an import link; it is a ReactNode
- onAction — the primary action handler
- the accent through the accent prop — it colours the button and the bottom tile
- width and outer spacing through className

## 7. Rules
- Do not write "No data" as the heading: that is a statement, not help. The heading should lead to the action.
- Do not show an empty state in place of a load error: people conclude there is nothing there and leave.
- Do not offer more than one primary action: the second one creates a decision instead of helping.
- 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/empty-001.json
https://vibeui.ru/r/empty-001.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-empty-001-*. Рисунок — три плитки на CSS с поворотом и разной прозрачностью: он намекает на список, который здесь появится, и не требует иллюстрации из библиотеки. Пунктирная рамка отделяет пустое состояние от заполненного экрана. Отступы и кегль заголовка считаются от собственной ширины через @container.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from "react"

export type Empty001Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "title" | "children"
> & {
  title?: string
  description?: string
  /** Подпись главного действия. Пустая строка убирает кнопку. */
  actionLabel?: string
  /** Второстепенная подсказка под кнопкой: горячая клавиша, ссылка на импорт. */
  hint?: ReactNode
  onAction?: () => void
  accent?: string
}

// Идея компонента: пустой экран объясняет, что делать, а не сообщает об
// отсутствии данных. Поэтому главное здесь — действие, а рисунок собран из
// трёх плиток на CSS: он намекает на будущий список, но не отвлекает.
const STYLES = `
:where([data-vibeui-block="empty-001"]){
--vibeui-empty-001-fg:oklch(0.24 0.016 265);
--vibeui-empty-001-muted:oklch(0.52 0.014 265);
--vibeui-empty-001-bg:oklch(0.985 0.002 265);
--vibeui-empty-001-border:oklch(0.9 0.006 265);
--vibeui-empty-001-accent:oklch(0.55 0.2 262);
--vibeui-empty-001-accent-fg:oklch(1 0 0);
--vibeui-empty-001-radius:1rem;
--vibeui-empty-001-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
container-type:inline-size;
}
[data-vibeui-block="empty-001"]{
display:flex;flex-direction:column;align-items:center;text-align:center;
gap:0.5rem;width:100%;box-sizing:border-box;
padding:2.5rem 1.5rem;
border:1px dashed var(--vibeui-empty-001-border);
border-radius:var(--vibeui-empty-001-radius);
background:var(--vibeui-empty-001-bg);color:var(--vibeui-empty-001-fg);
font-family:var(--vibeui-empty-001-font);
}
/* Рисунок: три плитки будущего списка, задняя приподнята и повёрнута. */
[data-vibeui-block="empty-001"] [data-part="art"]{
position:relative;width:4.5rem;height:3rem;margin-bottom:0.75rem;
}
[data-vibeui-block="empty-001"] [data-part="art"] span{
position:absolute;left:0;right:0;height:0.875rem;border-radius:0.3125rem;
border:1px solid var(--vibeui-empty-001-border);
background:oklch(1 0 0);
}
[data-vibeui-block="empty-001"] [data-part="art"] span:nth-child(1){top:0;transform:rotate(-4deg) scale(0.9);opacity:.65}
[data-vibeui-block="empty-001"] [data-part="art"] span:nth-child(2){top:1rem;transform:rotate(2deg) scale(0.96);opacity:.85}
[data-vibeui-block="empty-001"] [data-part="art"] span:nth-child(3){
top:2rem;border-color:color-mix(in oklab,var(--vibeui-empty-001-accent) 45%,var(--vibeui-empty-001-border));
}
[data-vibeui-block="empty-001"] [data-part="title"]{margin:0;font-size:1rem;font-weight:600;line-height:1.35}
[data-vibeui-block="empty-001"] [data-part="description"]{
margin:0;max-width:32ch;font-size:0.875rem;line-height:1.55;color:var(--vibeui-empty-001-muted);
}
[data-vibeui-block="empty-001"] [data-part="action"]{
appearance:none;border:0;cursor:pointer;margin-top:0.75rem;
display:inline-flex;align-items:center;height:2.25rem;padding:0 1rem;
border-radius:0.5rem;font:inherit;font-size:0.875rem;font-weight:500;
background:var(--vibeui-empty-001-accent);color:var(--vibeui-empty-001-accent-fg);
transition:background-color .16s ease;
}
[data-vibeui-block="empty-001"] [data-part="action"]:hover{background:color-mix(in oklab,var(--vibeui-empty-001-accent) 88%,black)}
[data-vibeui-block="empty-001"] [data-part="action"]:focus-visible{outline:2px solid var(--vibeui-empty-001-accent);outline-offset:2px}
[data-vibeui-block="empty-001"] [data-part="hint"]{margin-top:0.5rem;font-size:0.75rem;color:var(--vibeui-empty-001-muted)}
/* Отступы корня заданы один раз: контейнерный запрос применяется к потомкам
   контейнера, но не к нему самому, поэтому здесь адаптируется типографика. */
@container (min-width: 30rem){
[data-vibeui-block="empty-001"] [data-part="title"]{font-size:1.125rem}
[data-vibeui-block="empty-001"] [data-part="description"]{font-size:0.9375rem}
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="empty-001"] *{animation:none!important;transition:none!important}}
`

/**
 * Пустое состояние, объясняющее следующий шаг.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Empty001({
  title = "Здесь пока пусто",
  description = "Создайте первый проект — он появится в этом списке вместе с адресом и историей публикаций.",
  actionLabel = "Создать проект",
  hint = "Или перетащите сюда папку с готовым сайтом",
  onAction,
  accent,
  className,
  style,
  ...props
}: Empty001Props) {
  const palette = {
    ...(accent ? { "--vibeui-empty-001-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-empty-001" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="empty-001"
        className={className}
        style={palette}
      >
        <span data-part="art" aria-hidden="true">
          <span />
          <span />
          <span />
        </span>
        <p data-part="title">{title}</p>
        {description ? <p data-part="description">{description}</p> : null}
        {actionLabel ? (
          <button data-part="action" type="button" onClick={onAction}>
            {actionLabel}
          </button>
        ) : null}
        {hint ? <span data-part="hint">{hint}</span> : null}
      </div>
    </>
  )
}