diff --git a/apps/www/src/lib/components/docs/dashboard/recent-sales.svelte b/apps/www/src/lib/components/docs/dashboard/recent-sales.svelte
index 5be509f35..2e00274c5 100644
--- a/apps/www/src/lib/components/docs/dashboard/recent-sales.svelte
+++ b/apps/www/src/lib/components/docs/dashboard/recent-sales.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Avatar from "$lib/registry/new-york/ui/avatar/index.js";
 </script>
 
 <div class="space-y-8">
 	<div class="flex items-center">
 		<Avatar.Root class="h-9 w-9">
-			<Avatar.Image src={Avatars.Img1} alt="Avatar" />
+			<Avatar.Image src={AvatarImgs[0]} alt="Avatar" />
 			<Avatar.Fallback>OM</Avatar.Fallback>
 		</Avatar.Root>
 		<div class="ml-4 space-y-1">
@@ -17,7 +17,7 @@
 	</div>
 	<div class="flex items-center">
 		<Avatar.Root class="flex h-9 w-9 items-center justify-center space-y-0 border">
-			<Avatar.Image src={Avatars.Img2} alt="Avatar" />
+			<Avatar.Image src={AvatarImgs[1]} alt="Avatar" />
 			<Avatar.Fallback>JL</Avatar.Fallback>
 		</Avatar.Root>
 		<div class="ml-4 space-y-1">
@@ -28,7 +28,7 @@
 	</div>
 	<div class="flex items-center">
 		<Avatar.Root class="h-9 w-9">
-			<Avatar.Image src={Avatars.Img3} alt="Avatar" />
+			<Avatar.Image src={AvatarImgs[2]} alt="Avatar" />
 			<Avatar.Fallback>IN</Avatar.Fallback>
 		</Avatar.Root>
 		<div class="ml-4 space-y-1">
@@ -39,7 +39,7 @@
 	</div>
 	<div class="flex items-center">
 		<Avatar.Root class="h-9 w-9">
-			<Avatar.Image src={Avatars.Img4} alt="Avatar" />
+			<Avatar.Image src={AvatarImgs[3]} alt="Avatar" />
 			<Avatar.Fallback>WK</Avatar.Fallback>
 		</Avatar.Root>
 		<div class="ml-4 space-y-1">
@@ -50,7 +50,7 @@
 	</div>
 	<div class="flex items-center">
 		<Avatar.Root class="h-9 w-9">
-			<Avatar.Image src={Avatars.Img5} alt="Avatar" />
+			<Avatar.Image src={AvatarImgs[4]} alt="Avatar" />
 			<Avatar.Fallback>SD</Avatar.Fallback>
 		</Avatar.Root>
 		<div class="ml-4 space-y-1">
diff --git a/apps/www/src/lib/components/docs/dashboard/user-nav.svelte b/apps/www/src/lib/components/docs/dashboard/user-nav.svelte
index 6bf9bf65f..89f70a094 100644
--- a/apps/www/src/lib/components/docs/dashboard/user-nav.svelte
+++ b/apps/www/src/lib/components/docs/dashboard/user-nav.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
 	import * as Avatar from "$lib/registry/new-york/ui/avatar/index.js";
 	import { Button } from "$lib/registry/new-york/ui/button/index.js";
@@ -9,7 +9,7 @@
 	<DropdownMenu.Trigger asChild let:builder>
 		<Button variant="ghost" builders={[builder]} class="relative h-8 w-8 rounded-full">
 			<Avatar.Root class="h-8 w-8">
-				<Avatar.Image src={Avatars.Img1} alt="@shadcn" />
+				<Avatar.Image src={AvatarImgs[0]} alt="@shadcn" />
 				<Avatar.Fallback>SC</Avatar.Fallback>
 			</Avatar.Root>
 		</Button>
