Feedback

Empty State

A reusable product empty state with semantic actions and a small status badge.

Source

This is the component source that shadcn installs into a consuming project.

registry/default/empty-state/empty-state.tsx

import { FileSearchIcon, PlusIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
  Empty,
  EmptyContent,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "@/components/ui/empty"

type EmptyStateCopy = {
  badge: string
  title: string
  description: string
  action: string
}

type EmptyStateProps = {
  copy?: EmptyStateCopy
}

const defaultCopy: EmptyStateCopy = {
  badge: "No components yet",
  title: "Start your registry with one reusable block.",
  description:
    "Add a component, document the install command, and verify it with shadcn add before publishing.",
  action: "Add component",
}

export function EmptyState({ copy = defaultCopy }: EmptyStateProps) {
  return (
    <Empty className="border bg-card">
      <EmptyHeader>
        <EmptyMedia variant="icon">
          <FileSearchIcon />
        </EmptyMedia>
        <Badge variant="secondary">{copy.badge}</Badge>
        <EmptyTitle>{copy.title}</EmptyTitle>
        <EmptyDescription>
          {copy.description}
        </EmptyDescription>
      </EmptyHeader>
      <EmptyContent>
        <Button>
          <PlusIcon data-icon="inline-start" />
          {copy.action}
        </Button>
      </EmptyContent>
    </Empty>
  )
}