Empty State

Explains why a region has nothing to show, and offers the way out.

No activity

Events from the last 30 days will appear here.

Variants

Supported configurations for this component.

With actionsMessage onlyOutlineAvatar

Variants

4 examples
With actions
No activity

Events from the last 30 days will appear here.

Message only
No activity

Nothing has happened in the last 30 days.

Outline
No files yet

Drop a file here to get started.

Avatar
No tasks assigned

Reza Quinn has nothing scheduled this week.

Add to your project

One command adds this component to your project.

1

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PropTypeDefaultDescription
variant'default'|'outline''default'One of: default, outline.
childrenReact.ReactNode-Content rendered inside the component.
classNamestring-Additional CSS classes applied to the root element.
styleReact.CSSProperties-Inline styles applied to the root element.

More Andromeda Pro components

Alert

Displays a status message in the flow of the page, at a severity from note to fault.

4 variants

Avatar

Represents a person as a square image tile that falls back to their initials.

6 variants1 states

Badge

Displays the state a row or cell reports, such as online, queued, or fault.

8 variants