size-5

apps/www/src/lib/components/docs/dashboard/team-switcher.svelte

@@ -67,7 +67,7 @@
 				aria-label="Select a team"
 				class={cn("w-[200px] justify-between", className)}
 			>
-				<Avatar.Root class="mr-2 h-5 w-5">
+				<Avatar.Root class="mr-2 size-5">
 					<Avatar.Image
 						src="https://avatar.vercel.sh/${selectedTeam.value}.png"
 						alt={selectedTeam.label}
@@ -95,7 +95,7 @@
 									value={team.label}
 									class="text-sm"
 								>
-									<Avatar.Root class="mr-2 h-5 w-5">
+									<Avatar.Root class="mr-2 size-5">
 										<Avatar.Image
 											src="https://avatar.vercel.sh/${team.value}.png"
 											alt={team.label}
@@ -124,7 +124,7 @@
 								showTeamDialog = true;
 							}}
 						>
-							<PlusCircled class="mr-2 h-5 w-5" />
+							<PlusCircled class="mr-2 size-5" />
 							Create Team
 						</Command.Item>
 					</Command.Group>

apps/www/src/lib/components/docs/icons/hamburger.svelte

@@ -9,7 +9,7 @@
 	viewBox="0 0 24 24"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
-	class="h-5 w-5"
+	class="size-5"
 	{...$$restProps}
 >
 	<path

apps/www/src/lib/components/docs/nav/mobile-nav.svelte

@@ -17,7 +17,7 @@
 			variant="ghost"
 			class="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
 		>
-			<Icons.Hamburger class="h-5 w-5" />
+			<Icons.Hamburger class="size-5" />
 			<span class="sr-only">Toggle Menu</span>
 		</Button>
 	</Sheet.Trigger>

apps/www/src/lib/components/docs/theme-customizer/customizer.svelte

@@ -103,7 +103,7 @@
 						style="--theme-primary: hsl({theme.activeColor[$mode ?? 'dark']})"
 					>
 						<span
