Empty

The state a list is in before it has anything in it. An icon, a reason and a next action are what make the empty case useful rather than merely honest.

src/components/ui/empty.tsx

About

From the component's own source, where it was written.

The state a list is in before it has anything in it.

Worth a component because the empty case is the one most often left as a bare sentence — an icon, a reason and a next action are what make it useful rather than merely honest.

Install

npx astralyx-ui add empty

Usage

import { Empty } from '@/components/ui/empty'

<Empty
  icon={<Folder />}
  title="No projects yet"
  description="Create your first project to get started."
  action={<Button size="sm">New project</Button>}
/>

Composer

Change the props and the source below follows.

No projects yet

Create your first project to get started.

Props

title

description

iconactionbordered

tsx

<Empty
  icon={<Folder />}
  title="No projects yet"
  description="Create your first project to get started."
  action={<Button size="sm">New project</Button>}
/>

Examples

With an action

tsx

<Empty icon={<Folder />} title="No projects yet" action={<Button>New</Button>} />

Search with no results

tsx

<Empty icon={<Search />} title="No matches" description="Try a different term." />

Inside a section

tsx

<EmptyNote icon={<Folder />}>No projects yet.</EmptyNote>
<EmptyNote inset>Nothing was paid out this month.</EmptyNote>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Empty`

The state a list is in before it has anything in it.

Extends ComponentProps<'div'>.

Prop	Type	Default	Description
title	string	—	The three parts of a useful empty state.
icon	ReactNode	—	The three parts of a useful empty state.
description	ReactNode	—	The three parts of a useful empty state.
action	ReactNode	—	The next step — usually the button that creates the missing thing.
bordered	boolean	true	Dashed outline. Turn it off inside a card that already has one.

`EmptyNote`

One quiet line for an empty list inside a section that already has a heading, where a centred block would be the loudest thing on the page. icon leads it; inset puts it on a muted fill in place of the surface the list would have drawn.

Extends ComponentProps<'p'>.

Prop	Type	Default	Description
icon	ReactNode	—	The three parts of a useful empty state.
inset	boolean	false	On a quiet fill, standing in for the surface the list would have drawn.