{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sonner",
  "title": "Sonner",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/sonner/Sonner.tsx",
      "content": "'use client'\n\nimport { useTheme } from 'next-themes'\nimport { Toaster as Sonner, type ToasterProps } from 'sonner'\nimport {\n  CircleCheckIcon,\n  InfoIcon,\n  Loader2Icon,\n  OctagonXIcon,\n  TriangleAlertIcon,\n} from 'lucide-react'\n\n// Sonner cadence — UX_MICROINTERACTIONS.md research:\n// 4000ms default, bottom-right position so swipe-right dismiss reads\n// naturally, max 3 visible (older stack with scale offset), rich colors\n// so success/error/info/warning each get distinct variants.\nconst Toaster = ({ ...props }: ToasterProps) => {\n  const { theme = 'system' } = useTheme()\n\n  return (\n    <Sonner\n      theme={theme as ToasterProps['theme']}\n      data-uipkge=\"\"\n      data-slot=\"sonner\"\n      className=\"toaster group\"\n      position=\"bottom-right\"\n      duration={4000}\n      visibleToasts={3}\n      richColors\n      closeButton={false}\n      expand={false}\n      style={\n        {\n          '--normal-bg': 'var(--popover)',\n          '--normal-text': 'var(--popover-foreground)',\n          '--normal-border': 'var(--border)',\n          '--border-radius': 'var(--radius)',\n        } as React.CSSProperties\n      }\n      icons={{\n        success: <CircleCheckIcon className=\"size-4\" aria-hidden=\"true\" />,\n        info: <InfoIcon className=\"size-4\" aria-hidden=\"true\" />,\n        warning: <TriangleAlertIcon className=\"size-4\" aria-hidden=\"true\" />,\n        error: <OctagonXIcon className=\"size-4\" aria-hidden=\"true\" />,\n        loading: <Loader2Icon className=\"size-4 animate-spin\" aria-hidden=\"true\" />,\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Toaster }\n",
      "type": "registry:ui",
      "target": "~/components/ui/sonner/Sonner.tsx"
    },
    {
      "path": "packages/registry-react/components/sonner/index.ts",
      "content": "export { Toaster } from './Sonner'\n",
      "type": "registry:ui",
      "target": "~/components/ui/sonner/index.ts"
    }
  ],
  "dependencies": [
    "sonner",
    "next-themes"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Toast notification system — non-blocking, auto-dismissing alerts that stack in a corner. Built on the `sonner` library with the registry’s tokens applied.",
  "categories": [
    "feedback"
  ]
}