-							class="mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
+							class="mr-1 flex size-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
 						>
 							{#if isActive}
 								<Check class="size-4 text-white" />

apps/www/src/lib/registry/default/block/dashboard-01.svelte

@@ -52,7 +52,7 @@
 					class="shrink-0 md:hidden"
 					builders={[builder]}
 				>
-					<Menu class="h-5 w-5" />
+					<Menu class="size-5" />
 					<span class="sr-only">Toggle navigation menu</span>
 				</Button>
 			</Sheet.Trigger>
@@ -89,7 +89,7 @@
 						size="icon"
 						class="rounded-full"
 					>
-						<CircleUser class="h-5 w-5" />
+						<CircleUser class="size-5" />
 						<span class="sr-only">Toggle user menu</span>
 					</Button>
 				</DropdownMenu.Trigger>

apps/www/src/lib/registry/default/block/dashboard-02.svelte

@@ -103,7 +103,7 @@
 						class="shrink-0 md:hidden"
 						builders={[builder]}
 					>
-						<Menu class="h-5 w-5" />
+						<Menu class="size-5" />
 						<span class="sr-only">Toggle navigation menu</span>
 					</Button>
 				</Sheet.Trigger>
@@ -117,14 +117,14 @@
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
 						>
-							<Home class="h-5 w-5" />
+							<Home class="size-5" />
 							Dashboard
 						</a>
 						<a
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
 						>
-							<ShoppingCart class="h-5 w-5" />
+							<ShoppingCart class="size-5" />
 							Orders
 							<Badge
 								class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
@@ -136,21 +136,21 @@
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
 						>
-							<Package class="h-5 w-5" />
+							<Package class="size-5" />
 							Products
 						</a>
 						<a
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
 						>
-							<Users class="h-5 w-5" />
+							<Users class="size-5" />
 							Customers
 						</a>
 						<a
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
 						>
-							<LineChart class="h-5 w-5" />
+							<LineChart class="size-5" />
 							Analytics
 						</a>
 					</nav>
@@ -190,7 +190,7 @@
 						size="icon"
 						class="rounded-full"
 					>
-						<CircleUser class="h-5 w-5" />
+						<CircleUser class="size-5" />
 						<span class="sr-only">Toggle user menu</span>
 					</Button>
 				</DropdownMenu.Trigger>

apps/www/src/lib/registry/default/block/dashboard-04.svelte

@@ -45,7 +45,7 @@
 					class="shrink-0 md:hidden"
 					builders={[builder]}
 				>
-					<Menu class="h-5 w-5" />
+					<Menu class="size-5" />
 					<span class="sr-only">Toggle navigation menu</span>
 				</Button>
 			</Sheet.Trigger>
@@ -82,7 +82,7 @@
 						size="icon"
 						class="rounded-full"
 					>
-						<CircleUser class="h-5 w-5" />
+						<CircleUser class="size-5" />
 						<span class="sr-only">Toggle user menu</span>
 					</Button>
 				</DropdownMenu.Trigger>

apps/www/src/lib/registry/default/block/dashboard-05.svelte

@@ -50,7 +50,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Home class="h-5 w-5" />
+						<Home class="size-5" />
 						<span class="sr-only">Dashboard</span>
 					</a>
 				</Tooltip.Trigger>
@@ -64,7 +64,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<ShoppingCart class="h-5 w-5" />
+						<ShoppingCart class="size-5" />
 						<span class="sr-only">Orders</span>
 					</a>
 				</Tooltip.Trigger>
@@ -78,7 +78,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Package class="h-5 w-5" />
+						<Package class="size-5" />
 						<span class="sr-only">Products</span>
 					</a>
 				</Tooltip.Trigger>
@@ -92,7 +92,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<UsersRound class="h-5 w-5" />
+						<UsersRound class="size-5" />
 						<span class="sr-only">Customers</span>
 					</a>
 				</Tooltip.Trigger>
@@ -106,7 +106,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<LineChart class="h-5 w-5" />
+						<LineChart class="size-5" />
 						<span class="sr-only">Analytics</span>
 					</a>
 				</Tooltip.Trigger>
@@ -122,7 +122,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Settings class="h-5 w-5" />
+						<Settings class="size-5" />
 						<span class="sr-only">Settings</span>
 					</a>
 				</Tooltip.Trigger>
@@ -137,7 +137,7 @@
 			<Sheet.Root>
 				<Sheet.Trigger asChild let:builder>
 					<Button builders={[builder]} size="icon" variant="outline" class="sm:hidden">
-						<PanelLeft class="h-5 w-5" />
+						<PanelLeft class="size-5" />
 						<span class="sr-only">Toggle Menu</span>
 					</Button>
 				</Sheet.Trigger>
@@ -147,39 +147,39 @@
 							href="##"
 							class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
 						>
-							<Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+							<Package2 class="size-5 transition-all group-hover:scale-110" />
 							<span class="sr-only">Acme Inc</span>
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<Home class="h-5 w-5" />
+							<Home class="size-5" />
 							Dashboard
 						</a>
 						<a href="##" class="flex items-center gap-4 px-2.5 text-foreground">
-							<ShoppingCart class="h-5 w-5" />
+							<ShoppingCart class="size-5" />
 							Orders
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<Package class="h-5 w-5" />
+							<Package class="size-5" />
 							Products
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<UsersRound class="h-5 w-5" />
+							<UsersRound class="size-5" />
 							Customers
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<LineChart class="h-5 w-5" />
+							<LineChart class="size-5" />
 							Settings
 						</a>
 					</nav>

apps/www/src/lib/registry/default/block/dashboard-06.svelte

@@ -43,7 +43,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Home class="h-5 w-5" />
+						<Home class="size-5" />
 						<span class="sr-only">Dashboard</span>
 					</a>
 				</Tooltip.Trigger>
@@ -57,7 +57,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<ShoppingCart class="h-5 w-5" />
+						<ShoppingCart class="size-5" />
 						<span class="sr-only">Orders</span>
 					</a>
 				</Tooltip.Trigger>
@@ -71,7 +71,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Package class="h-5 w-5" />
+						<Package class="size-5" />
 						<span class="sr-only">Products</span>
 					</a>
 				</Tooltip.Trigger>
@@ -85,7 +85,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<UsersRound class="h-5 w-5" />
+						<UsersRound class="size-5" />
 						<span class="sr-only">Customers</span>
 					</a>
 				</Tooltip.Trigger>
@@ -99,7 +99,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<LineChart class="h-5 w-5" />
+						<LineChart class="size-5" />
 						<span class="sr-only">Analytics</span>
 					</a>
 				</Tooltip.Trigger>
@@ -115,7 +115,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Settings class="h-5 w-5" />
+						<Settings class="size-5" />
 						<span class="sr-only">Settings</span>
 					</a>
 				</Tooltip.Trigger>
@@ -130,7 +130,7 @@
 			<Sheet.Root>
 				<Sheet.Trigger asChild let:builder>
 					<Button builders={[builder]} size="icon" variant="outline" class="sm:hidden">
-						<PanelLeft class="h-5 w-5" />
+						<PanelLeft class="size-5" />
 						<span class="sr-only">Toggle Menu</span>
 					</Button>
 				</Sheet.Trigger>
@@ -140,39 +140,39 @@
 							href="##"
 							class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
 						>
-							<Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+							<Package2 class="size-5 transition-all group-hover:scale-110" />
 							<span class="sr-only">Acme Inc</span>
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<Home class="h-5 w-5" />
+							<Home class="size-5" />
 							Dashboard
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<ShoppingCart class="h-5 w-5" />
+							<ShoppingCart class="size-5" />
 							Orders
 						</a>
 						<a href="##" class="flex items-center gap-4 px-2.5 text-foreground">
-							<Package class="h-5 w-5" />
+							<Package class="size-5" />
 							Products
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<UsersRound class="h-5 w-5" />
+							<UsersRound class="size-5" />
 							Customers
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<LineChart class="h-5 w-5" />
+							<LineChart class="size-5" />
 							Settings
 						</a>
 					</nav>

apps/www/src/lib/registry/default/block/dashboard-07.svelte

@@ -45,7 +45,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Home class="h-5 w-5" />
+						<Home class="size-5" />
 						<span class="sr-only">Dashboard</span>
 					</a>
 				</Tooltip.Trigger>
@@ -59,7 +59,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<ShoppingCart class="h-5 w-5" />
+						<ShoppingCart class="size-5" />
 						<span class="sr-only">Orders</span>
 					</a>
 				</Tooltip.Trigger>
@@ -73,7 +73,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Package class="h-5 w-5" />
+						<Package class="size-5" />
 						<span class="sr-only">Products</span>
 					</a>
 				</Tooltip.Trigger>
@@ -87,7 +87,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<UsersRound class="h-5 w-5" />
+						<UsersRound class="size-5" />
 						<span class="sr-only">Customers</span>
 					</a>
 				</Tooltip.Trigger>
@@ -101,7 +101,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<LineChart class="h-5 w-5" />
+						<LineChart class="size-5" />
 						<span class="sr-only">Analytics</span>
 					</a>
 				</Tooltip.Trigger>
@@ -117,7 +117,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Settings class="h-5 w-5" />
+						<Settings class="size-5" />
 						<span class="sr-only">Settings</span>
 					</a>
 				</Tooltip.Trigger>
@@ -132,7 +132,7 @@
 			<Sheet.Root>
 				<Sheet.Trigger asChild let:builder>
 					<Button builders={[builder]} size="icon" variant="outline" class="sm:hidden">
-						<PanelLeft class="h-5 w-5" />
+						<PanelLeft class="size-5" />
 						<span class="sr-only">Toggle Menu</span>
 					</Button>
 				</Sheet.Trigger>
@@ -142,39 +142,39 @@
 							href="##"
 							class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
 						>
-							<Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+							<Package2 class="size-5 transition-all group-hover:scale-110" />
 							<span class="sr-only">Acme Inc</span>
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<Home class="h-5 w-5" />
+							<Home class="size-5" />
 							Dashboard
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<ShoppingCart class="h-5 w-5" />
+							<ShoppingCart class="size-5" />
 							Orders
 						</a>
 						<a href="##" class="flex items-center gap-4 px-2.5 text-foreground">
-							<Package class="h-5 w-5" />
+							<Package class="size-5" />
 							Products
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<UsersRound class="h-5 w-5" />
+							<UsersRound class="size-5" />
 							Customers
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<LineChart class="h-5 w-5" />
+							<LineChart class="size-5" />
 							Settings
 						</a>
 					</nav>

apps/www/src/lib/registry/default/example/cards/chat.svelte

@@ -181,7 +181,7 @@
 								</p>
 							</div>
 							{#if selectedUsers.includes(user)}
-								<Check class="ml-auto flex h-5 w-5 text-primary" />
+								<Check class="ml-auto flex size-5 text-primary" />
 							{/if}
 						</Command.Item>
 					{/each}

apps/www/src/lib/registry/default/example/cards/notifications.svelte

@@ -14,14 +14,14 @@
 		<div
 			class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
 		>
-			<Bell class="h-5 w-5" />
+			<Bell class="size-5" />
 			<div class="space-y-1">
 				<p class="text-sm font-medium leading-none">Everything</p>
 				<p class="text-sm text-muted-foreground">Email digest, mentions & all activity.</p>
 			</div>
 		</div>
 		<div class="flex items-center space-x-4 rounded-md bg-accent p-2 text-accent-foreground">
-			<AtSign class="h-5 w-5" />
+			<AtSign class="size-5" />
 			<div class="space-y-1">
 				<p class="text-sm font-medium leading-none">Available</p>
 				<p class="text-sm text-muted-foreground">Only mentions and comments.</p>
@@ -30,7 +30,7 @@
 		<div
 			class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
 		>
-			<BellOff class="h-5 w-5" />
+			<BellOff class="size-5" />
 			<div class="space-y-1">
 				<p class="text-sm font-medium leading-none">Ignoring</p>
 				<p class="text-sm text-muted-foreground">Turn off all notifications.</p>

apps/www/src/lib/registry/new-york/block/dashboard-01.svelte

@@ -52,7 +52,7 @@
 					class="shrink-0 md:hidden"
 					builders={[builder]}
 				>
-					<Menu class="h-5 w-5" />
+					<Menu class="size-5" />
 					<span class="sr-only">Toggle navigation menu</span>
 				</Button>
 			</Sheet.Trigger>
@@ -89,7 +89,7 @@
 						size="icon"
 						class="rounded-full"
 					>
-						<CircleUser class="h-5 w-5" />
+						<CircleUser class="size-5" />
 						<span class="sr-only">Toggle user menu</span>
 					</Button>
 				</DropdownMenu.Trigger>

apps/www/src/lib/registry/new-york/block/dashboard-02.svelte

@@ -103,7 +103,7 @@
 						class="shrink-0 md:hidden"
 						builders={[builder]}
 					>
-						<Menu class="h-5 w-5" />
+						<Menu class="size-5" />
 						<span class="sr-only">Toggle navigation menu</span>
 					</Button>
 				</Sheet.Trigger>
@@ -117,14 +117,14 @@
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
 						>
-							<Home class="h-5 w-5" />
+							<Home class="size-5" />
 							Dashboard
 						</a>
 						<a
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground"
 						>
-							<ShoppingCart class="h-5 w-5" />
+							<ShoppingCart class="size-5" />
 							Orders
 							<Badge
 								class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full"
@@ -136,21 +136,21 @@
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
 						>
-							<Package class="h-5 w-5" />
+							<Package class="size-5" />
 							Products
 						</a>
 						<a
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
 						>
-							<Users class="h-5 w-5" />
+							<Users class="size-5" />
 							Customers
 						</a>
 						<a
 							href="##"
 							class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
 						>
-							<LineChart class="h-5 w-5" />
+							<LineChart class="size-5" />
 							Analytics
 						</a>
 					</nav>
@@ -190,7 +190,7 @@
 						size="icon"
 						class="rounded-full"
 					>
-						<CircleUser class="h-5 w-5" />
+						<CircleUser class="size-5" />
 						<span class="sr-only">Toggle user menu</span>
 					</Button>
 				</DropdownMenu.Trigger>

apps/www/src/lib/registry/new-york/block/dashboard-04.svelte

@@ -45,7 +45,7 @@
 					class="shrink-0 md:hidden"
 					builders={[builder]}
 				>
-					<Menu class="h-5 w-5" />
+					<Menu class="size-5" />
 					<span class="sr-only">Toggle navigation menu</span>
 				</Button>
 			</Sheet.Trigger>
@@ -82,7 +82,7 @@
 						size="icon"
 						class="rounded-full"
 					>
-						<CircleUser class="h-5 w-5" />
+						<CircleUser class="size-5" />
 						<span class="sr-only">Toggle user menu</span>
 					</Button>
 				</DropdownMenu.Trigger>

apps/www/src/lib/registry/new-york/block/dashboard-05.svelte

@@ -50,7 +50,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Home class="h-5 w-5" />
+						<Home class="size-5" />
 						<span class="sr-only">Dashboard</span>
 					</a>
 				</Tooltip.Trigger>
@@ -64,7 +64,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<ShoppingCart class="h-5 w-5" />
+						<ShoppingCart class="size-5" />
 						<span class="sr-only">Orders</span>
 					</a>
 				</Tooltip.Trigger>
@@ -78,7 +78,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Package class="h-5 w-5" />
+						<Package class="size-5" />
 						<span class="sr-only">Products</span>
 					</a>
 				</Tooltip.Trigger>
@@ -92,7 +92,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<UsersRound class="h-5 w-5" />
+						<UsersRound class="size-5" />
 						<span class="sr-only">Customers</span>
 					</a>
 				</Tooltip.Trigger>
@@ -106,7 +106,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<LineChart class="h-5 w-5" />
+						<LineChart class="size-5" />
 						<span class="sr-only">Analytics</span>
 					</a>
 				</Tooltip.Trigger>
@@ -122,7 +122,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Settings class="h-5 w-5" />
+						<Settings class="size-5" />
 						<span class="sr-only">Settings</span>
 					</a>
 				</Tooltip.Trigger>
@@ -137,7 +137,7 @@
 			<Sheet.Root>
 				<Sheet.Trigger asChild let:builder>
 					<Button builders={[builder]} size="icon" variant="outline" class="sm:hidden">
-						<PanelLeft class="h-5 w-5" />
+						<PanelLeft class="size-5" />
 						<span class="sr-only">Toggle Menu</span>
 					</Button>
 				</Sheet.Trigger>
@@ -147,39 +147,39 @@
 							href="##"
 							class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
 						>
-							<Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+							<Package2 class="size-5 transition-all group-hover:scale-110" />
 							<span class="sr-only">Acme Inc</span>
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<Home class="h-5 w-5" />
+							<Home class="size-5" />
 							Dashboard
 						</a>
 						<a href="##" class="flex items-center gap-4 px-2.5 text-foreground">
-							<ShoppingCart class="h-5 w-5" />
+							<ShoppingCart class="size-5" />
 							Orders
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<Package class="h-5 w-5" />
+							<Package class="size-5" />
 							Products
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<UsersRound class="h-5 w-5" />
+							<UsersRound class="size-5" />
 							Customers
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<LineChart class="h-5 w-5" />
+							<LineChart class="size-5" />
 							Settings
 						</a>
 					</nav>

apps/www/src/lib/registry/new-york/block/dashboard-06.svelte

@@ -43,7 +43,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Home class="h-5 w-5" />
+						<Home class="size-5" />
 						<span class="sr-only">Dashboard</span>
 					</a>
 				</Tooltip.Trigger>
@@ -57,7 +57,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<ShoppingCart class="h-5 w-5" />
+						<ShoppingCart class="size-5" />
 						<span class="sr-only">Orders</span>
 					</a>
 				</Tooltip.Trigger>
@@ -71,7 +71,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Package class="h-5 w-5" />
+						<Package class="size-5" />
 						<span class="sr-only">Products</span>
 					</a>
 				</Tooltip.Trigger>
@@ -85,7 +85,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<UsersRound class="h-5 w-5" />
+						<UsersRound class="size-5" />
 						<span class="sr-only">Customers</span>
 					</a>
 				</Tooltip.Trigger>
@@ -99,7 +99,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<LineChart class="h-5 w-5" />
+						<LineChart class="size-5" />
 						<span class="sr-only">Analytics</span>
 					</a>
 				</Tooltip.Trigger>
@@ -115,7 +115,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Settings class="h-5 w-5" />
+						<Settings class="size-5" />
 						<span class="sr-only">Settings</span>
 					</a>
 				</Tooltip.Trigger>
@@ -130,7 +130,7 @@
 			<Sheet.Root>
 				<Sheet.Trigger asChild let:builder>
 					<Button builders={[builder]} size="icon" variant="outline" class="sm:hidden">
-						<PanelLeft class="h-5 w-5" />
+						<PanelLeft class="size-5" />
 						<span class="sr-only">Toggle Menu</span>
 					</Button>
 				</Sheet.Trigger>
@@ -140,39 +140,39 @@
 							href="##"
 							class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
 						>
-							<Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+							<Package2 class="size-5 transition-all group-hover:scale-110" />
 							<span class="sr-only">Acme Inc</span>
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<Home class="h-5 w-5" />
+							<Home class="size-5" />
 							Dashboard
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<ShoppingCart class="h-5 w-5" />
+							<ShoppingCart class="size-5" />
 							Orders
 						</a>
 						<a href="##" class="flex items-center gap-4 px-2.5 text-foreground">
-							<Package class="h-5 w-5" />
+							<Package class="size-5" />
 							Products
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<UsersRound class="h-5 w-5" />
+							<UsersRound class="size-5" />
 							Customers
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<LineChart class="h-5 w-5" />
+							<LineChart class="size-5" />
 							Settings
 						</a>
 					</nav>

apps/www/src/lib/registry/new-york/block/dashboard-07.svelte

@@ -45,7 +45,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Home class="h-5 w-5" />
+						<Home class="size-5" />
 						<span class="sr-only">Dashboard</span>
 					</a>
 				</Tooltip.Trigger>
@@ -59,7 +59,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<ShoppingCart class="h-5 w-5" />
+						<ShoppingCart class="size-5" />
 						<span class="sr-only">Orders</span>
 					</a>
 				</Tooltip.Trigger>
@@ -73,7 +73,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Package class="h-5 w-5" />
+						<Package class="size-5" />
 						<span class="sr-only">Products</span>
 					</a>
 				</Tooltip.Trigger>
@@ -87,7 +87,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<UsersRound class="h-5 w-5" />
+						<UsersRound class="size-5" />
 						<span class="sr-only">Customers</span>
 					</a>
 				</Tooltip.Trigger>
@@ -101,7 +101,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<LineChart class="h-5 w-5" />
+						<LineChart class="size-5" />
 						<span class="sr-only">Analytics</span>
 					</a>
 				</Tooltip.Trigger>
@@ -117,7 +117,7 @@
 						use:builder.action
 						{...builder}
 					>
-						<Settings class="h-5 w-5" />
+						<Settings class="size-5" />
 						<span class="sr-only">Settings</span>
 					</a>
 				</Tooltip.Trigger>
@@ -132,7 +132,7 @@
 			<Sheet.Root>
 				<Sheet.Trigger asChild let:builder>
 					<Button builders={[builder]} size="icon" variant="outline" class="sm:hidden">
-						<PanelLeft class="h-5 w-5" />
+						<PanelLeft class="size-5" />
 						<span class="sr-only">Toggle Menu</span>
 					</Button>
 				</Sheet.Trigger>
@@ -142,39 +142,39 @@
 							href="##"
 							class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
 						>
-							<Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+							<Package2 class="size-5 transition-all group-hover:scale-110" />
 							<span class="sr-only">Acme Inc</span>
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<Home class="h-5 w-5" />
+							<Home class="size-5" />
 							Dashboard
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<ShoppingCart class="h-5 w-5" />
+							<ShoppingCart class="size-5" />
 							Orders
 						</a>
 						<a href="##" class="flex items-center gap-4 px-2.5 text-foreground">
-							<Package class="h-5 w-5" />
+							<Package class="size-5" />
 							Products
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<UsersRound class="h-5 w-5" />
+							<UsersRound class="size-5" />
 							Customers
 						</a>
 						<a
 							href="##"
 							class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
 						>
-							<LineChart class="h-5 w-5" />
+							<LineChart class="size-5" />
 							Settings
 						</a>
 					</nav>

apps/www/src/lib/registry/new-york/example/cards/chat.svelte

@@ -181,7 +181,7 @@
 								</p>
 							</div>
 							{#if selectedUsers.includes(user)}
-								<Check class="ml-auto flex h-5 w-5 text-primary" />
+								<Check class="ml-auto flex size-5 text-primary" />
 							{/if}
 						</Command.Item>
 					{/each}

apps/www/src/lib/registry/new-york/example/cards/notifications.svelte

@@ -14,14 +14,14 @@
 		<div
 			class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
 		>
-			<Bell class="h-5 w-5" />
+			<Bell class="size-5" />
 			<div class="space-y-1">
 				<p class="text-sm font-medium leading-none">Everything</p>
 				<p class="text-sm text-muted-foreground">Email digest, mentions & all activity.</p>
 			</div>
 		</div>
 		<div class="flex items-center space-x-4 rounded-md bg-accent p-2 text-accent-foreground">
-			<AtSign class="h-5 w-5" />
+			<AtSign class="size-5" />
 			<div class="space-y-1">
 				<p class="text-sm font-medium leading-none">Available</p>
 				<p class="text-sm text-muted-foreground">Only mentions and comments.</p>
@@ -30,7 +30,7 @@
 		<div
 			class="flex items-center space-x-4 rounded-md p-2 hover:bg-accent hover:text-accent-foreground"
 		>
-			<BellOff class="h-5 w-5" />
+			<BellOff class="size-5" />
 			<div class="space-y-1">
 				<p class="text-sm font-medium leading-none">Ignoring</p>
 				<p class="text-sm text-muted-foreground">Turn off all notifications.</p>

apps/www/src/routes/(app)/examples/cards/(components)/notifications.svelte

@@ -14,7 +14,7 @@
 		<div
 			class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"
 		>
-			<Bell class="mt-px h-5 w-5" />
+			<Bell class="mt-px size-5" />
 			<div class="space-y-1">
 				<p class="text-sm font-medium leading-none">Everything</p>
 				<p class="text-sm text-muted-foreground">Email digest, mentions & all activity.</p>
@@ -23,7 +23,7 @@
 		<div
 			class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all"
 		>
-			<Person class="mt-px h-5 w-5" />
+			<Person class="mt-px size-5" />
 			<div class="space-y-1">
 				<p class="text-sm font-medium leading-none">Available</p>
 				<p class="text-sm text-muted-foreground">Only mentions and comments.</p>
@@ -32,7 +32,7 @@
 		<div
 			class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"
 		>
-			<EyeNone class="mt-px h-5 w-5" />
+			<EyeNone class="mt-px size-5" />
 			<div class="space-y-1">
 				<p class="text-sm font-medium leading-none">Ignoring</p>
 				<p class="text-sm text-muted-foreground">Turn off all notifications.</p>

apps/www/src/routes/(app)/examples/playground/+page.svelte

@@ -71,7 +71,7 @@
 									xmlns="http://www.w3.org/2000/svg"
 									viewBox="0 0 20 20"
 									fill="none"
-									class="h-5 w-5"
+									class="size-5"
 								>
 									<rect
 										x="4"
@@ -137,7 +137,7 @@
 									xmlns="http://www.w3.org/2000/svg"
 									viewBox="0 0 20 20"
 									fill="none"
-									class="h-5 w-5"
+									class="size-5"
 								>
 									<path
 										fill-rule="evenodd"
@@ -177,7 +177,7 @@
 									xmlns="http://www.w3.org/2000/svg"
 									viewBox="0 0 20 20"
 									fill="none"
-									class="h-5 w-5"
+									class="size-5"
 								>
 									<rect
 										x="4"

apps/www/static/registry/styles/default-js/slider.json

@@ -11,7 +11,7 @@
 		},
 		{
 			"name": "slider.svelte",
-			"content": "<script>\n\timport { Slider as SliderPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport let value = [0];\n\texport { className as class };\n</script>\n\n<SliderPrimitive.Root\n\tbind:value\n\tclass={cn(\"relative flex w-full touch-none select-none items-center\", className)}\n\t{...$$restProps}\n\tlet:thumbs\n>\n\t<span class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n\t\t<SliderPrimitive.Range class=\"absolute h-full bg-primary\" />\n\t</span>\n\t{#each thumbs as thumb}\n\t\t<SliderPrimitive.Thumb\n\t\t\t{thumb}\n\t\t\tclass=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n\t\t/>\n\t{/each}\n</SliderPrimitive.Root>\n"
+			"content": "<script>\n\timport { Slider as SliderPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport let value = [0];\n\texport { className as class };\n</script>\n\n<SliderPrimitive.Root\n\tbind:value\n\tclass={cn(\"relative flex w-full touch-none select-none items-center\", className)}\n\t{...$$restProps}\n\tlet:thumbs\n>\n\t<span class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n\t\t<SliderPrimitive.Range class=\"absolute h-full bg-primary\" />\n\t</span>\n\t{#each thumbs as thumb}\n\t\t<SliderPrimitive.Thumb\n\t\t\t{thumb}\n\t\t\tclass=\"block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n\t\t/>\n\t{/each}\n</SliderPrimitive.Root>\n"
 		}
 	],
 	"type": "components:ui"

apps/www/static/registry/styles/default-js/switch.json

@@ -11,7 +11,7 @@
 		},
 		{
 			"name": "switch.svelte",
-			"content": "<script>\n\timport { Switch as SwitchPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport let checked = undefined;\n\texport { className as class };\n</script>\n\n<SwitchPrimitive.Root\n\tbind:checked\n\tclass={cn(\n\t\t\"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n\t\tclassName\n\t)}\n\t{...$$restProps}\n\ton:click\n\ton:keydown\n>\n\t<SwitchPrimitive.Thumb\n\t\tclass={cn(\n\t\t\t\"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n\t\t)}\n\t/>\n</SwitchPrimitive.Root>\n"
+			"content": "<script>\n\timport { Switch as SwitchPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\tlet className = undefined;\n\texport let checked = undefined;\n\texport { className as class };\n</script>\n\n<SwitchPrimitive.Root\n\tbind:checked\n\tclass={cn(\n\t\t\"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n\t\tclassName\n\t)}\n\t{...$$restProps}\n\ton:click\n\ton:keydown\n>\n\t<SwitchPrimitive.Thumb\n\t\tclass={cn(\n\t\t\t\"pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n\t\t)}\n\t/>\n</SwitchPrimitive.Root>\n"
 		}
 	],
 	"type": "components:ui"

