{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-state",
  "title": "Empty state",
  "author": "Tori Bryan",
  "description": "What shows where content would be: a title, why it's empty, and what to do next.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/empty-state.tsx",
      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst emptyStateVariants = cva(\n  \"group/empty-state flex w-full min-w-0 flex-col items-center justify-center text-center text-balance\",\n  {\n    variants: {\n      size: {\n        // A line or two inside a menu or popover.\n        sm: \"gap-1 px-2 py-6\",\n        default: \"gap-2 px-6 py-12\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\n/**\n * What shows where content would be: a title, why it's empty, and what to\n * do next.\n */\nfunction EmptyState({\n  size = \"default\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** `sm` for a menu or popover, `default` for a table, list or page. */\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <div\n      data-slot=\"empty-state\"\n      data-size={size}\n      className={cn(emptyStateVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\n/** An icon above the title, in a muted tile. */\nfunction EmptyStateMedia({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-state-media\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"mb-2 flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground group-data-[size=sm]/empty-state:mb-1 group-data-[size=sm]/empty-state:size-8 [&_svg:not([class*='size-'])]:size-5 group-data-[size=sm]/empty-state:[&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyStateTitle({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"empty-state-title\"\n      className={cn(\n        \"text-sm font-medium text-foreground group-data-[size=sm]/empty-state:font-normal group-data-[size=sm]/empty-state:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyStateDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"empty-state-description\"\n      className={cn(\n        \"max-w-sm text-sm text-muted-foreground group-data-[size=sm]/empty-state:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/** One or two buttons, such as Clear filters or Add member. */\nfunction EmptyStateActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-state-actions\"\n      className={cn(\n        \"mt-2 flex flex-wrap items-center justify-center gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  EmptyState,\n  EmptyStateActions,\n  EmptyStateDescription,\n  EmptyStateMedia,\n  EmptyStateTitle,\n  emptyStateVariants,\n}\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "tier": "base-components",
    "group": "Feedback",
    "docs": "https://fibo.toribryan.com/?path=/docs/base-components-feedback-empty-state--docs"
  },
  "docs": "Docs and live examples: https://fibo.toribryan.com/?path=/docs/base-components-feedback-empty-state--docs",
  "categories": [
    "base-components",
    "feedback"
  ],
  "type": "registry:ui"
}