diff --git a/apps/www/src/lib/img/avatars/index.ts b/apps/www/src/lib/img/avatars/index.ts
index 11ac72088..923a9dddc 100644
--- a/apps/www/src/lib/img/avatars/index.ts
+++ b/apps/www/src/lib/img/avatars/index.ts
@@ -1,5 +1,7 @@
-export { default as Img1 } from "./01.png";
-export { default as Img2 } from "./02.png";
-export { default as Img3 } from "./03.png";
-export { default as Img4 } from "./04.png";
-export { default as Img5 } from "./05.png";
+import Img1 from "./01.png";
+import Img2 from "./02.png";
+import Img3 from "./03.png";
+import Img4 from "./04.png";
+import Img5 from "./05.png";
+
+export default [Img1, Img2, Img3, Img4, Img5] as const;
diff --git a/apps/www/src/lib/registry/default/example/cards/chat.svelte b/apps/www/src/lib/registry/default/example/cards/chat.svelte
index d2300cd4d..c9ab36b55 100644
--- a/apps/www/src/lib/registry/default/example/cards/chat.svelte
+++ b/apps/www/src/lib/registry/default/example/cards/chat.svelte
@@ -3,7 +3,7 @@
 	import Send from "lucide-svelte/icons/send";
 	import Plus from "lucide-svelte/icons/plus";
 	import { cn } from "$lib/utils.js";
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Avatar from "$lib/registry/default/ui/avatar/index.js";
 	import * as Card from "$lib/registry/default/ui/card/index.js";
 	import * as Command from "$lib/registry/default/ui/command/index.js";
@@ -16,27 +16,27 @@
 		{
 			name: "Olivia Martin",
 			email: "m@example.com",
-			avatar: Avatars.Img1,
+			avatar: AvatarImgs[0],
 		},
 		{
 			name: "Isabella Nguyen",
 			email: "isabella.nguyen@email.com",
-			avatar: Avatars.Img3,
+			avatar: AvatarImgs[2],
 		},
 		{
 			name: "Emma Wilson",
 			email: "emma@example.com",
-			avatar: Avatars.Img5,
+			avatar: AvatarImgs[4],
 		},
 		{
 			name: "Jackson Lee",
 			email: "lee@example.com",
-			avatar: Avatars.Img2,
+			avatar: AvatarImgs[1],
 		},
 		{
 			name: "William Kim",
 			email: "will@email.com",
-			avatar: Avatars.Img4,
+			avatar: AvatarImgs[3],
 		},
 	] as const;
 
@@ -72,7 +72,7 @@
 	<Card.Header class="flex flex-row items-center">
 		<div class="flex items-center space-x-4">
 			<Avatar.Root>
-				<Avatar.Image src={Avatars.Img1} alt="Image" />
+				<Avatar.Image src={AvatarImgs[0]} alt="Image" />
 				<Avatar.Fallback>OM</Avatar.Fallback>
 			</Avatar.Root>
 			<div>
diff --git a/apps/www/src/lib/registry/default/example/cards/share.svelte b/apps/www/src/lib/registry/default/example/cards/share.svelte
index 43b6b5dc8..cecafd29f 100644
--- a/apps/www/src/lib/registry/default/example/cards/share.svelte
+++ b/apps/www/src/lib/registry/default/example/cards/share.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Avatar from "$lib/registry/default/ui/avatar/index.js";
 	import { Button } from "$lib/registry/default/ui/button/index.js";
 	import * as Card from "$lib/registry/default/ui/card/index.js";
@@ -22,19 +22,19 @@
 		{
 			name: "Olivia Martin",
 			email: "m@example.com",
-			avatar: Avatars.Img3,
+			avatar: AvatarImgs[2],
 			permission: permissions[1],
 		},
 		{
 			name: "Isabella Nguyen",
 			email: "b@example.com",
-			avatar: Avatars.Img5,
+			avatar: AvatarImgs[4],
 			permission: permissions[0],
 		},
 		{
 			name: "Sofia Davis",
 			email: "p@example.com",
-			avatar: Avatars.Img1,
+			avatar: AvatarImgs[0],
 			permission: permissions[0],
 		},
 	];
