Empty

Absence of data, context and the next action when there is one.

Create your first project to start collaborating with your team.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add empty

What add empty installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

Create your first project to start collaborating with your team.

Context and a next step for the user.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`Empty` Centered container with a dashed border.	`div`	—
`EmptyMedia` Icon or media for the state.	`div`	—
`EmptyTitle` Short title for the state.	`h3`	—
`EmptyDescription` Explanation and context.	`p`	—
`EmptyActions` Suggested actions.	`div`	—

The states that apply to this component and their visual treatment.

State	Treatment
Zero results	The text clarifies that a search or filter returned no data.
No data yet	The text indicates that no content has been created yet.
With action	EmptyActions offers the next step when there is one.

Distinguish "zero results" from "no data yet"; the text should make it clear.

Offer the next action when there is one; never leave the user at a dead end.