Command Menu

Search documentation, components, and switch theme.

Atoms

Empty

Empty state placeholder with media, title, and description.

Formance
Docs

Installation#

npx shadcn@latest add @formance/empty

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from '@/components/ui/empty'
<Empty className="border">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <InboxIcon />
    </EmptyMedia>
    <EmptyTitle>No transactions found</EmptyTitle>
    <EmptyDescription>
      There are no transactions matching your filters.
    </EmptyDescription>
  </EmptyHeader>
</Empty>