Docs/Empty

Empty

Empty state component for displaying when no data is available.

Usage

tsx

1import { Empty } from '@storm-ds/ui'
2import { SearchIcon } from '@storm-ds/icons'
3
4<Empty
5  icon={<SearchIcon className="w-12 h-12" />}
6  title="No results"
7  description="Try adjusting your search"
8/>

Basic

No results

Try adjusting your search.

tsx

1<Empty title="No items" description="Create your first item to get started" />

With Icon

No results found

We couldn't find anything matching your search.

tsx

1<Empty
2  icon={<InboxIcon className="w-12 h-12" />}
3  title="Inbox empty"
4  description="All caught up!"
5/>

With Action

No projects

Get started by creating a new project.

tsx

1<Empty
2  title="No results"
3  description="Try a different search"
4  action={<Button variant="outline">Clear filters</Button>}
5/>

Full Example

No files

Upload your first file to get started.

Props

Prop	Type	Default	Description
icon	React.ReactNode	-	Icon element (e.g., SearchIcon, InboxIcon)
title	string	-	Empty state title
description	string	-	Empty state description text
action	React.ReactNode	-	Optional action button or element
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Empty for empty states. Import: `import { Empty } from '@storm-ds/ui'`. Props: icon (React component), title (string), description (string), action (optional button/element), className. Display when no data, search results, or items exist. Include an icon from @storm-ds/icons for visual clarity. Title should be concise. Description explains why empty. Action provides next step (search again, create item, etc.). Server component compatible. Example: `<Empty title="No results" description="Try adjusting search" />`, `<Empty icon={<SearchIcon />} title="Not found" description="No matches" action={<Button>Clear</Button>} />`

MetricCard

Kbd