diff --git a/apps/www/src/lib/registry/default/example/cards/team-members.svelte b/apps/www/src/lib/registry/default/example/cards/team-members.svelte
index 33ed6cd72..8b7de4e50 100644
--- a/apps/www/src/lib/registry/default/example/cards/team-members.svelte
+++ b/apps/www/src/lib/registry/default/example/cards/team-members.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ChevronDownIcon from "lucide-svelte/icons/chevron-down";
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Card from "$lib/registry/default/ui/card/index.js";
 	import * as Avatar from "$lib/registry/default/ui/avatar/index.js";
 	import * as Popover from "$lib/registry/default/ui/popover/index.js";
@@ -17,7 +17,7 @@
 		<div class="flex items-center justify-between space-x-4">
 			<div class="flex items-center space-x-4">
 				<Avatar.Root class="h-8 w-8">
-					<Avatar.Image src={Avatars.Img1} alt="Image" />
+					<Avatar.Image src={AvatarImgs[0]} alt="Image" />
 					<Avatar.Fallback>OM</Avatar.Fallback>
 				</Avatar.Root>
 				<div>
@@ -79,7 +79,7 @@
 		<div class="flex items-center justify-between space-x-4">
 			<div class="flex items-center space-x-4">
 				<Avatar.Root class="h-8 w-8">
-					<Avatar.Image src={Avatars.Img2} alt="Image" />
+					<Avatar.Image src={AvatarImgs[1]} alt="Image" />
 					<Avatar.Fallback>JL</Avatar.Fallback>
 				</Avatar.Root>
 				<div>
@@ -141,7 +141,7 @@
 		<div class="flex items-center justify-between space-x-4">
 			<div class="flex items-center space-x-4">
 				<Avatar.Root class="h-8 w-8">
-					<Avatar.Image src={Avatars.Img3} alt="Image" />
+					<Avatar.Image src={AvatarImgs[2]} alt="Image" />
 					<Avatar.Fallback>IN</Avatar.Fallback>
 				</Avatar.Root>
 				<div>
diff --git a/apps/www/src/lib/registry/new-york/example/cards/chat.svelte b/apps/www/src/lib/registry/new-york/example/cards/chat.svelte
index d10dfef58..fbf5fa0a0 100644
--- a/apps/www/src/lib/registry/new-york/example/cards/chat.svelte
+++ b/apps/www/src/lib/registry/new-york/example/cards/chat.svelte
@@ -3,7 +3,7 @@
 	import PaperPlane from "svelte-radix/PaperPlane.svelte";
 	import Plus from "svelte-radix/Plus.svelte";
 	import { cn } from "$lib/utils.js";
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Avatar from "$lib/registry/new-york/ui/avatar/index.js";
 	import * as Card from "$lib/registry/new-york/ui/card/index.js";
 	import * as Command from "$lib/registry/new-york/ui/command/index.js";
@@ -16,27 +16,27 @@
 		{
 			name: "Olivia Martin",
 			email: "m@example.com",
-			avatar: Avatars.Img1,
+			avatar: AvatarImgs[0],
 		},
 		{
 			name: "Isabella Nguyen",
 			email: "isabella.nguyen@email.com",
-			avatar: Avatars.Img3,
+			avatar: AvatarImgs[2],
 		},
 		{
 			name: "Emma Wilson",
 			email: "emma@example.com",
-			avatar: Avatars.Img5,
+			avatar: AvatarImgs[4],
 		},
 		{
 			name: "Jackson Lee",
 			email: "lee@example.com",
-			avatar: Avatars.Img2,
+			avatar: AvatarImgs[1],
 		},
 		{
 			name: "William Kim",
 			email: "will@email.com",
-			avatar: Avatars.Img4,
+			avatar: AvatarImgs[3],
 		},
 	] as const;
 
