From f391ad76dd21f5ccd7b85ea57505f291ce64a008 Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Mon, 11 Mar 2024 00:15:16 -0400
Subject: [PATCH] feat: Breadcrumb (#885)

---
 apps/www/__registry__/index.js                | 120 ++++++++++++++++++
 apps/www/package.json                         |   2 +-
 apps/www/src/content/changelog.md             |  10 ++
 apps/www/src/content/components/breadcrumb.md | 114 +++++++++++++++++
 .../lib/components/docs/charts/metric.svelte  |   2 +-
 apps/www/src/lib/config/docs.ts               |   6 +
 .../default/example/breadcrumb-demo.svelte    |  34 +++++
 .../example/breadcrumb-dropdown.svelte        |  36 ++++++
 .../example/breadcrumb-ellipsis.svelte        |  23 ++++
 .../default/example/breadcrumb-link.svelte    |  23 ++++
 .../example/breadcrumb-responsive.svelte      |  95 ++++++++++++++
 .../example/breadcrumb-separator.svelte       |  24 ++++
 .../ui/breadcrumb/breadcrumb-ellipsis.svelte  |  24 ++++
 .../ui/breadcrumb/breadcrumb-item.svelte      |  16 +++
 .../ui/breadcrumb/breadcrumb-link.svelte      |  31 +++++
 .../ui/breadcrumb/breadcrumb-list.svelte      |  23 ++++
 .../ui/breadcrumb/breadcrumb-page.svelte      |  23 ++++
 .../ui/breadcrumb/breadcrumb-separator.svelte |  25 ++++
 .../default/ui/breadcrumb/breadcrumb.svelte   |  15 +++
 .../registry/default/ui/breadcrumb/index.ts   |  25 ++++
 .../new-york/example/breadcrumb-demo.svelte   |  34 +++++
 .../example/breadcrumb-dropdown.svelte        |  36 ++++++
 .../example/breadcrumb-ellipsis.svelte        |  23 ++++
 .../new-york/example/breadcrumb-link.svelte   |  23 ++++
 .../example/breadcrumb-responsive.svelte      |  95 ++++++++++++++
 .../example/breadcrumb-separator.svelte       |  24 ++++
 .../ui/breadcrumb/breadcrumb-ellipsis.svelte  |  24 ++++
 .../ui/breadcrumb/breadcrumb-item.svelte      |  16 +++
 .../ui/breadcrumb/breadcrumb-link.svelte      |  31 +++++
 .../ui/breadcrumb/breadcrumb-list.svelte      |  23 ++++
 .../ui/breadcrumb/breadcrumb-page.svelte      |  23 ++++
 .../ui/breadcrumb/breadcrumb-separator.svelte |  25 ++++
 .../new-york/ui/breadcrumb/breadcrumb.svelte  |  15 +++
 .../registry/new-york/ui/breadcrumb/index.ts  |  25 ++++
 apps/www/static/registry/index.json           |  16 +++
 .../styles/default-js/breadcrumb.json         |  40 ++++++
 .../registry/styles/default/breadcrumb.json   |  40 ++++++
 .../styles/new-york-js/breadcrumb.json        |  40 ++++++
 .../registry/styles/new-york/breadcrumb.json  |  40 ++++++
 pnpm-lock.yaml                                |  14 +-
 40 files changed, 1269 insertions(+), 9 deletions(-)
 create mode 100644 apps/www/src/content/components/breadcrumb.md
 create mode 100644 apps/www/src/lib/registry/default/example/breadcrumb-demo.svelte
 create mode 100644 apps/www/src/lib/registry/default/example/breadcrumb-dropdown.svelte
 create mode 100644 apps/www/src/lib/registry/default/example/breadcrumb-ellipsis.svelte
 create mode 100644 apps/www/src/lib/registry/default/example/breadcrumb-link.svelte
 create mode 100644 apps/www/src/lib/registry/default/example/breadcrumb-responsive.svelte
 create mode 100644 apps/www/src/lib/registry/default/example/breadcrumb-separator.svelte
 create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-ellipsis.svelte
 create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-item.svelte
 create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-link.svelte
 create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-list.svelte
 create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-page.svelte
 create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-separator.svelte
 create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb.svelte
 create mode 100644 apps/www/src/lib/registry/default/ui/breadcrumb/index.ts
 create mode 100644 apps/www/src/lib/registry/new-york/example/breadcrumb-demo.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/example/breadcrumb-dropdown.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/example/breadcrumb-ellipsis.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/example/breadcrumb-link.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/example/breadcrumb-responsive.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/example/breadcrumb-separator.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-ellipsis.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-item.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-link.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-list.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-page.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-separator.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb.svelte
 create mode 100644 apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts
 create mode 100644 apps/www/static/registry/styles/default-js/breadcrumb.json
 create mode 100644 apps/www/static/registry/styles/default/breadcrumb.json
 create mode 100644 apps/www/static/registry/styles/new-york-js/breadcrumb.json
 create mode 100644 apps/www/static/registry/styles/new-york/breadcrumb.json

diff --git a/apps/www/__registry__/index.js b/apps/www/__registry__/index.js
index 02959d349..8002fce11 100644
--- a/apps/www/__registry__/index.js
+++ b/apps/www/__registry__/index.js
@@ -102,6 +102,66 @@ export const Index = {
 				),
 			files: ["../src/lib/registry/default/example/badge-secondary.svelte"],
 		},
+		"breadcrumb-demo": {
+			name: "breadcrumb-demo",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "dropdown-menu"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-demo.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-demo.svelte"],
+		},
+		"breadcrumb-dropdown": {
+			name: "breadcrumb-dropdown",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "dropdown-menu"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-dropdown.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-dropdown.svelte"],
+		},
+		"breadcrumb-ellipsis": {
+			name: "breadcrumb-ellipsis",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-ellipsis.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-ellipsis.svelte"],
+		},
+		"breadcrumb-link": {
+			name: "breadcrumb-link",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-link.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-link.svelte"],
+		},
+		"breadcrumb-responsive": {
+			name: "breadcrumb-responsive",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "drawer", "dropdown-menu", "button"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-responsive.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-responsive.svelte"],
+		},
+		"breadcrumb-separator": {
+			name: "breadcrumb-separator",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/default/example/breadcrumb-separator.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/default/example/breadcrumb-separator.svelte"],
+		},
 		"button-demo": {
 			name: "button-demo",
 			type: "components:example",
@@ -1324,6 +1384,66 @@ export const Index = {
 				),
 			files: ["../src/lib/registry/new-york/example/badge-secondary.svelte"],
 		},
