Empty

PreviousNext

Displays an empty state with optional media, title, description, and actions.

Component empty-demo not found in registry.

Installation

pnpm dlx shadcn@latest add empty

Usage

import * as Empty from "@/components/ui/empty"
<Empty.Root>
  <Empty.Header>
    <Empty.Media variant="icon">
      <SearchIcon />
    </Empty.Media>
    <Empty.Title>No results found</Empty.Title>
    <Empty.Description>
      Try adjusting your search or filter to find what you're looking for.
    </Empty.Description>
  </Empty.Header>
  <Empty.Content>
    <Button.Root>Clear filters</Button.Root>
  </Empty.Content>
</Empty.Root>

Examples

Demo

Component empty-demo not found in registry.

Props

Empty.Root

This component is based on the <div> element and supports all of its props.

Prop

Type

Default

variant
default
icon
default
className
string
-
children
ReactNode
-

Empty.Header

This component is based on the <div> element and supports all of its props.

Prop

Type

Default

className
string
-
children
ReactNode
-

Empty.Media

This component is based on the <div> element and supports all of its props.

Prop

Type

Default

variant
default
icon
default
as
ElementType
-
className
string
-
children
ReactNode
-

Empty.Title

This component is based on the <div> element and supports all of its props.

Prop

Type

Default

className
string
-
children
ReactNode
-

Empty.Description

This component is based on the <p> element and supports all of its props.

Prop

Type

Default

className
string
-
children
ReactNode
-

Empty.Content

This component is based on the <div> element and supports all of its props.

Prop

Type

Default

className
string
-
children
ReactNode
-