Empty State · paneui

No invoices yet

Invoices appear here after the first successful charge.

Installation

pnpm dlx shadcn@latest add @paneui/empty-state

Usage

import {
  EmptyState,
  EmptyStateActions,
  EmptyStateDescription,
  EmptyStateIcon,
  EmptyStateTitle,
} from "@/components/ui/empty-state"

<EmptyState variant="outline">
  <EmptyStateIcon><InboxIcon /></EmptyStateIcon>
  <EmptyStateTitle>No invoices yet</EmptyStateTitle>
  <EmptyStateDescription>Invoices appear here after the first charge.</EmptyStateDescription>
  <EmptyStateActions><Button size="sm">Create invoice</Button></EmptyStateActions>
</EmptyState>

Composition

EmptyState
├── EmptyStateIcon
├── EmptyStateTitle
├── EmptyStateDescription
└── EmptyStateActions

Examples

Variants

Writing

Say what is missing, then what to do about it, then offer the action. For a filtered list, say no results matched and offer to clear the filters, as DataTable does.

API Reference

EmptyState

Also accepts every prop of div.

variant= "default": "default" | "outline" | "muted"; Surface.
size= "default": "sm" | "default" | "lg"; Vertical padding.

Prop	Type	Default	Description
variant	"default" \| "outline" \| "muted"	"default"	Surface.
size	"sm" \| "default" \| "lg"	"default"	Vertical padding.

EmptyStateIcon

40px raised chip with a 20px muted glyph. Also accepts every prop of div.