Feedback

Empty state

A zero-data placeholder with an icon, title, description and call to action. Full size for pages, compact for inside tables and panels.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { EmptyState } from "@/components/ui/empty-state";

First run, before someone has created anything: explain what goes here and offer the first action.
Search or filters that return nothing: say so and offer a way to clear them.
Use compact inside a table body, card or side panel.

While data is still loading; show a Spinner or skeleton until you know it is empty.
For errors, use Alert so the problem is not mistaken for missing data.

A smaller, bordered version for panels and cards.

Place the compact version in a full-width cell when a search returns nothing.

Icon and action are optional.

Accepts only the props below (no native attribute spread).

Prop	Type	Default	Description
title	string	-	Required. Short statement of what is empty.
description	string	-	One or two sentences on why, or what to do next.
icon	React.ReactNode	-	Shown in a muted circle: 56px, or 40px when compact.
action	React.ReactNode	-	Call to action, usually a Button.
compact	boolean	false	Smaller, bordered card version for tables and panels (TableEmptyState in Figma).
className	string	-	Merged onto the wrapper.

The title renders as a <p>, not a heading. If the empty state is the main content of a page, keep a real heading elsewhere on the page.
Pass decorative icons as-is; lucide icons render aria-hidden by default.
Make the action label specific ("New project", "Clear filters") rather than "Click here".