Empty State

A consistent presentation for views with no data yet. Guides users toward the first meaningful action.

No team members yet

Invite your colleagues to collaborate on projects and manage permissions.

import { EmptyState } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add empty-state

Import

import.tsx

import { EmptyState } from "@aetherstack/patterns"

Usage

empty-state.tsx

import { Users } from "lucide-react"
import { EmptyState } from "@aetherstack/patterns"
import { Button } from "@aetherstack/ui"

<EmptyState
  icon={<Users className="h-5 w-5" />}
  title="No team members yet"
  description="Invite your colleagues to collaborate on projects and manage permissions."
  action={<Button>Invite member</Button>}
  secondaryAction={<Button variant="outline">Learn more</Button>}
/>

Props

Prop	Type	Default	Description
title*	string	—	Short, friendly heading.
icon	ReactNode	—	Icon displayed in the muted circle above the title. Recommended: Lucide icon, h-5 w-5.
description	string	—	Explanatory text below the title.
action	ReactNode	—	Primary CTA — typically a Button.
secondaryAction	ReactNode	—	Secondary CTA — typically an outline or ghost Button.
className	string	—	Additional classes. Overrides the dashed-border default container.

* Required

Accessibility

→The icon is purely decorative — wrap in aria-hidden or use a Lucide icon (already aria-hidden by default).
→Do not hide empty states from assistive technologies — they're informative content.
→Ensure the CTA button has a descriptive label that makes sense out of context.