Empty State

The surface for a list with nothing in it. It names what is missing, says why, and offers the one action that fills it.

import from ~/components/ui/empty-state

No endeavors yet

Start an endeavor and it will show up here with its brief, its status and its notes.

first run

Names what is missing, says why it is empty, and offers the one action that fills it.

No endeavors match “ceramics”

Nothing in this workspace matches the current search and filters.

filtered to nothing

A different cause needs different copy. The way out is undoing the filter, not creating a record.

No notes on this endeavor

Notes added by anyone on the project appear here.

no icon, no action

Every slot except the title is optional. Drop the action only for a nested region whose action already lives on the surrounding panel.

Use for first run, an empty list, a cleared filter or zero search results.

Give the user a way out. The action turns a dead end into a starting point.

Say why it is empty. "No results for that search" beats a bare "No data".

Match the action to the cause: create a record when there is none, clear filters when the search is too narrow.

Layout classes at the call site are fine: w-full, max-w-md, my-8.

Don't

Do not use it to report an error. An empty state is calm; a failure belongs in an Alert.

Do not pass color, border or rounded classes. The dashed border is what marks the surface as provisional.

Do not show one while data is still loading. That is what Skeleton is for.