{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "breadcrumb",
  "title": "Breadcrumb",
  "description": "A shadcn-style breadcrumb component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "lucide-react"],
  "files": [
    {
      "path": "src/components/ui/breadcrumb.tsx",
      "content": "\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { ChevronRightIcon, MoreHorizontalIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport const Breadcrumb = ({\n  className,\n  ...props\n}: ComponentProps<typeof ark.nav>) => (\n  <ark.nav\n    aria-label=\"breadcrumb\"\n    data-slot=\"breadcrumb\"\n    className={cn(className)}\n    {...props}\n  />\n);\n\nexport const BreadcrumbList = ({\n  className,\n  ...props\n}: ComponentProps<typeof ark.ol>) => (\n  <ark.ol\n    data-slot=\"breadcrumb-list\"\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground\",\n      className,\n    )}\n    {...props}\n  />\n);\n\nexport const BreadcrumbItem = ({\n  className,\n  ...props\n}: ComponentProps<typeof ark.li>) => (\n  <ark.li\n    data-slot=\"breadcrumb-item\"\n    className={cn(\"inline-flex items-center gap-1\", className)}\n    {...props}\n  />\n);\n\nexport const BreadcrumbLink = ({\n  className,\n  ...props\n}: ComponentProps<typeof ark.a>) => (\n  <ark.a\n    data-slot=\"breadcrumb-link\"\n    className={cn(\"transition-colors hover:text-foreground\", className)}\n    {...props}\n  />\n);\n\nexport const BreadcrumbPage = ({\n  className,\n  ...props\n}: ComponentProps<typeof ark.span>) => (\n  <ark.span\n    data-slot=\"breadcrumb-page\"\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n);\n\nexport const BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: ComponentProps<typeof ark.li>) => (\n  <ark.li\n    data-slot=\"breadcrumb-separator\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:size-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRightIcon className=\"rtl:rotate-180\" />}\n  </ark.li>\n);\n\nexport const BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: ComponentProps<typeof ark.span>) => (\n  <ark.span\n    data-slot=\"breadcrumb-ellipsis\"\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\n      \"flex size-5 items-center justify-center [&>svg]:size-4\",\n      className,\n    )}\n    {...props}\n  >\n    <MoreHorizontalIcon />\n    <ark.span className=\"sr-only\">More</ark.span>\n  </ark.span>\n);\n",
      "type": "registry:ui",
      "target": "src/components/ui/breadcrumb.tsx"
    }
  ],
  "type": "registry:ui"
}