apps/www/static/registry/styles/default/slider.json

@@ -11,7 +11,7 @@
 		},
 		{
 			"name": "slider.svelte",
-			"content": "<script lang=\"ts\">\n\timport { Slider as SliderPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = SliderPrimitive.Props;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = [0];\n\texport { className as class };\n</script>\n\n<SliderPrimitive.Root\n\tbind:value\n\tclass={cn(\"relative flex w-full touch-none select-none items-center\", className)}\n\t{...$$restProps}\n\tlet:thumbs\n>\n\t<span class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n\t\t<SliderPrimitive.Range class=\"absolute h-full bg-primary\" />\n\t</span>\n\t{#each thumbs as thumb}\n\t\t<SliderPrimitive.Thumb\n\t\t\t{thumb}\n\t\t\tclass=\"block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n\t\t/>\n\t{/each}\n</SliderPrimitive.Root>\n"
+			"content": "<script lang=\"ts\">\n\timport { Slider as SliderPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = SliderPrimitive.Props;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let value: $$Props[\"value\"] = [0];\n\texport { className as class };\n</script>\n\n<SliderPrimitive.Root\n\tbind:value\n\tclass={cn(\"relative flex w-full touch-none select-none items-center\", className)}\n\t{...$$restProps}\n\tlet:thumbs\n>\n\t<span class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n\t\t<SliderPrimitive.Range class=\"absolute h-full bg-primary\" />\n\t</span>\n\t{#each thumbs as thumb}\n\t\t<SliderPrimitive.Thumb\n\t\t\t{thumb}\n\t\t\tclass=\"block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n\t\t/>\n\t{/each}\n</SliderPrimitive.Root>\n"
 		}
 	],
 	"type": "components:ui"

