Empty
Empty-state layout with media, title, description, and action slots.
Install
Import path
Examples
Avatar
Use the EmptyMedia component to display an avatar in the empty state.
This user is currently offline. You can leave a message to notify them or try again later.
Avatar Group
Use the EmptyMedia component to display an avatar group in the empty state.
Invite your team to collaborate on this project.
Background
Use the bg-* and bg-gradient-* utilities to add a background to the empty state.
You're all caught up. New notifications will appear here.
Card
Wrap the Empty component in a Card to create an empty-state card.
You haven't created any projects yet. Get started by creating your first project.
InputGroup
You can add an InputGroup component to the EmptyContent component.
The page you're looking for doesn't exist. Try searching for what you need below.
Need help? Contact support
Outline
Use the border utility class to create an outline empty state.
Upload files to your cloud storage to access them anywhere.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import {
Empty, EmptyHeader, EmptyMedia,
EmptyTitle, EmptyDescription, EmptyContent,
} from "@codefast/ui/empty";
<Empty>
<EmptyHeader>
<EmptyMedia>…</EmptyMedia>
<EmptyTitle>…</EmptyTitle>
<EmptyDescription>…</EmptyDescription>
</EmptyHeader>
<EmptyContent>…</EmptyContent>
</Empty>
API reference
Props for each part of the component. All native element props are also forwarded.
Empty
Layout wrapper for an empty/zero state.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Compose EmptyHeader (media, title, description) and EmptyContent (action). |
EmptyMedia / EmptyTitle / EmptyDescription / EmptyContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The icon/illustration, headline, supporting text, and action slot. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Use a real heading for EmptyTitle so it fits the document outline.
- Always give users a next step — a button or link out of the empty state.
- Keep the icon decorative; the meaning lives in the title and description.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Explain why it’s empty and what to do next.
- Offer a single, primary action.
Don’t
- Don’t leave a blank area with no guidance.
- Don’t pile on multiple competing actions.