Layout/EmptyState

EmptyState

Animated placeholder shown when a list, table, or feed has no content. Includes icon, title, description, and optional action buttons.

import { EmptyState } from "@animui/ui"

Basic

No messages yet

When someone sends you a message, it will appear here.

Compact (for tables)

NameStatusDate

No results found

No records match your search. Try a different term.

With secondary action

No projects yet

Start building something. Create your first project.

Props

PropTypeDefaultDescription
iconReactNodeIcon displayed above the title.
titlestringMain heading text.
descriptionstringSupporting description below the title.
action{ label: string; onClick: () => void }Primary action button.
secondaryAction{ label: string; onClick: () => void }Secondary (outline) action button.
compactbooleanfalseReduced padding — for use inside tables or panels.
classNamestringAdditional classes.
© 2026 Steal Shadow. MIT License.Report an issue