Core ElementsFree

Empty State

Placeholder shown when a list or search has no results.

Usage

No results

Try adjusting your filters.

bash

npm install @wunderui/react

Then import what you need:

tsx

import { EmptyState } from "@wunderui/react"

Plain, outlined, dashed and on a tinted background.

No messages

variant="default"

No messages

variant="outline"

No messages

variant="dashed"

No messages

variant="background"

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

A dashed empty state in a card with one clear next step.

Inbox zero

No open conversations. Nice work.