Empty state

A centred message that says a place has nothing in it yet and offers the way to fill it.

ui.emptycomponents/ui/empty.tsx

Use case

For the AI

Use it where a list or a page has no content: the client list before the first client, an order's files before any upload, a search that matched nothing. The title says what is missing, one sentence says what to do, and EmptyContent holds the one button that fixes it (Add a Client).

Use it when

A list or a table with no rows yet
A search or a filter that matched nothing
A section of a page waiting for its first item

Use something else when

The content is on its way: Skeleton
Something went wrong reading it: Alert
A short note under one field: Field, label and form

Examples

No files yet

Drop a file here, or add one from your computer.

Code

Import

import { FolderOpenIcon, PlusIcon } from "@/components/icons"
import { Button } from "@/components/ui/button"
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty"

Usage

export function NoFiles({ onAdd }: { onAdd: () => void }) {
  return (
    <Empty className="py-8 md:py-10">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FolderOpenIcon />
        </EmptyMedia>
        <EmptyTitle>No files yet</EmptyTitle>
        <EmptyDescription>Drop a file here, or add one from your computer.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button onClick={onAdd}>
          <PlusIcon />
          Add a File
        </Button>
      </EmptyContent>
    </Empty>
  )
}

Rules

The title names what is missing (No files yet); the description is one sentence that says what to do.
One action, the one that fills the place, in Title Case (Add a File); a search that matched nothing offers to clear the search rather than to create.
EmptyMedia variant="icon" draws a lucide icon on a small stacked tile; pick the icon of the thing that is missing.
Draw it where the rows would be, inside the card or table frame; inside a card, lower its padding (py-8 md:py-10, as in the showcase).