Empty

An empty state for a page, table or panel with no content yet, with an icon, a title, a short explanation and the action that fills it.

Powered by

Shadcn UI

Installation

npx shadcn@latest add @redpanda/empty

pnpm dlx shadcn@latest add @redpanda/empty

yarn dlx shadcn@latest add @redpanda/empty

bunx shadcn@latest add @redpanda/empty

nubx shadcn@latest add @redpanda/empty

aube dlx shadcn@latest add @redpanda/empty

When to use

Use this decision tree to determine when to use the Empty component:

Usage

import {  Empty,  EmptyContent,  EmptyDescription,  EmptyHeader,  EmptyMedia,  EmptyTitle,} from '@/components/redpanda-ui/empty';

<Empty>  <EmptyHeader>    <EmptyMedia variant="icon">      <Icon />    </EmptyMedia>    <EmptyTitle>No data</EmptyTitle>    <EmptyDescription>No data found</EmptyDescription>  </EmptyHeader>  <EmptyContent>    <Button>Add data</Button>  </EmptyContent></Empty>

Anatomy

The Empty component is structured as a centered layout designed to communicate the absence of content. Here’s how the components work together:

<Empty>           {/* Container with centered flex layout */}  <EmptyHeader>   {/* Groups media, title, and description */}    <EmptyMedia>  {/* Optional visual (icon, avatar, image) */}    <EmptyTitle>  {/* Primary message */}    <EmptyDescription> {/* Supporting details */}  </EmptyHeader>  <EmptyContent>  {/* Optional actions (buttons, links, inputs) */}</Empty>

Layout Structure

• Empty: Root container that centers content vertically and horizontally
• EmptyHeader: Stacks media, title, and description in a column with consistent spacing
• EmptyMedia: Displays visual elements (icons with variant="icon", or custom content like avatars)
• EmptyTitle: Primary heading styled for prominence
• EmptyDescription: Secondary text providing context or instructions
• EmptyContent: Action area for buttons, forms, or links

Typical Usage Pattern

// Minimal empty state<Empty>  <EmptyHeader>    <EmptyTitle>No results found</EmptyTitle>    <EmptyDescription>Try adjusting your search.</EmptyDescription>  </EmptyHeader></Empty>
// Full empty state with icon and action<Empty>  <EmptyHeader>    <EmptyMedia variant="icon">      <SearchIcon />    </EmptyMedia>    <EmptyTitle>No projects yet</EmptyTitle>    <EmptyDescription>Get started by creating your first project.</EmptyDescription>  </EmptyHeader>  <EmptyContent>    <Button>Create Project</Button>  </EmptyContent></Empty>

Examples

Outline

Use <Empty variant="outline"> for a dashed outline. The component owns the border treatment.

Background

Use <Empty variant="muted"> for a theme-aware gradient from the recessed surface to the background.

Avatar

Use the EmptyMedia component to display an avatar in the empty state.

Avatar Group

Use the EmptyMedia component to display an avatar group in the empty state.

InputGroup

You can add an InputGroup component to the EmptyContent component.

No results

Secondary action

API Reference

Empty

The main component of the empty state. Wraps the EmptyHeader and EmptyContent components.

default has no border or background paint. outline adds the dashed border; muted adds the gradient without a border. These root variants are separate from EmptyMedia’s default and icon variants.

Use className for layout, such as a container height or maximum width. Choose the surface with variant rather than overriding its border or background. Native div attributes and refs are forwarded.

<Empty variant="outline">  <EmptyHeader />  <EmptyContent /></Empty>

EmptyHeader

The EmptyHeader component wraps the empty media, title, and description.

<EmptyHeader>  <EmptyMedia />  <EmptyTitle />  <EmptyDescription /></EmptyHeader>

EmptyMedia

Use the EmptyMedia component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.

<EmptyMedia variant="icon">  <Icon /></EmptyMedia>

<EmptyMedia>  <Avatar>    <AvatarImage src="..." />    <AvatarFallback>CN</AvatarFallback>  </Avatar></EmptyMedia>

EmptyTitle

Use the EmptyTitle component to display the title of the empty state.

<EmptyTitle>No data</EmptyTitle>

EmptyDescription

Use the EmptyDescription component to display the description of the empty state.

<EmptyDescription>You do not have any notifications.</EmptyDescription>

EmptyContent

Use the EmptyContent component to display the content of the empty state such as a button, input or a link.

<EmptyContent>  <Button>Add Project</Button></EmptyContent>

Props

Credits

• We take our inspiration from Shadcn UI for the empty component and style.