Empty State
A placeholder for empty views with icon, title, description, and call-to-action to guide users.
Usage
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
"use client";
import { EmptyState } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";
Anatomy
Import the EmptyState component and access all parts using dot notation.
import { EmptyState } from "@thenamespace/uikit";
<EmptyState>
<EmptyState.Media />
<EmptyState.Header>
<EmptyState.Title />
<EmptyState.Description />
</EmptyState.Header>
<EmptyState.Content />
</EmptyState>;Minimal
Nothing here yet
Content will appear here once it becomes available.
"use client";
import { EmptyState } from "@thenamespace/uikit";
function MinimalDemo() {Outline
Cloud Storage Empty
Upload files to your cloud storage to access them anywhere.
"use client";
import { EmptyState } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";
Sizes
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
No Projects Yet
You haven't created any projects yet. Get started by creating your first project.
"use client";
import { EmptyState } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";
Full Height
No Results Found
We couldn't find anything matching your search. Try adjusting your filters.
"use client";
import { EmptyState } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";
With Avatar
User Offline
This user is currently offline. You can leave a message to notify them or try again later.
"use client";
import { EmptyState } from "@thenamespace/uikit";
import { Avatar } from "@thenamespace/uikit/avatar";
import { Badge } from "@thenamespace/uikit/badge";With Avatar Group
No Team Members
Invite your team to collaborate on this project.
"use client";
import { EmptyState } from "@thenamespace/uikit";
import { Avatar } from "@thenamespace/uikit/avatar";
import { Button } from "@thenamespace/uikit/button";With Background
No Notifications
You're all caught up. New notifications will appear here.
"use client";
import { EmptyState } from "@thenamespace/uikit";
import { Button } from "@thenamespace/uikit/button";
CSS Classes
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 |
children | ReactNode | - | Empty state content |
className | string | - | Additional CSS class |
render | DOMRenderFunction | - | Custom render function to override the default div element |
Also supports all native div HTML attributes.
EmptyState.Header
Groups the media, title, and description elements.
| Prop | Type | Default | Description |
|---|---|---|---|
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 |
children | ReactNode | - | Media content |
Also supports all native div HTML attributes.
EmptyState.Title
Primary heading rendered as an h3.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Title text |
Also supports all native h3 HTML attributes.
EmptyState.Description
Secondary descriptive text rendered as a p.
| Prop | Type | Default | Description |
|---|---|---|---|
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 |
|---|---|---|---|
children | ReactNode | - | Action content |
Also supports all native div HTML attributes.