+		"breadcrumb-demo": {
+			name: "breadcrumb-demo",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "dropdown-menu"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-demo.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-demo.svelte"],
+		},
+		"breadcrumb-dropdown": {
+			name: "breadcrumb-dropdown",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "dropdown-menu"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-dropdown.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-dropdown.svelte"],
+		},
+		"breadcrumb-ellipsis": {
+			name: "breadcrumb-ellipsis",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-ellipsis.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-ellipsis.svelte"],
+		},
+		"breadcrumb-link": {
+			name: "breadcrumb-link",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-link.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-link.svelte"],
+		},
+		"breadcrumb-responsive": {
+			name: "breadcrumb-responsive",
+			type: "components:example",
+			registryDependencies: ["breadcrumb", "drawer", "dropdown-menu", "button"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-responsive.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-responsive.svelte"],
+		},
+		"breadcrumb-separator": {
+			name: "breadcrumb-separator",
+			type: "components:example",
+			registryDependencies: ["breadcrumb"],
+			component: () =>
+				import("../src/lib/registry/new-york/example/breadcrumb-separator.svelte").then(
+					(m) => m.default
+				),
+			files: ["../src/lib/registry/new-york/example/breadcrumb-separator.svelte"],
+		},
 		"button-demo": {
 			name: "button-demo",
 			type: "components:example",
diff --git a/apps/www/package.json b/apps/www/package.json
index 92876ea86..054723300 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -79,7 +79,7 @@
 		"@internationalized/date": "^3.5.2",
 		"@unovis/svelte": "1.3.6-beta.1",
 		"@unovis/ts": "1.3.6-beta.1",
-		"bits-ui": "0.19.3",
+		"bits-ui": "0.19.6",
 		"clsx": "^2.1.0",
 		"cmdk-sv": "^0.0.15",
 		"d3-scale": "^4.0.2",
diff --git a/apps/www/src/content/changelog.md b/apps/www/src/content/changelog.md
index 0e71ff16f..673e05b5e 100644
--- a/apps/www/src/content/changelog.md
+++ b/apps/www/src/content/changelog.md
@@ -9,6 +9,16 @@ description: Latest updates and announcements.
 
 ## March 2024
 
+### New Component: Breadcrumb
+
+We've added a new component to the project, [Breadcrumb](/docs/components/breadcrumb).
+
+<ComponentPreview name="breadcrumb-demo">
+
+<div />
+
+</ComponentPreview>
+
 ### New Component: Scroll Area
 
 We've added a new component to the project, [Scroll Area](/docs/components/scroll-area), which is built on top of the [Scroll Area](https://bits-ui.com/docs/components/scroll-area) component from Bits UI.
diff --git a/apps/www/src/content/components/breadcrumb.md b/apps/www/src/content/components/breadcrumb.md
new file mode 100644
index 000000000..12dba7a59
--- /dev/null
+++ b/apps/www/src/content/components/breadcrumb.md
@@ -0,0 +1,114 @@
+---
+title: Breadcrumb
+description: Displays the path to the current resource using a hierarchy of links.
+component: true
+source: https://github.com/huntabyte/shadcn-svelte/tree/main/apps/www/src/lib/registry/default/ui/breadcrumb
+---
+
+<script>
+  import { ComponentPreview, ManualInstall } from '$lib/components/docs';
+</script>
+
+<ComponentPreview name="breadcrumb-demo">
+
+<div />
+
+</ComponentPreview>
+
+## Installation
+
+```bash
+npx shadcn-svelte@latest add breadcrumb
+```
+
+<ManualInstall>
+
+1. Copy and paste the component source files linked at the top of this page into your project.
+
+</ManualInstall>
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
+</script>
+
+<Breadcrumb.Root>
+  <Breadcrumb.List>
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
+    </Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>
+      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+    </Breadcrumb.Item>
+  </Breadcrumb.List>
+</Breadcrumb.Root>
+```
+
+## Examples
+
+### Custom separator
+
+Use a custom component in the `<slot>` of `<Breadcrumb.Separator />` to create a custom separator.
+
+<ComponentPreview name="breadcrumb-separator">
+
+<div />
+
+</ComponentPreview>
+
+---
+
+### Dropdown
+
+You can compose `<Breadcrumb.Item />` with a `<DropdownMenu />` to create a dropdown in the breadcrumb.
+
+<ComponentPreview name="breadcrumb-dropdown">
+
+<div />
+
+</ComponentPreview>
+
+---
+
+### Collapsed
+
+We provide a `<Breadcrumb.Ellipsis />` component to show a collapsed state when the breadcrumb is too long.
+
+<ComponentPreview name="breadcrumb-ellipsis">
+
+<div />
+
+</ComponentPreview>
+
+---
+
+### Link component
+
+To use a custom link component from your routing library, you can use the `asChild` prop on `<Breadcrumb.Link />`.
+
+<ComponentPreview name="breadcrumb-link">
+
+<div />
+
+</ComponentPreview>
+
+---
+
+### Responsive
+
+Here's an example of a responsive breadcrumb that composes `<Breadcrumb.Item />` with `<Breadcrumb.Ellipsis />`, `<DropdownMenu />`, and `<Drawer />`.
+
+It displays a dropdown on desktop and a drawer on mobile.
+
+<ComponentPreview name="breadcrumb-responsive">
+
+<div />
+
+</ComponentPreview>
diff --git a/apps/www/src/lib/components/docs/charts/metric.svelte b/apps/www/src/lib/components/docs/charts/metric.svelte
index 7cb45c52e..f34c42f2b 100644
--- a/apps/www/src/lib/components/docs/charts/metric.svelte
+++ b/apps/www/src/lib/components/docs/charts/metric.svelte
@@ -43,7 +43,7 @@
 	<VisCrosshair template={tooltipTemplate} color={crosshairPointColors} />
 </VisXYContainer>
 
-<style>
+<style lang="postcss">
 	:global(.vis-xy-container) {
 		--vis-tooltip-padding: "0px";
 		--vis-tooltip-background-color: "transparent";
diff --git a/apps/www/src/lib/config/docs.ts b/apps/www/src/lib/config/docs.ts
index 3e1cb6f60..78b8e2cf6 100644
--- a/apps/www/src/lib/config/docs.ts
+++ b/apps/www/src/lib/config/docs.ts
@@ -118,6 +118,12 @@ export const docsConfig: DocsConfig = {
 					href: "/docs/components/badge",
 					items: [],
 				},
+				{
+					title: "Breadcrumb",
+					href: "/docs/components/breadcrumb",
+					items: [],
+					label: "New",
+				},
 				{
 					title: "Button",
 					href: "/docs/components/button",
diff --git a/apps/www/src/lib/registry/default/example/breadcrumb-demo.svelte b/apps/www/src/lib/registry/default/example/breadcrumb-demo.svelte
new file mode 100644
index 000000000..d390019c8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/breadcrumb-demo.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger class="flex items-center gap-1">
+					<Breadcrumb.Ellipsis class="h-4 w-4" />
+					<span class="sr-only">Toggle menu</span>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="start">
+					<DropdownMenu.Item>Documentation</DropdownMenu.Item>
+					<DropdownMenu.Item>Themes</DropdownMenu.Item>
+					<DropdownMenu.Item>GitHub</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/default/example/breadcrumb-dropdown.svelte b/apps/www/src/lib/registry/default/example/breadcrumb-dropdown.svelte
new file mode 100644
index 000000000..d02c678fd
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/breadcrumb-dropdown.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
+	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import Slash from "lucide-svelte/icons/slash";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger class="flex items-center gap-1">
+					Components
+					<ChevronDown class="h-4 w-4" />
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="start">
+					<DropdownMenu.Item>Documentation</DropdownMenu.Item>
+					<DropdownMenu.Item>Themes</DropdownMenu.Item>
+					<DropdownMenu.Item>GitHub</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/default/example/breadcrumb-ellipsis.svelte b/apps/www/src/lib/registry/default/example/breadcrumb-ellipsis.svelte
new file mode 100644
index 000000000..a9c2b9419
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/breadcrumb-ellipsis.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Ellipsis />
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/default/example/breadcrumb-link.svelte b/apps/www/src/lib/registry/default/example/breadcrumb-link.svelte
new file mode 100644
index 000000000..8e28c23c2
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/breadcrumb-link.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link asChild let:attrs>
+				<a href="/" {...attrs}>Home</a>
+			</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Link asChild let:attrs>
+				<a href="/components" {...attrs}>Components</a>
+			</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/default/example/breadcrumb-responsive.svelte b/apps/www/src/lib/registry/default/example/breadcrumb-responsive.svelte
new file mode 100644
index 000000000..3fea59f52
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/breadcrumb-responsive.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+	import * as Drawer from "$lib/registry/default/ui/drawer/index.js";
+	import * as DropdownMenu from "$lib/registry/default/ui/dropdown-menu/index.js";
+	import { Button } from "$lib/registry/default/ui/button/index.js";
+	import { mediaQuery } from "svelte-legos";
+
+	const items = [
+		{ href: "#", label: "Home" },
+		{ href: "#", label: "Documentation" },
+		{ href: "#", label: "Building Your Application" },
+		{ href: "#", label: "Data Fetching" },
+		{ label: "Caching and Revalidating" },
+	];
+
+	const ITEMS_TO_DISPLAY = 3;
+
+	let open = false;
+
+	const isDesktop = mediaQuery("(min-width: 768px)");
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href={items[0].href}>
+				{items[0].label}
+			</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		{#if items.length > ITEMS_TO_DISPLAY}
+			<Breadcrumb.Item>
+				{#if $isDesktop}
+					<DropdownMenu.Root bind:open>
+						<DropdownMenu.Trigger
+							class="flex items-center gap-1"
+							aria-label="Toggle menu"
+						>
+							<Breadcrumb.Ellipsis class="h-4 w-4" />
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content align="start">
+							{#each items.slice(1, -2) as item}
+								<DropdownMenu.Item href={item.href ? item.href : "#"}>
+									{item.label}
+								</DropdownMenu.Item>
+							{/each}
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
+				{:else}
+					<Drawer.Root bind:open>
+						<Drawer.Trigger aria-label="Toggle Menu">
+							<Breadcrumb.Ellipsis class="h-4 w-4" />
+						</Drawer.Trigger>
+						<Drawer.Content>
+							<Drawer.Header class="text-left">
+								<Drawer.Title>Navigate to</Drawer.Title>
+								<Drawer.Description>
+									Select a page to navigate to.
+								</Drawer.Description>
+							</Drawer.Header>
+							<div class="grid gap-1 px-4">
+								{#each items.slice(1, -2) as item}
+									<a href={item.href ? item.href : "#"} class="py-1 text-sm">
+										{item.label}
+									</a>
+								{/each}
+							</div>
+							<Drawer.Footer class="pt-4">
+								<Drawer.Close asChild let:builder>
+									<Button variant="outline" builders={[builder]}>Close</Button>
+								</Drawer.Close>
+							</Drawer.Footer>
+						</Drawer.Content>
+					</Drawer.Root>
+				{/if}
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator />
+		{/if}
+
+		{#each items.slice(-ITEMS_TO_DISPLAY + 1) as item}
+			<Breadcrumb.Item>
+				{#if item.href}
+					<Breadcrumb.Link href={item.href} class="max-w-20 truncate md:max-w-none">
+						{item.label}
+					</Breadcrumb.Link>
+					<Breadcrumb.Separator />
+				{:else}
+					<Breadcrumb.Page class="max-w-20 truncate md:max-w-none">
+						{item.label}
+					</Breadcrumb.Page>
+				{/if}
+			</Breadcrumb.Item>
+		{/each}
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/default/example/breadcrumb-separator.svelte b/apps/www/src/lib/registry/default/example/breadcrumb-separator.svelte
new file mode 100644
index 000000000..d04b4d2a0
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/breadcrumb-separator.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+	import Slash from "lucide-svelte/icons/slash";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-ellipsis.svelte b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-ellipsis.svelte
new file mode 100644
index 000000000..ba680ff77
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import MoreHorizontal from "lucide-svelte/icons/more-horizontal";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement> & {
+		el?: HTMLSpanElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	bind:this={el}
+	role="presentation"
+	aria-hidden="true"
+	class={cn("flex h-9 w-9 items-center justify-center", className)}
+	{...$$restProps}
+>
+	<MoreHorizontal class="h-4 w-4" />
+	<span class="sr-only">More</span>
+</span>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-item.svelte b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-item.svelte
new file mode 100644
index 000000000..8e8b187ec
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-item.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
+	<slot />
+</li>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-link.svelte b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-link.svelte
new file mode 100644
index 000000000..e74376846
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-link.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAnchorAttributes & {
+		el?: HTMLAnchorElement;
+		asChild?: boolean;
+	};
+
+	export let href: $$Props["href"] = undefined;
+	export let el: $$Props["el"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+
+	let attrs: Record<string, unknown>;
+
+	$: attrs = {
+		class: cn("transition-colors hover:text-foreground", className),
+		href,
+		...$$restProps,
+	};
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<a bind:this={el} {...attrs} {href}>
+		<slot {attrs} />
+	</a>
+{/if}
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-list.svelte b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-list.svelte
new file mode 100644
index 000000000..7f361415c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-list.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLOlAttributes & {
+		el?: HTMLOListElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ol
+	bind:this={el}
+	class={cn(
+		"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</ol>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-page.svelte b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-page.svelte
new file mode 100644
index 000000000..757f60e28
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement> & {
+		el?: HTMLSpanElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	export let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	bind:this={el}
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn("font-normal text-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-separator.svelte b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-separator.svelte
new file mode 100644
index 000000000..8af21874d
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb-separator.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<li
+	role="presentation"
+	aria-hidden="true"
+	class={cn("[&>svg]:size-3.5", className)}
+	bind:this={el}
+	{...$$restProps}
+>
+	<slot>
+		<ChevronRight />
+	</slot>
+</li>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb.svelte b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb.svelte
new file mode 100644
index 000000000..104f8b0a9
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLElement> & {
+		el?: HTMLElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
+	<slot />
+</nav>
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts b/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts
new file mode 100644
index 000000000..dc914ec34
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/index.ts
@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+	Root,
+	Ellipsis,
+	Item,
+	Separator,
+	Link,
+	List,
+	Page,
+	//
+	Root as Breadcrumb,
+	Ellipsis as BreadcrumbEllipsis,
+	Item as BreadcrumbItem,
+	Separator as BreadcrumbSeparator,
+	Link as BreadcrumbLink,
+	List as BreadcrumbList,
+	Page as BreadcrumbPage,
+};
diff --git a/apps/www/src/lib/registry/new-york/example/breadcrumb-demo.svelte b/apps/www/src/lib/registry/new-york/example/breadcrumb-demo.svelte
new file mode 100644
index 000000000..2bae777c0
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/breadcrumb-demo.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/new-york/ui/breadcrumb/index.js";
+	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger class="flex items-center gap-1">
+					<Breadcrumb.Ellipsis class="h-4 w-4" />
+					<span class="sr-only">Toggle menu</span>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="start">
+					<DropdownMenu.Item>Documentation</DropdownMenu.Item>
+					<DropdownMenu.Item>Themes</DropdownMenu.Item>
+					<DropdownMenu.Item>GitHub</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/new-york/example/breadcrumb-dropdown.svelte b/apps/www/src/lib/registry/new-york/example/breadcrumb-dropdown.svelte
new file mode 100644
index 000000000..a0869403f
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/breadcrumb-dropdown.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/new-york/ui/breadcrumb/index.js";
+	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
+	import ChevronDown from "svelte-radix/ChevronDown.svelte";
+	import Slash from "svelte-radix/Slash.svelte";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger class="flex items-center gap-1">
+					Components
+					<ChevronDown tabindex="-1" />
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="start">
+					<DropdownMenu.Item>Documentation</DropdownMenu.Item>
+					<DropdownMenu.Item>Themes</DropdownMenu.Item>
+					<DropdownMenu.Item>GitHub</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash tabindex="-1" />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/new-york/example/breadcrumb-ellipsis.svelte b/apps/www/src/lib/registry/new-york/example/breadcrumb-ellipsis.svelte
new file mode 100644
index 000000000..9bf309f2d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/breadcrumb-ellipsis.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/new-york/ui/breadcrumb/index.js";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Ellipsis />
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/new-york/example/breadcrumb-link.svelte b/apps/www/src/lib/registry/new-york/example/breadcrumb-link.svelte
new file mode 100644
index 000000000..1cab3b991
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/breadcrumb-link.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/new-york/ui/breadcrumb/index.js";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link asChild let:attrs>
+				<a href="/" {...attrs}>Home</a>
+			</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Link asChild let:attrs>
+				<a href="/components" {...attrs}>Components</a>
+			</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/new-york/example/breadcrumb-responsive.svelte b/apps/www/src/lib/registry/new-york/example/breadcrumb-responsive.svelte
new file mode 100644
index 000000000..115d9b539
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/breadcrumb-responsive.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/new-york/ui/breadcrumb/index.js";
+	import * as Drawer from "$lib/registry/new-york/ui/drawer/index.js";
+	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
+	import { Button } from "$lib/registry/new-york/ui/button/index.js";
+	import { mediaQuery } from "svelte-legos";
+
+	const items = [
+		{ href: "#", label: "Home" },
+		{ href: "#", label: "Documentation" },
+		{ href: "#", label: "Building Your Application" },
+		{ href: "#", label: "Data Fetching" },
+		{ label: "Caching and Revalidating" },
+	];
+
+	const ITEMS_TO_DISPLAY = 3;
+
+	let open = false;
+
+	const isDesktop = mediaQuery("(min-width: 768px)");
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href={items[0].href}>
+				{items[0].label}
+			</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		{#if items.length > ITEMS_TO_DISPLAY}
+			<Breadcrumb.Item>
+				{#if $isDesktop}
+					<DropdownMenu.Root bind:open>
+						<DropdownMenu.Trigger
+							class="flex items-center gap-1"
+							aria-label="Toggle menu"
+						>
+							<Breadcrumb.Ellipsis class="h-4 w-4" />
+						</DropdownMenu.Trigger>
+						<DropdownMenu.Content align="start">
+							{#each items.slice(1, -2) as item}
+								<DropdownMenu.Item href={item.href ? item.href : "#"}>
+									{item.label}
+								</DropdownMenu.Item>
+							{/each}
+						</DropdownMenu.Content>
+					</DropdownMenu.Root>
+				{:else}
+					<Drawer.Root bind:open>
+						<Drawer.Trigger aria-label="Toggle Menu">
+							<Breadcrumb.Ellipsis class="h-4 w-4" />
+						</Drawer.Trigger>
+						<Drawer.Content>
+							<Drawer.Header class="text-left">
+								<Drawer.Title>Navigate to</Drawer.Title>
+								<Drawer.Description>
+									Select a page to navigate to.
+								</Drawer.Description>
+							</Drawer.Header>
+							<div class="grid gap-1 px-4">
+								{#each items.slice(1, -2) as item}
+									<a href={item.href ? item.href : "#"} class="py-1 text-sm">
+										{item.label}
+									</a>
+								{/each}
+							</div>
+							<Drawer.Footer class="pt-4">
+								<Drawer.Close asChild let:builder>
+									<Button variant="outline" builders={[builder]}>Close</Button>
+								</Drawer.Close>
+							</Drawer.Footer>
+						</Drawer.Content>
+					</Drawer.Root>
+				{/if}
+			</Breadcrumb.Item>
+			<Breadcrumb.Separator />
+		{/if}
+
+		{#each items.slice(-ITEMS_TO_DISPLAY + 1) as item}
+			<Breadcrumb.Item>
+				{#if item.href}
+					<Breadcrumb.Link href={item.href} class="max-w-20 truncate md:max-w-none">
+						{item.label}
+					</Breadcrumb.Link>
+					<Breadcrumb.Separator />
+				{:else}
+					<Breadcrumb.Page class="max-w-20 truncate md:max-w-none">
+						{item.label}
+					</Breadcrumb.Page>
+				{/if}
+			</Breadcrumb.Item>
+		{/each}
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/new-york/example/breadcrumb-separator.svelte b/apps/www/src/lib/registry/new-york/example/breadcrumb-separator.svelte
new file mode 100644
index 000000000..37dd2d294
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/breadcrumb-separator.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import * as Breadcrumb from "$lib/registry/default/ui/breadcrumb/index.js";
+	import Slash from "svelte-radix/Slash.svelte";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash tabindex="-1" />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator>
+			<Slash tabindex="-1" />
+		</Breadcrumb.Separator>
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-ellipsis.svelte b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-ellipsis.svelte
new file mode 100644
index 000000000..d733e9bce
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-ellipsis.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import DotsHorizontal from "svelte-radix/DotsHorizontal.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement> & {
+		el?: HTMLSpanElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	bind:this={el}
+	role="presentation"
+	aria-hidden="true"
+	class={cn("flex h-9 w-9 items-center justify-center", className)}
+	{...$$restProps}
+>
+	<DotsHorizontal class="h-4 w-4 outline-none" tabindex="-1" />
+	<span class="sr-only">More</span>
+</span>
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-item.svelte b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-item.svelte
new file mode 100644
index 000000000..8e8b187ec
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-item.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<li bind:this={el} class={cn("inline-flex items-center gap-1.5", className)}>
+	<slot />
+</li>
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-link.svelte b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-link.svelte
new file mode 100644
index 000000000..e74376846
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-link.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAnchorAttributes & {
+		el?: HTMLAnchorElement;
+		asChild?: boolean;
+	};
+
+	export let href: $$Props["href"] = undefined;
+	export let el: $$Props["el"] = undefined;
+	export let asChild: $$Props["asChild"] = false;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+
+	let attrs: Record<string, unknown>;
+
+	$: attrs = {
+		class: cn("transition-colors hover:text-foreground", className),
+		href,
+		...$$restProps,
+	};
+</script>
+
+{#if asChild}
+	<slot {attrs} />
+{:else}
+	<a bind:this={el} {...attrs} {href}>
+		<slot {attrs} />
+	</a>
+{/if}
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-list.svelte b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-list.svelte
new file mode 100644
index 000000000..7f361415c
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-list.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLOlAttributes & {
+		el?: HTMLOListElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<ol
+	bind:this={el}
+	class={cn(
+		"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</ol>
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-page.svelte b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-page.svelte
new file mode 100644
index 000000000..757f60e28
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-page.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLSpanElement> & {
+		el?: HTMLSpanElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	export let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<span
+	bind:this={el}
+	role="link"
+	aria-disabled="true"
+	aria-current="page"
+	class={cn("font-normal text-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</span>
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-separator.svelte b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-separator.svelte
new file mode 100644
index 000000000..681ef9936
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb-separator.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import ChevronRight from "svelte-radix/ChevronRight.svelte";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLLiAttributes & {
+		el?: HTMLLIElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<li
+	role="presentation"
+	aria-hidden="true"
+	class={cn("[&>svg]:size-3.5", className)}
+	bind:this={el}
+	{...$$restProps}
+>
+	<slot>
+		<ChevronRight tabindex="-1" />
+	</slot>
+</li>
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb.svelte b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb.svelte
new file mode 100644
index 000000000..104f8b0a9
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/breadcrumb.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+
+	type $$Props = HTMLAttributes<HTMLElement> & {
+		el?: HTMLElement;
+	};
+
+	export let el: $$Props["el"] = undefined;
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<nav class={className} bind:this={el} aria-label="breadcrumb" {...$$restProps}>
+	<slot />
+</nav>
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts b/apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts
new file mode 100644
index 000000000..dc914ec34
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/index.ts
@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+	Root,
+	Ellipsis,
+	Item,
+	Separator,
+	Link,
+	List,
+	Page,
+	//
+	Root as Breadcrumb,
+	Ellipsis as BreadcrumbEllipsis,
+	Item as BreadcrumbItem,
+	Separator as BreadcrumbSeparator,
+	Link as BreadcrumbLink,
+	List as BreadcrumbList,
+	Page as BreadcrumbPage,
+};
diff --git a/apps/www/static/registry/index.json b/apps/www/static/registry/index.json
index 7c151b258..96ded6ddb 100644
--- a/apps/www/static/registry/index.json
+++ b/apps/www/static/registry/index.json
@@ -83,6 +83,22 @@
 		],
 		"type": "components:ui"
 	},
+	{
+		"name": "breadcrumb",
+		"dependencies": [],
+		"registryDependencies": [],
+		"files": [
+			"ui/breadcrumb/breadcrumb-ellipsis.svelte",
+			"ui/breadcrumb/breadcrumb-item.svelte",
+			"ui/breadcrumb/breadcrumb-link.svelte",
+			"ui/breadcrumb/breadcrumb-list.svelte",
+			"ui/breadcrumb/breadcrumb-page.svelte",
+			"ui/breadcrumb/breadcrumb-separator.svelte",
+			"ui/breadcrumb/breadcrumb.svelte",
+			"ui/breadcrumb/index.ts"
+		],
+		"type": "components:ui"
+	},
 	{
 		"name": "button",
 		"dependencies": [
diff --git a/apps/www/static/registry/styles/default-js/breadcrumb.json b/apps/www/static/registry/styles/default-js/breadcrumb.json
new file mode 100644
index 000000000..ecd103848
--- /dev/null
+++ b/apps/www/static/registry/styles/default-js/breadcrumb.json
@@ -0,0 +1,40 @@
+{
+	"name": "breadcrumb",
+	"dependencies": [],
+	"registryDependencies": [],
+	"files": [
+		{
+			"name": "breadcrumb-ellipsis.svelte",
+			"content": "<script>\n\timport MoreHorizontal from \"lucide-svelte/icons/more-horizontal\";\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<span\n\tbind:this={el}\n\trole=\"presentation\"\n\taria-hidden=\"true\"\n\tclass={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n\t{...$$restProps}\n>\n\t<MoreHorizontal class=\"h-4 w-4\" />\n\t<span class=\"sr-only\">More</span>\n</span>\n"
+		},
+		{
+			"name": "breadcrumb-item.svelte",
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<li bind:this={el} class={cn(\"inline-flex items-center gap-1.5\", className)}>\n\t<slot />\n</li>\n"
+		},
+		{
+			"name": "breadcrumb-link.svelte",
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\texport let href = undefined;\n\texport let el = undefined;\n\texport let asChild = false;\n\tlet className = undefined;\n\texport { className as class };\n\tlet attrs;\n\t$: attrs = {\n\t\tclass: cn(\"transition-colors hover:text-foreground\", className),\n\t\thref,\n\t\t...$$restProps,\n\t};\n</script>\n\n{#if asChild}\n\t<slot {attrs} />\n{:else}\n\t<a bind:this={el} {...attrs} {href}>\n\t\t<slot {attrs} />\n\t</a>\n{/if}\n"
+		},
+		{
+			"name": "breadcrumb-list.svelte",
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<ol\n\tbind:this={el}\n\tclass={cn(\n\t\t\"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5\",\n\t\tclassName\n\t)}\n\t{...$$restProps}\n>\n\t<slot />\n</ol>\n"
+		},
+		{
+			"name": "breadcrumb-page.svelte",
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\texport let className = undefined;\n\texport { className as class };\n</script>\n\n<span\n\tbind:this={el}\n\trole=\"link\"\n\taria-disabled=\"true\"\n\taria-current=\"page\"\n\tclass={cn(\"text-foreground font-normal\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</span>\n"
+		},
+		{
+			"name": "breadcrumb-separator.svelte",
+			"content": "<script>\n\timport ChevronRight from \"lucide-svelte/icons/chevron-right\";\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<li\n\trole=\"presentation\"\n\taria-hidden=\"true\"\n\tclass={cn(\"[&>svg]:size-3.5\", className)}\n\tbind:this={el}\n\t{...$$restProps}\n>\n\t<slot>\n\t\t<ChevronRight />\n\t</slot>\n</li>\n"
+		},
+		{
+			"name": "breadcrumb.svelte",
+			"content": "<script>\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<nav class={className} bind:this={el} aria-label=\"breadcrumb\" {...$$restProps}>\n\t<slot />\n</nav>\n"
+		},
+		{
+			"name": "index.js",
+			"content": "import Root from \"./breadcrumb.svelte\";\nimport Ellipsis from \"./breadcrumb-ellipsis.svelte\";\nimport Item from \"./breadcrumb-item.svelte\";\nimport Separator from \"./breadcrumb-separator.svelte\";\nimport Link from \"./breadcrumb-link.svelte\";\nimport List from \"./breadcrumb-list.svelte\";\nimport Page from \"./breadcrumb-page.svelte\";\nexport {\n\tRoot,\n\tEllipsis,\n\tItem,\n\tSeparator,\n\tLink,\n\tList,\n\tPage,\n\t//\n\tRoot as Breadcrumb,\n\tEllipsis as BreadcrumbEllipsis,\n\tItem as BreadcrumbItem,\n\tSeparator as BreadcrumbSeparator,\n\tLink as BreadcrumbLink,\n\tList as BreadcrumbList,\n\tPage as BreadcrumbPage,\n};\n"
+		}
+	],
+	"type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/static/registry/styles/default/breadcrumb.json b/apps/www/static/registry/styles/default/breadcrumb.json
new file mode 100644
index 000000000..71b1ad86c
--- /dev/null
+++ b/apps/www/static/registry/styles/default/breadcrumb.json
@@ -0,0 +1,40 @@
+{
+	"name": "breadcrumb",
+	"dependencies": [],
+	"registryDependencies": [],
+	"files": [
+		{
+			"name": "breadcrumb-ellipsis.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport MoreHorizontal from \"lucide-svelte/icons/more-horizontal\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAttributes<HTMLSpanElement> & {\n\t\tel?: HTMLSpanElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<span\n\tbind:this={el}\n\trole=\"presentation\"\n\taria-hidden=\"true\"\n\tclass={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n\t{...$$restProps}\n>\n\t<MoreHorizontal class=\"h-4 w-4\" />\n\t<span class=\"sr-only\">More</span>\n</span>\n"
+		},
+		{
+			"name": "breadcrumb-item.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLLiAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLLiAttributes & {\n\t\tel?: HTMLLIElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<li bind:this={el} class={cn(\"inline-flex items-center gap-1.5\", className)}>\n\t<slot />\n</li>\n"
+		},
+		{
+			"name": "breadcrumb-link.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAnchorAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAnchorAttributes & {\n\t\tel?: HTMLAnchorElement;\n\t\tasChild?: boolean;\n\t};\n\n\texport let href: $$Props[\"href\"] = undefined;\n\texport let el: $$Props[\"el\"] = undefined;\n\texport let asChild: $$Props[\"asChild\"] = false;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n\n\tlet attrs: Record<string, unknown>;\n\n\t$: attrs = {\n\t\tclass: cn(\"transition-colors hover:text-foreground\", className),\n\t\thref,\n\t\t...$$restProps,\n\t};\n</script>\n\n{#if asChild}\n\t<slot {attrs} />\n{:else}\n\t<a bind:this={el} {...attrs} {href}>\n\t\t<slot {attrs} />\n\t</a>\n{/if}\n"
+		},
+		{
+			"name": "breadcrumb-list.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLOlAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLOlAttributes & {\n\t\tel?: HTMLOListElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<ol\n\tbind:this={el}\n\tclass={cn(\n\t\t\"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5\",\n\t\tclassName\n\t)}\n\t{...$$restProps}\n>\n\t<slot />\n</ol>\n"
+		},
+		{
+			"name": "breadcrumb-page.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAttributes<HTMLSpanElement> & {\n\t\tel?: HTMLSpanElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\texport let className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<span\n\tbind:this={el}\n\trole=\"link\"\n\taria-disabled=\"true\"\n\taria-current=\"page\"\n\tclass={cn(\"text-foreground font-normal\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</span>\n"
+		},
+		{
+			"name": "breadcrumb-separator.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLLiAttributes } from \"svelte/elements\";\n\timport ChevronRight from \"lucide-svelte/icons/chevron-right\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLLiAttributes & {\n\t\tel?: HTMLLIElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<li\n\trole=\"presentation\"\n\taria-hidden=\"true\"\n\tclass={cn(\"[&>svg]:size-3.5\", className)}\n\tbind:this={el}\n\t{...$$restProps}\n>\n\t<slot>\n\t\t<ChevronRight />\n\t</slot>\n</li>\n"
+		},
+		{
+			"name": "breadcrumb.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\ttype $$Props = HTMLAttributes<HTMLElement> & {\n\t\tel?: HTMLElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<nav class={className} bind:this={el} aria-label=\"breadcrumb\" {...$$restProps}>\n\t<slot />\n</nav>\n"
+		},
+		{
+			"name": "index.ts",
+			"content": "import Root from './breadcrumb.svelte'\nimport Ellipsis from './breadcrumb-ellipsis.svelte'\nimport Item from './breadcrumb-item.svelte'\nimport Separator from './breadcrumb-separator.svelte'\nimport Link from './breadcrumb-link.svelte'\nimport List from './breadcrumb-list.svelte'\nimport Page from './breadcrumb-page.svelte'\n\n\nexport {\n\tRoot,\n\tEllipsis,\n\tItem,\n\tSeparator,\n\tLink,\n\tList,\n\tPage,\n\t//\n\tRoot as Breadcrumb,\n\tEllipsis as BreadcrumbEllipsis,\n\tItem as BreadcrumbItem,\n\tSeparator as BreadcrumbSeparator,\n\tLink as BreadcrumbLink,\n\tList as BreadcrumbList,\n\tPage as BreadcrumbPage,\n}\n"
+		}
+	],
+	"type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/static/registry/styles/new-york-js/breadcrumb.json b/apps/www/static/registry/styles/new-york-js/breadcrumb.json
new file mode 100644
index 000000000..66a934679
--- /dev/null
+++ b/apps/www/static/registry/styles/new-york-js/breadcrumb.json
@@ -0,0 +1,40 @@
+{
+	"name": "breadcrumb",
+	"dependencies": [],
+	"registryDependencies": [],
+	"files": [
+		{
+			"name": "breadcrumb-ellipsis.svelte",
+			"content": "<script>\n\timport DotsHorizontal from \"svelte-radix/DotsHorizontal.svelte\";\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<span\n\tbind:this={el}\n\trole=\"presentation\"\n\taria-hidden=\"true\"\n\tclass={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n\t{...$$restProps}\n>\n\t<DotsHorizontal class=\"h-4 w-4 outline-none\" tabindex=\"-1\" />\n\t<span class=\"sr-only\">More</span>\n</span>\n"
+		},
+		{
+			"name": "breadcrumb-item.svelte",
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<li bind:this={el} class={cn(\"inline-flex items-center gap-1.5\", className)}>\n\t<slot />\n</li>\n"
+		},
+		{
+			"name": "breadcrumb-link.svelte",
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\texport let href = undefined;\n\texport let el = undefined;\n\texport let asChild = false;\n\tlet className = undefined;\n\texport { className as class };\n\tlet attrs;\n\t$: attrs = {\n\t\tclass: cn(\"transition-colors hover:text-foreground\", className),\n\t\thref,\n\t\t...$$restProps,\n\t};\n</script>\n\n{#if asChild}\n\t<slot {attrs} />\n{:else}\n\t<a bind:this={el} {...attrs} {href}>\n\t\t<slot {attrs} />\n\t</a>\n{/if}\n"
+		},
+		{
+			"name": "breadcrumb-list.svelte",
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<ol\n\tbind:this={el}\n\tclass={cn(\n\t\t\"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5\",\n\t\tclassName\n\t)}\n\t{...$$restProps}\n>\n\t<slot />\n</ol>\n"
+		},
+		{
+			"name": "breadcrumb-page.svelte",
+			"content": "<script>\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\texport let className = undefined;\n\texport { className as class };\n</script>\n\n<span\n\tbind:this={el}\n\trole=\"link\"\n\taria-disabled=\"true\"\n\taria-current=\"page\"\n\tclass={cn(\"text-foreground font-normal\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</span>\n"
+		},
+		{
+			"name": "breadcrumb-separator.svelte",
+			"content": "<script>\n\timport ChevronRight from \"svelte-radix/ChevronRight.svelte\";\n\timport { cn } from \"$lib/utils.js\";\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<li\n\trole=\"presentation\"\n\taria-hidden=\"true\"\n\tclass={cn(\"[&>svg]:size-3.5\", className)}\n\tbind:this={el}\n\t{...$$restProps}\n>\n\t<slot>\n\t\t<ChevronRight tabindex=\"-1\" />\n\t</slot>\n</li>\n"
+		},
+		{
+			"name": "breadcrumb.svelte",
+			"content": "<script>\n\texport let el = undefined;\n\tlet className = undefined;\n\texport { className as class };\n</script>\n\n<nav class={className} bind:this={el} aria-label=\"breadcrumb\" {...$$restProps}>\n\t<slot />\n</nav>\n"
+		},
+		{
+			"name": "index.js",
+			"content": "import Root from \"./breadcrumb.svelte\";\nimport Ellipsis from \"./breadcrumb-ellipsis.svelte\";\nimport Item from \"./breadcrumb-item.svelte\";\nimport Separator from \"./breadcrumb-separator.svelte\";\nimport Link from \"./breadcrumb-link.svelte\";\nimport List from \"./breadcrumb-list.svelte\";\nimport Page from \"./breadcrumb-page.svelte\";\nexport {\n\tRoot,\n\tEllipsis,\n\tItem,\n\tSeparator,\n\tLink,\n\tList,\n\tPage,\n\t//\n\tRoot as Breadcrumb,\n\tEllipsis as BreadcrumbEllipsis,\n\tItem as BreadcrumbItem,\n\tSeparator as BreadcrumbSeparator,\n\tLink as BreadcrumbLink,\n\tList as BreadcrumbList,\n\tPage as BreadcrumbPage,\n};\n"
+		}
+	],
+	"type": "components:ui"
+}
\ No newline at end of file
diff --git a/apps/www/static/registry/styles/new-york/breadcrumb.json b/apps/www/static/registry/styles/new-york/breadcrumb.json
new file mode 100644
index 000000000..845d40b9e
--- /dev/null
+++ b/apps/www/static/registry/styles/new-york/breadcrumb.json
@@ -0,0 +1,40 @@
+{
+	"name": "breadcrumb",
+	"dependencies": [],
+	"registryDependencies": [],
+	"files": [
+		{
+			"name": "breadcrumb-ellipsis.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport DotsHorizontal from \"svelte-radix/DotsHorizontal.svelte\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAttributes<HTMLSpanElement> & {\n\t\tel?: HTMLSpanElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<span\n\tbind:this={el}\n\trole=\"presentation\"\n\taria-hidden=\"true\"\n\tclass={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n\t{...$$restProps}\n>\n\t<DotsHorizontal class=\"h-4 w-4 outline-none\" tabindex=\"-1\" />\n\t<span class=\"sr-only\">More</span>\n</span>\n"
+		},
+		{
+			"name": "breadcrumb-item.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLLiAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLLiAttributes & {\n\t\tel?: HTMLLIElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<li bind:this={el} class={cn(\"inline-flex items-center gap-1.5\", className)}>\n\t<slot />\n</li>\n"
+		},
+		{
+			"name": "breadcrumb-link.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAnchorAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAnchorAttributes & {\n\t\tel?: HTMLAnchorElement;\n\t\tasChild?: boolean;\n\t};\n\n\texport let href: $$Props[\"href\"] = undefined;\n\texport let el: $$Props[\"el\"] = undefined;\n\texport let asChild: $$Props[\"asChild\"] = false;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n\n\tlet attrs: Record<string, unknown>;\n\n\t$: attrs = {\n\t\tclass: cn(\"transition-colors hover:text-foreground\", className),\n\t\thref,\n\t\t...$$restProps,\n\t};\n</script>\n\n{#if asChild}\n\t<slot {attrs} />\n{:else}\n\t<a bind:this={el} {...attrs} {href}>\n\t\t<slot {attrs} />\n\t</a>\n{/if}\n"
+		},
+		{
+			"name": "breadcrumb-list.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLOlAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLOlAttributes & {\n\t\tel?: HTMLOListElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<ol\n\tbind:this={el}\n\tclass={cn(\n\t\t\"text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5\",\n\t\tclassName\n\t)}\n\t{...$$restProps}\n>\n\t<slot />\n</ol>\n"
+		},
+		{
+			"name": "breadcrumb-page.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLAttributes<HTMLSpanElement> & {\n\t\tel?: HTMLSpanElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\texport let className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<span\n\tbind:this={el}\n\trole=\"link\"\n\taria-disabled=\"true\"\n\taria-current=\"page\"\n\tclass={cn(\"text-foreground font-normal\", className)}\n\t{...$$restProps}\n>\n\t<slot />\n</span>\n"
+		},
+		{
+			"name": "breadcrumb-separator.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLLiAttributes } from \"svelte/elements\";\n\timport ChevronRight from \"svelte-radix/ChevronRight.svelte\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = HTMLLiAttributes & {\n\t\tel?: HTMLLIElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<li\n\trole=\"presentation\"\n\taria-hidden=\"true\"\n\tclass={cn(\"[&>svg]:size-3.5\", className)}\n\tbind:this={el}\n\t{...$$restProps}\n>\n\t<slot>\n\t\t<ChevronRight tabindex=\"-1\" />\n\t</slot>\n</li>\n"
+		},
+		{
+			"name": "breadcrumb.svelte",
+			"content": "<script lang=\"ts\">\n\timport type { HTMLAttributes } from \"svelte/elements\";\n\n\ttype $$Props = HTMLAttributes<HTMLElement> & {\n\t\tel?: HTMLElement;\n\t};\n\n\texport let el: $$Props[\"el\"] = undefined;\n\tlet className: $$Props[\"class\"] = undefined;\n\texport { className as class };\n</script>\n\n<nav class={className} bind:this={el} aria-label=\"breadcrumb\" {...$$restProps}>\n\t<slot />\n</nav>\n"
+		},
+		{
+			"name": "index.ts",
+			"content": "import Root from './breadcrumb.svelte'\nimport Ellipsis from './breadcrumb-ellipsis.svelte'\nimport Item from './breadcrumb-item.svelte'\nimport Separator from './breadcrumb-separator.svelte'\nimport Link from './breadcrumb-link.svelte'\nimport List from './breadcrumb-list.svelte'\nimport Page from './breadcrumb-page.svelte'\n\n\nexport {\n\tRoot,\n\tEllipsis,\n\tItem,\n\tSeparator,\n\tLink,\n\tList,\n\tPage,\n\t//\n\tRoot as Breadcrumb,\n\tEllipsis as BreadcrumbEllipsis,\n\tItem as BreadcrumbItem,\n\tSeparator as BreadcrumbSeparator,\n\tLink as BreadcrumbLink,\n\tList as BreadcrumbList,\n\tPage as BreadcrumbPage,\n}\n"
+		}
+	],
+	"type": "components:ui"
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 047210360..362f15fbb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -196,8 +196,8 @@ importers:
         specifier: 1.3.6-beta.1
         version: 1.3.6-beta.1
       bits-ui:
-        specifier: 0.19.3
-        version: 0.19.3(svelte@4.2.12)
+        specifier: 0.19.6
+        version: 0.19.6(svelte@4.2.12)
       clsx:
         specifier: ^2.1.0
         version: 2.1.0
@@ -2183,8 +2183,8 @@ packages:
       svelte: 4.2.12
     dev: false
 
-  /@melt-ui/svelte@0.75.2(svelte@4.2.12):
-    resolution: {integrity: sha512-EZYH5iEzHs/CPsWqRlH6AnJ70sTuPB4llVK3ajafWig6I5q3qyGU8NIz4aozUssL0edf9BKmyDVAy6Vksy1fbA==}
+  /@melt-ui/svelte@0.76.0(svelte@4.2.12):
+    resolution: {integrity: sha512-X1ktxKujjLjOBt8LBvfckHGDMrkHWceRt1jdsUTf0EH76ikNPP1ofSoiV0IhlduDoCBV+2YchJ8kXCDfDXfC9Q==}
     peerDependencies:
       svelte: '>=3 <5'
     dependencies:
@@ -3420,13 +3420,13 @@ packages:
       svelte: 4.2.12
     dev: false
 
-  /bits-ui@0.19.3(svelte@4.2.12):
-    resolution: {integrity: sha512-0qqZ1bwE4ZmTnzTdsl4mYEbHY5f0NVgxhddIqscLjJZx4ltkVKDXxBwEusbE2NToqKtXNNrU0wy7sLusdzdhcg==}
+  /bits-ui@0.19.6(svelte@4.2.12):
+    resolution: {integrity: sha512-ZKWHa1Vt8YW7DdooeNleVdtOtk9hxXZIo8El0myqn7r8S8OkJaSPXhQn/jp4/Q6BphYxZ2Tatqb/WLphmrSfUg==}
     peerDependencies:
       svelte: ^4.0.0
     dependencies:
       '@internationalized/date': 3.5.2
-      '@melt-ui/svelte': 0.75.2(svelte@4.2.12)
+      '@melt-ui/svelte': 0.76.0(svelte@4.2.12)
       nanoid: 5.0.6
       svelte: 4.2.12
     dev: false