@@ -72,7 +72,7 @@
 	<Card.Header class="flex flex-row items-center">
 		<div class="flex items-center space-x-4">
 			<Avatar.Root>
-				<Avatar.Image src={Avatars.Img1} alt="Image" />
+				<Avatar.Image src={AvatarImgs[0]} alt="Image" />
 				<Avatar.Fallback>OM</Avatar.Fallback>
 			</Avatar.Root>
 			<div>
diff --git a/apps/www/src/lib/registry/new-york/example/cards/share.svelte b/apps/www/src/lib/registry/new-york/example/cards/share.svelte
index 47fa0f2b9..661739786 100644
--- a/apps/www/src/lib/registry/new-york/example/cards/share.svelte
+++ b/apps/www/src/lib/registry/new-york/example/cards/share.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Avatar from "$lib/registry/new-york/ui/avatar/index.js";
 	import { Button } from "$lib/registry/new-york/ui/button/index.js";
 	import * as Card from "$lib/registry/new-york/ui/card/index.js";
@@ -22,19 +22,19 @@
 		{
 			name: "Olivia Martin",
 			email: "m@example.com",
-			avatar: Avatars.Img3,
+			avatar: AvatarImgs[2],
 			permission: permissions[1],
 		},
 		{
 			name: "Isabella Nguyen",
 			email: "b@example.com",
-			avatar: Avatars.Img5,
+			avatar: AvatarImgs[4],
 			permission: permissions[0],
 		},
 		{
 			name: "Sofia Davis",
 			email: "p@example.com",
-			avatar: Avatars.Img1,
+			avatar: AvatarImgs[0],
 			permission: permissions[0],
 		},
 	];
diff --git a/apps/www/src/lib/registry/new-york/example/cards/team-members.svelte b/apps/www/src/lib/registry/new-york/example/cards/team-members.svelte
index 4fd4065e3..7b3b44b52 100644
--- a/apps/www/src/lib/registry/new-york/example/cards/team-members.svelte
+++ b/apps/www/src/lib/registry/new-york/example/cards/team-members.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ChevronDown from "svelte-radix/ChevronDown.svelte";
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Card from "$lib/registry/new-york/ui/card/index.js";
 	import * as Avatar from "$lib/registry/new-york/ui/avatar/index.js";
 	import * as Popover from "$lib/registry/new-york/ui/popover/index.js";
@@ -17,7 +17,7 @@
 		<div class="flex items-center justify-between space-x-4">
 			<div class="flex items-center space-x-4">
 				<Avatar.Root class="h-8 w-8">
-					<Avatar.Image src={Avatars.Img1} alt="Image" />
+					<Avatar.Image src={AvatarImgs[0]} alt="Image" />
 					<Avatar.Fallback>OM</Avatar.Fallback>
 				</Avatar.Root>
 				<div>
@@ -79,7 +79,7 @@
 		<div class="flex items-center justify-between space-x-4">
 			<div class="flex items-center space-x-4">
 				<Avatar.Root class="h-8 w-8">
-					<Avatar.Image src={Avatars.Img2} alt="Image" />
+					<Avatar.Image src={AvatarImgs[1]} alt="Image" />
 					<Avatar.Fallback>JL</Avatar.Fallback>
 				</Avatar.Root>
 				<div>
@@ -141,7 +141,7 @@
 		<div class="flex items-center justify-between space-x-4">
 			<div class="flex items-center space-x-4">
 				<Avatar.Root class="h-8 w-8">
-					<Avatar.Image src={Avatars.Img3} alt="Image" />
+					<Avatar.Image src={AvatarImgs[2]} alt="Image" />
 					<Avatar.Fallback>IN</Avatar.Fallback>
 				</Avatar.Root>
 				<div>
