Empty
Empty shows a blank state when there's no data yet, with an explanation and a next step.
Compose it from EmptyHeader, EmptyMedia (an icon in a 48px tile, or an Avatar), EmptyTitle, EmptyDescription and EmptyContent for the actions. The outline variant has a dashed border, which suits empty content areas in a page or a file drop zone.
No projects yet
You haven't created any projects. Start your first one or import one from a file.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,} from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
No results found
Try a different keyword or remove some filters.
No results
The default variant (no border) on a search page.
Alex is offline
Leave a message and they'll see it when they're back.
With Avatar
EmptyMedia variant="default" to hold an Avatar or an illustration.
Usage
Do
- Explain why it's empty and what people should do next.
- Offer at most 1 primary action and 1 secondary action.
- Use an icon that fits the context (folder, search, inbox…).
Don't
- Don't just write “No data” without any guidance.
- Don't use the brand color or a large gradient for the icon tile.
- Don't use Empty for loading errors. Use MessageBar with intent error.
Props
| Prop · Type | Default | Description |
|---|---|---|
| Empty | Default: "default" | outline: dashed stroke-1 border, 12px radius. |
| EmptyMedia | Default: "icon" | icon: 48px tile on background-4; default: rendered as is (Avatar, image). |
| EmptyTitleReactNode | Default: — | Title in subtitle1 semibold. |
| EmptyDescriptionReactNode | Default: — | Description in body1 foreground-3; links inside get the link color automatically. |
| EmptyContentReactNode | Default: — | Action area (Button, Link). |