# Empty State
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/empty-state
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(feedback)/empty-state.mdx
> A placeholder for empty views with icon, title, description, and call-to-action to guide users.
***
## Import
```tsx
import { EmptyState } from '@darkcode-ui/react';
```
### Usage
```tsx
import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";
export function Default() {
return (
No results found
We couldn't find anything matching your search. Try adjusting your filters or create
a new item to get started.
);
}
```
### Anatomy
Import the EmptyState component and access all parts using dot notation.
```tsx
import { EmptyState } from '@darkcode-ui/react';
export default () => (
)
```
### Minimal
```tsx
import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";
export function Minimal() {
return (
Your inbox is emptyNew messages will appear here.
);
}
```
### Outline
```tsx
import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";
export function Outline() {
return (
No files uploaded
Drag and drop files here, or click the button below to upload your first file.
);
}
```
### Sizes
The `size` prop controls padding and spacing. Available sizes are `sm`, `md` (default), and `lg`.
### Full Height
```tsx
import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";
export function FullHeight() {
return (
Nothing here yet
This space fills the full height of its container. Start by creating your first project.
);
}
```
### With Avatar
```tsx
import {Avatar, Button, EmptyState} from "@darkcode-ui/react";
import React from "react";
export function WithAvatar() {
return (
JDNo assigned tasks
Jane doesn't have any tasks assigned yet. Assign a task to get started.
);
}
```
### With Avatar Group
```tsx
import {Avatar, Button, EmptyState} from "@darkcode-ui/react";
import React from "react";
const users = [
{
id: 1,
image_url: "https://darkcode-ui-assets.darkcode.dev/avatars/placeholder-3.jpg",
name: "John",
},
{
id: 2,
image_url: "https://darkcode-ui-assets.darkcode.dev/avatars/placeholder-5.jpg",
name: "Kate",
},
{
id: 3,
image_url: "https://darkcode-ui-assets.darkcode.dev/avatars/placeholder-20.jpg",
name: "Emily",
},
{
id: 4,
image_url: "https://darkcode-ui-assets.darkcode.dev/avatars/placeholder-23.jpg",
name: "Michael",
},
];
export function WithAvatarGroup() {
return (
{users.map((user) => (
{user.name.charAt(0)}
))}
Invite your team
You haven't added any collaborators yet. Invite teammates to start working together.
);
}
```
### With Background
```tsx
import {Button, EmptyState} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";
import React from "react";
export function WithBackground() {
return (
Ready for launch
Your workspace is set up. Create your first project to get things moving.
);
}
```
## Styling
### Passing Tailwind CSS classes
```tsx
import { EmptyState, Button } from "@darkcode-ui/react";
function CustomEmptyState() {
return (
No data yetGet started by creating your first record.
);
}
```
### Customizing the component classes
To customize the EmptyState component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).
```css
@layer components {
.empty-state {
@apply gap-8;
}
.empty-state__title {
@apply text-lg;
}
.empty-state__media[data-variant="icon"] {
@apply bg-accent-soft text-accent-soft-foreground;
}
}
```
DarkCode UI follows the [BEM](https://getbem.com/) methodology to ensure component variants and states are reusable and easy to customize.
### CSS Classes
The EmptyState component uses these CSS classes ([View source styles](https://github.com/DarkCode-Developers/darkcode-ui/blob/main/packages/styles/components/empty-state.css)):
#### Base & Size Classes
- `.empty-state` - Base centered column layout
- `.empty-state--sm` - Small size (less padding and gap)
- `.empty-state--md` - Medium size (default)
- `.empty-state--lg` - Large size (more padding and gap)
#### Element Classes
- `.empty-state__header` - Groups media, title, and description
- `.empty-state__media` - Icon or avatar container
- `.empty-state__title` - Primary heading text
- `.empty-state__description` - Secondary descriptive text
- `.empty-state__content` - Action area for buttons, inputs, or links
#### Data Attributes
- `[data-variant="icon"]` on `.empty-state__media` - Adds circular muted background for icon display
- `[data-variant="default"]` on `.empty-state__media` - Default media styling (no background)
## API Reference
### EmptyState
The root component. Renders a centered container for empty state content.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size variant controlling padding and spacing |
| `className` | `string` | - | Additional CSS class |
| `children` | `ReactNode` | - | Empty state content |
Also supports all native `div` HTML attributes.
### EmptyState.Header
Groups the media, title, and description elements.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS class |
| `children` | `ReactNode` | - | Header content |
Also supports all native `div` HTML attributes.
### EmptyState.Media
Container for icons, avatars, or images.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `"default" \| "icon"` | `"default"` | `"icon"` adds a circular muted background |
| `className` | `string` | - | Additional CSS class |
| `children` | `ReactNode` | - | Media content |
Also supports all native `div` HTML attributes.
### EmptyState.Title
Primary heading rendered as an `h3`.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS class |
| `children` | `ReactNode` | - | Title text |
Also supports all native `h3` HTML attributes.
### EmptyState.Description
Secondary descriptive text rendered as a `p`.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS class |
| `children` | `ReactNode` | - | Description text |
Also supports all native `p` HTML attributes.
### EmptyState.Content
Action area for buttons, links, or other interactive elements.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | - | Additional CSS class |
| `children` | `ReactNode` | - | Action content |
Also supports all native `div` HTML attributes.