shadcn/app/public/registry/styles/default/empty-state.json

{
  "name": "empty-state",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "name": "empty-state.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n  AlertCircle,\n  FileQuestion,\n  Heart,\n  Package,\n  Search,\n  Sparkles,\n  type LucideIcon,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nconst emptyStateVariants = cva(\n  \"flex flex-col items-center justify-center text-center gap-6 p-8 rounded-lg border border-dashed animate-in fade-in-50 duration-500\",\n  {\n    variants: {\n      variant: {\n        default: \"border-border bg-muted/30\",\n        subtle: \"border-transparent bg-transparent\",\n        error: \"border-destructive/50 bg-destructive/5\",\n        success: \"border-primary/50 bg-primary/5\",\n      },\n      size: {\n        sm: \"p-6 gap-4 max-w-sm\",\n        default: \"p-8 gap-6 max-w-md\",\n        lg: \"p-12 gap-8 max-w-lg\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\n// Illustration wrapper component\nfunction EmptyStateIllustration({\n  icon: Icon,\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement> & {\n  icon?: LucideIcon\n}) {\n  return (\n    <div\n      className={cn(\n        \"relative flex size-20 items-center justify-center rounded-full bg-muted animate-in zoom-in-50 duration-700\",\n        className\n      )}\n      {...props}\n    >\n      {Icon && (\n        <Icon className=\"size-10 text-muted-foreground\" strokeWidth={1.5} />\n      )}\n    </div>\n  )\n}\n\n// Title component\nfunction EmptyStateTitle({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLHeadingElement>) {\n  return (\n    <h3\n      className={cn(\n        \"text-xl font-semibold tracking-tight animate-in fade-in-50 slide-in-from-bottom-2 duration-700 delay-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// Description component\nfunction EmptyStateDescription({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) {\n  return (\n    <p\n      className={cn(\n        \"text-sm text-muted-foreground max-w-sm animate-in fade-in-50 slide-in-from-bottom-2 duration-700 delay-200\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// Actions component\nfunction EmptyStateActions({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-wrap items-center justify-center gap-2 animate-in fade-in-50 slide-in-from-bottom-2 duration-700 delay-300\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// Main component\nexport interface EmptyStateProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof emptyStateVariants> {\n  icon?: LucideIcon\n  title?: string\n  description?: string\n  action?: React.ReactNode\n  children?: React.ReactNode\n}\n\nconst EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      icon,\n      title,\n      description,\n      action,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(emptyStateVariants({ variant, size }), className)}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <>\n            {icon && <EmptyStateIllustration icon={icon} />}\n            {title && <EmptyStateTitle>{title}</EmptyStateTitle>}\n            {description && (\n              <EmptyStateDescription>{description}</EmptyStateDescription>\n            )}\n            {action && <EmptyStateActions>{action}</EmptyStateActions>}\n          </>\n        )}\n      </div>\n    )\n  }\n)\nEmptyState.displayName = \"EmptyState\"\n\nexport {\n  EmptyState,\n  EmptyStateIllustration,\n  EmptyStateTitle,\n  EmptyStateDescription,\n  EmptyStateActions,\n  emptyStateVariants,\n}\n\n// Pre-configured variants for common use cases\nexport const EmptyStatePresets = {\n  noResults: {\n    icon: Search,\n    title: \"No results found\",\n    description:\n      \"We couldn't find anything matching your search. Try adjusting your filters or search terms.\",\n  },\n  noItems: {\n    icon: Package,\n    title: \"No items yet\",\n    description: \"Get started by adding your first item.\",\n  },\n  noFavorites: {\n    icon: Heart,\n    title: \"No favorites yet\",\n    description:\n      \"Items you favorite will appear here. Start exploring to find what you love.\",\n  },\n  gettingStarted: {\n    icon: Sparkles,\n    title: \"Let's get started\",\n    description: \"Create your first project to begin your journey.\",\n  },\n  error: {\n    icon: AlertCircle,\n    title: \"Something went wrong\",\n    description:\n      \"We encountered an error loading this content. Please try again.\",\n    variant: \"error\" as const,\n  },\n  notFound: {\n    icon: FileQuestion,\n    title: \"Nothing here\",\n    description: \"The content you're looking for doesn't exist or was removed.\",\n  },\n} as const\n"
    }
  ],
  "type": "components:ui"
}