ShadcnStore

Appearance

Shadcn Empty ​

The shadcn/ui Empty component builds a clear empty state, styled with Tailwind CSS v4: an icon, title, description, and a next action shown when there is no data yet. Empty states guide users in lists, tables, and search across ShadcnStore application blocks.

Key features ​

  • Icon or media, title, description, and action slots.
  • Centered, consistent layout for no-data screens.
  • Works for empty lists, no results, and first-run states.
  • Composes with any icon and Button.
  • Themed for light and dark.

Installation ​

bash
npx shadcn@latest add empty

Usage ​

tsx
import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
} from "@/components/ui/empty"
import { Button } from "@/components/ui/button"
import { FolderOpen } from "lucide-react"

export function Example() {
  return (
    <Empty>
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FolderOpen />
        </EmptyMedia>
        <EmptyTitle>No projects yet</EmptyTitle>
        <EmptyDescription>Create your first project to get started.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>Create project</Button>
      </EmptyContent>
    </Empty>
  )
}

Accessibility ​

  • Keep the title short and the description actionable.
  • Ensure the primary action is a real, reachable Button or link.
  • Do not show an empty state while data is still loading.

When to use the Empty ​

Use an Empty state when a screen has no data yet and you want to explain why and offer a next step: an empty inbox, no search results, or a first-run screen. While loading, use a Skeleton or Spinner. For an error, use an Alert.

Used in these blocks ​

An Empty state pairs an icon with a Button action; while loading use a Skeleton or Spinner, and for errors an Alert.

FAQ ​

What is the shadcn empty component used for? ​

The Empty component builds an empty state: an icon, title, description, and action shown when there is no data yet, such as no results or no items.

What should an empty state include? ​

A brief title, a short description of why it is empty, and a clear next action like Create or Import.

When should I show an empty state instead of a spinner? ​

Show a Spinner or Skeleton while loading, and the Empty state only once loading finishes with no data.

Can I use an illustration instead of an icon? ​

Yes. Put an image or illustration in EmptyMedia instead of an icon.

Copyright © 2025-2026 ShadcnStore