{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "empty-state",
  "title": "Empty state",
  "description": "nothing here yet, and the way out · `default` page / `compact` in a card",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/kit/empty-state.tsx",
      "content": "import type { LucideIcon } from 'lucide-react';\nimport { cn } from 'cn';\nimport type * as React from 'react';\n\ntype Props = {\n  icon: LucideIcon;\n  title: string;\n  description?: string;\n  /** Usually one Button: the way out of the empty state. */\n  action?: React.ReactNode;\n  /** `compact` for inside a card or table; `default` for a whole page. */\n  variant?: 'default' | 'compact';\n  className?: string;\n};\n\n/** What a list, table or page shows when there is nothing yet. Always offer the next step. */\nexport function EmptyState({ icon: Icon, title, description, action, variant = 'default', className }: Props) {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center justify-center gap-3 text-center',\n        variant === 'default' ? 'px-6 py-16' : 'px-4 py-8',\n        className\n      )}>\n      <span className={cn('bg-muted text-muted-foreground flex items-center justify-center rounded-full', variant === 'default' ? 'size-14' : 'size-10')}>\n        <Icon className={variant === 'default' ? 'size-6' : 'size-5'} aria-hidden />\n      </span>\n      <div className=\"flex max-w-sm flex-col gap-1\">\n        <p className=\"font-semibold\">{title}</p>\n        {description ? <p className=\"text-muted-foreground text-sm\">{description}</p> : null}\n      </div>\n      {action ? <div className=\"mt-1\">{action}</div> : null}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/empty-state.tsx"
    }
  ],
  "meta": {
    "exports": [
      "EmptyState"
    ],
    "api": "<EmptyState icon title description? action? variant? />"
  },
  "docs": "Needs the kit theme (`@kit/theme`) and a next-themes ThemeProvider (attribute=\"class\") at the root.",
  "categories": [
    "feedback"
  ],
  "type": "registry:component"
}