Empty State

Экран отсутствия данных. Бесплатно, MIT · Данные и показатели › Карточки

Установка

npx valyro-cli@latest add empty-state

npx shadcn@latest add https://valyro.xyz/r/empty-state.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { EmptyState } from 'valyro-ui';

Prop	Type	Default
`icon`	`ReactNode`	`<InboxIcon />`	Shown in a tile above the title. Defaults to an inbox icon; pass `null` to hide.
`title` *	`ReactNode`		Heading (an `<h3>`), e.g. "No projects yet".
`description`	`ReactNode`		Muted text under the title explaining the state or the next step.
`primaryAction`	`ReactNode`		Main call to action, e.g. a `<Button>`. Placed after the secondary one; stacks on top when the row wraps.
`secondaryAction`	`ReactNode`		Less prominent action shown before the primary one, e.g. "Learn more".
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Icon tile, title size and padding; `sm` fits inside tables and panels, `lg` fills a page.
`bordered`	`boolean`	`false`	Dashed outline around the whole state, e.g. as a drop-zone-like placeholder.

Card — Универсальные карточки
Item Card — Карточка-строка: иконка, заголовок, описание и элемент управления справа
Record Card — Карточка записи: статус, контекст, ключевые поля и действия
Carousel — Карусель: scroll-snap, свайп, автопрокрутка, миниатюры
Data Table — Таблицы с поиском и сортировкой
Data Grid — Таблица на 100 000 строк: группировка, фильтры, редактирование
Virtual List — Виртуальный список на 100 000 строк
Bulk Action Bar — Панель действий над выбранными строками с горячими клавишами
List Block — Блок списка с картинками или иконками, описанием и значением
Description List — Список «ключ — значение»: столбиком, строками или сеткой с иконками
Tree View — Древовидные структуры
Accordion — Раскрывающиеся секции