EmptyState
Clean placeholder layout for tables, lists, charts, and empty dashboard widgets.
EmptyState
The EmptyState component removes boilerplate when presenting zero-data states, missing search results, unconfigured integrations, or empty lists. It supports both convenient direct props and composable subcomponents.
Preview
No repositories found
You haven't created any repositories yet. Get started by creating your first project.
Properties
import { EmptyState, Button } from '@moul-dev/ui';
export default function Example() {
return (
<EmptyState variant="card" title="No repositories found" description="You haven't created any repositories yet. Get started by creating your first project."
action={<Button size="sm">Create New</Button>}
secondaryAction={<Button size="sm" variant="ghost">Learn More</Button>}
/>
);
}Import
import {
EmptyState,
EmptyStateIcon,
EmptyStateTitle,
EmptyStateDescription,
EmptyStateActions,
} from '@moul-dev/ui';Interactive Demo
No repositories found
You haven't created any repositories yet. Get started by creating your first project repository.
Variants
EmptyState includes three standard layout styles:
default: Transparent background and minimal padding, ideal for inline embedding within existing cards or table containers.card: Elevated background with clean border and subtle drop shadow.dashed: Dashed border with subtle neutral surface, commonly used for empty dropzones or unassigned items.
No results found
We couldn't find anything matching your query.
Drop files here to upload
Support for PNG, JPG, or PDF files up to 25 MB.
// Default inline empty state
<EmptyState
variant="default"
title="No results found"
description="We couldn't find anything matching your query."
/>
// Dashed dropzone / empty section
<EmptyState
variant="dashed"
title="Drop files here to upload"
description="Support for PNG, JPG, or PDF files up to 25 MB."
action={<Button size="sm" variant="outline">Browse Files</Button>}
/>Compound Composition
For maximum flexibility or custom slot layouts, compose using the subcomponents:
No favorites saved
Bookmark repositories and dashboards to access them quickly here.
import {
EmptyState,
EmptyStateIcon,
EmptyStateTitle,
EmptyStateDescription,
EmptyStateActions,
Button,
} from '@moul-dev/ui';
export default function Example() {
return (
<EmptyState variant="card" size="md">
<EmptyStateIcon variant="primary">
<StarIcon />
</EmptyStateIcon>
<EmptyStateTitle as="h3">No favorites saved</EmptyStateTitle>
<EmptyStateDescription>
Bookmark repositories and dashboards to access them quickly here.
</EmptyStateDescription>
<EmptyStateActions>
<Button size="sm" variant="primary">Explore Projects</Button>
<Button size="sm" variant="outline">Learn More</Button>
</EmptyStateActions>
</EmptyState>
);
}API Reference
<EmptyState>
Prop
Type