diff --git a/apps/www/src/routes/examples/cards/(components)/share.svelte b/apps/www/src/routes/examples/cards/(components)/share.svelte
index 704037ac7..495ec4b5c 100644
--- a/apps/www/src/routes/examples/cards/(components)/share.svelte
+++ b/apps/www/src/routes/examples/cards/(components)/share.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Avatar from "$lib/registry/new-york/ui/avatar/index.js";
 	import { Button } from "$lib/registry/new-york/ui/button/index.js";
 	import * as Card from "$lib/registry/new-york/ui/card/index.js";
@@ -22,19 +22,19 @@
 		{
 			name: "Olivia Martin",
 			email: "m@example.com",
-			avatar: Avatars.Img3,
+			avatar: AvatarImgs[2],
 			permission: permissions[1],
 		},
 		{
 			name: "Isabella Nguyen",
 			email: "b@example.com",
-			avatar: Avatars.Img5,
+			avatar: AvatarImgs[4],
 			permission: permissions[0],
 		},
 		{
 			name: "Sofia Davis",
 			email: "p@example.com",
-			avatar: Avatars.Img1,
+			avatar: AvatarImgs[0],
 			permission: permissions[0],
 		},
 	];
diff --git a/apps/www/src/routes/examples/cards/(components)/team-members.svelte b/apps/www/src/routes/examples/cards/(components)/team-members.svelte
index d5bae1df0..c70d58303 100644
--- a/apps/www/src/routes/examples/cards/(components)/team-members.svelte
+++ b/apps/www/src/routes/examples/cards/(components)/team-members.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ChevronDown from "svelte-radix/ChevronDown.svelte";
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Avatar from "$lib/registry/new-york/ui/avatar/index.js";
 	import { Button } from "$lib/registry/new-york/ui/button/index.js";
 	import * as Card from "$lib/registry/new-york/ui/card/index.js";
@@ -17,7 +17,7 @@
 		<div class="flex items-center justify-between space-x-4">
 			<div class="flex items-center space-x-4">
 				<Avatar.Root>
-					<Avatar.Image src={Avatars.Img1} alt="Sofia Davis" />
+					<Avatar.Image src={AvatarImgs[0]} alt="Sofia Davis" />
 					<Avatar.Fallback>SD</Avatar.Fallback>
 				</Avatar.Root>
 				<div>
@@ -71,7 +71,7 @@
 		<div class="flex items-center justify-between space-x-4">
 			<div class="flex items-center space-x-4">
 				<Avatar.Root>
-					<Avatar.Image src={Avatars.Img2} alt="Jackson Lee" />
+					<Avatar.Image src={AvatarImgs[1]} alt="Jackson Lee" />
 					<Avatar.Fallback>JL</Avatar.Fallback>
 				</Avatar.Root>
 				<div>
diff --git a/apps/www/src/routes/examples/tasks/(components)/user-nav.svelte b/apps/www/src/routes/examples/tasks/(components)/user-nav.svelte
index 5b56793e4..614a93222 100644
--- a/apps/www/src/routes/examples/tasks/(components)/user-nav.svelte
+++ b/apps/www/src/routes/examples/tasks/(components)/user-nav.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import * as Avatars from "$lib/img/avatars/index.js";
+	import AvatarImgs from "$lib/img/avatars/index.js";
 	import * as Avatar from "$lib/registry/new-york/ui/avatar/index.js";
 	import { Button } from "$lib/registry/new-york/ui/button/index.js";
 	import * as DropdownMenu from "$lib/registry/new-york/ui/dropdown-menu/index.js";
@@ -9,7 +9,7 @@
 	<DropdownMenu.Trigger asChild let:builder>
 		<Button variant="ghost" builders={[builder]} class="relative h-8 w-8 rounded-full">
 			<Avatar.Root class="h-9 w-9">
-				<Avatar.Image src={Avatars.Img1} alt="@shadcn" />
+				<Avatar.Image src={AvatarImgs[0]} alt="@shadcn" />
 				<Avatar.Fallback>SC</Avatar.Fallback>
 			</Avatar.Root>
 		</Button>