Empty State

No-data screen. Free, MIT · Data and metrics › Cards

Installation

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.