Clinia UI

Empty

The state a list, table or page shows when there is nothing in it yet, with the next action.

shadcn docs →

When to use

  • A list, table or page has nothing in it yet, and there is a next step.
  • A search or a filter returned no results.

When not to use

  • Content is still loading: use Skeleton.
  • Something failed: use Alert, and say what to fix.

Install

npx shadcn@latest add @clinia/empty
No sources yet

Connect a source to start indexing records into this workspace.

No sources match “lab”

Try another search term, or clear the filters to see every source.

Anatomy

No sources yet

Connect a source to start indexing records.

  1. 1Containerdata-slot="empty"p-12 · border-dashed
  2. 2Mediadata-slot="empty-icon"variant=icon · bg-muted
  3. 3Title, what's missingdata-slot="empty-title"text-lg · font-medium
  4. 4Description, what to dodata-slot="empty-description"text-sm · text-muted-foreground
  5. 5Actiondata-slot="empty-content"one main Button

Clinia rules

  • The title says what's missing: No sources yet. The description says what to do about it.
  • Give one main action, the one that fills the state: Connect a source.
  • Empty sets border-dashed but no border width. Add border border-border when the state needs an outline.
  • EmptyMedia variant="icon" puts the icon on a bg-muted tile.

Do and don't

No sources yet

Connect a source to index records.

Do say what's missing and give the next action.
No data
Don't leave users at a dead end.

States

title · heading

No sources yet

Connect a source to start indexing records into this workspace.

Toggle the site theme to review both themes.

Accessibility

Your responsibility

  • EmptyTitle renders a div. When the empty state stands in for a page section, make it a heading at the right level: render={<h2 />}.
  • Make the action a real Button or link, so it's reachable with Tab.

How to test

  1. Press Tab: focus reaches the action.
  2. With a screen reader, the title and the description are read in order, then the action.

API

EmptyTitle

PropValuesDefaultDescription
render
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
–

The element to render, such as <h2 /> when the title heads a section of the page. Defaults to a div.

EmptyMedia

PropValuesDefaultDescription
variant
defaulticon
default

icon puts the icon on a tile.

All other props come from the native div element.

Related