apps/www/static/registry/styles/default/switch.json

@@ -11,7 +11,7 @@
 		},
 		{
 			"name": "switch.svelte",
-			"content": "<script lang=\"ts\">\n\timport { Switch as SwitchPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = SwitchPrimitive.Props;\n\ttype $$Events = SwitchPrimitive.Events;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let checked: $$Props[\"checked\"] = undefined;\n\texport { className as class };\n</script>\n\n<SwitchPrimitive.Root\n\tbind:checked\n\tclass={cn(\n\t\t\"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n\t\tclassName\n\t)}\n\t{...$$restProps}\n\ton:click\n\ton:keydown\n>\n\t<SwitchPrimitive.Thumb\n\t\tclass={cn(\n\t\t\t\"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n\t\t)}\n\t/>\n</SwitchPrimitive.Root>\n"
+			"content": "<script lang=\"ts\">\n\timport { Switch as SwitchPrimitive } from \"bits-ui\";\n\timport { cn } from \"$lib/utils.js\";\n\n\ttype $$Props = SwitchPrimitive.Props;\n\ttype $$Events = SwitchPrimitive.Events;\n\n\tlet className: $$Props[\"class\"] = undefined;\n\texport let checked: $$Props[\"checked\"] = undefined;\n\texport { className as class };\n</script>\n\n<SwitchPrimitive.Root\n\tbind:checked\n\tclass={cn(\n\t\t\"peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\",\n\t\tclassName\n\t)}\n\t{...$$restProps}\n\ton:click\n\ton:keydown\n>\n\t<SwitchPrimitive.Thumb\n\t\tclass={cn(\n\t\t\t\"pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0\"\n\t\t)}\n\t/>\n</SwitchPrimitive.Root>\n"
 		}
 	],
 	"type": "components:ui"