Application
Empty State
A clear zero-data state with an optional action.
No projects yet
Create a project to start building. Every project gets its own components, tokens, and registry output.
Installation
Copy the source with the CLI to own and edit it, or import it from the npm package.
npx aback-ui@latest add empty-stateWrites components/ui/empty-state.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.
Usage
Import the parts you need from the installed file. The Code tab above has a complete, working example.
import { EmptyState } from "@/components/ui/empty-state";API reference
Props and composition points for Empty State. Native element props pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | None | Short statement of the empty condition. |
description | ReactNode | None | What will appear and the first step to create it. |
icon | ReactNode | None | Optional decorative icon. Defaults to an inbox. |
action | ReactNode | None | The primary next step, usually a Button or link. |
Dependencies: @tabler/icons-react, plus the shared @/lib/utils helper.
Accessibility
Semantics, keyboard behavior, and the decisions that keep the component operable.
- The title is a paragraph so it cannot break the page heading order. The surrounding section owns the heading.
- The icon is decorative. Do not put meaning in it only.
- The action should be the same action named in the description.
- Announce a newly emptied list with a status message in addition to rendering the empty state.
Used in production
The Aback products whose interfaces shaped this component.