Atoms

Empty

Empty state placeholder with media, title, and description.

FormanceCustom component built for Formance products.

No transactions found

There are no transactions matching your filters. Try adjusting your search criteria.

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>