Empty

Use the Empty component to display an empty state, with a title, description, and optional actions.

Last updated January 1, 1980

CreditsUnchangedPublished

Copied from shadcn/ui.

Overview

Installation

Usage

import {
 
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"
 
export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <Icon />
        </EmptyMedia>
        <EmptyTitle>No data</EmptyTitle>
        <EmptyDescription>No data found</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Add data</Button>
      </EmptyContent>
    </Empty>
  )
}

Examples

Outline

Use the border utility class to create an outline empty state.

Background

Use the bg-* utilities to add a background to the empty state.

Input Group

Add an InputGroup component to EmptyContent.

RTL

No city found

A pattern for City Selector 's dependent city field before a province is chosen.

API Reference

EmptyMedia

API reference: shadcn/ui EmptyMedia .