diff --git a/package.json b/package.json
index 0478ca640..d7b08b14c 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
 		"esm-env": "^1.0.0",
 		"hast-util-to-html": "^9.0.0",
 		"lucide-svelte": "^0.268.0",
+		"phosphor-svelte": "^1.3.0",
 		"postcss": "^8.4.31",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08973d2f7..7a6ccdf49 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,6 +79,9 @@ devDependencies:
   lucide-svelte:
     specifier: ^0.268.0
     version: 0.268.0(svelte@4.2.2)
+  phosphor-svelte:
+    specifier: ^1.3.0
+    version: 1.3.0(svelte@4.2.2)
   postcss:
     specifier: ^8.4.31
     version: 8.4.31
@@ -5276,6 +5279,14 @@ packages:
       estree-walker: 3.0.3
       is-reference: 3.0.1
 
+  /phosphor-svelte@1.3.0(svelte@4.2.2):
+    resolution: {integrity: sha512-aW6/O2+j3TCA8oku8CwkMUvy00OHUa5CqpeqBr/Y9nT8wT/eTKZIBGt2G+JJddEHs0KkSBr7oIYdJUsUJY80fQ==}
+    peerDependencies:
+      svelte: '>=3'
+    dependencies:
+      svelte: 4.2.2
+    dev: true
+
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: true
diff --git a/src/components/component-preview.svelte b/src/components/component-preview.svelte
index 6608f867f..ec1088239 100644
--- a/src/components/component-preview.svelte
+++ b/src/components/component-preview.svelte
@@ -26,7 +26,7 @@
 					</div>
 				</div>
 			{:else}
-				<div class="relative rounded-md bg-accent border border-border">
+				<div class="relative rounded-md bg-secondary border border-border">
 					<div
 						class={cn(
 							"preview flex min-h-[350px] w-full justify-center p-12",
diff --git a/src/components/demos/radio-group-demo.svelte b/src/components/demos/radio-group-demo.svelte
index fcb271c21..3269241df 100644
--- a/src/components/demos/radio-group-demo.svelte
+++ b/src/components/demos/radio-group-demo.svelte
@@ -1,20 +1,36 @@
 <script lang="ts">
-	import * as RadioGroup from "@/components/ui/radio-group";
-	import * as Label from "@/components/ui/label";
+	import { RadioGroup, Label } from "$lib";
 </script>
 
-<RadioGroup.Root value="comfortable">
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="default" id="r1" />
-		<Label.Root for="r1">Default</Label.Root>
+<RadioGroup.Root class="flex flex-col gap-3">
+	<div
+		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+	>
+		<RadioGroup.Item
+			id="amazing"
+			value="amazing"
+			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
+		/>
+		<Label.Root for="amazing" class="font-medium text-sm">Amazing</Label.Root>
 	</div>
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="comfortable" id="r2" />
-		<Label.Root for="r2">Comfortable</Label.Root>
+	<div
+		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+	>
+		<RadioGroup.Item
+			id="average"
+			value="average"
+			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1 "
+		/>
+		<Label.Root for="average" class="font-medium text-sm">Average</Label.Root>
 	</div>
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="compact" id="r3" />
-		<Label.Root for="r3">Compact</Label.Root>
+	<div
+		class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
+	>
+		<RadioGroup.Item
+			id="terrible"
+			value="terrible"
+			class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
+		/>
+		<Label.Root for="terrible" class="font-medium text-sm">Terrible</Label.Root>
 	</div>
-	<RadioGroup.Input name="spacing" />
 </RadioGroup.Root>
diff --git a/src/lib/bits/radio-group/attrs.ts b/src/lib/bits/radio-group/attrs.ts
new file mode 100644
index 000000000..27a3bab74
--- /dev/null
+++ b/src/lib/bits/radio-group/attrs.ts
@@ -0,0 +1,8 @@
+export const ATTRS = {
+	root: {
+		"data-bits-radio-group-root": ""
+	},
+	item: {
+		"data-bits-radio-group-item": ""
+	}
+};
diff --git a/src/lib/bits/radio-group/components/RadioGroup.svelte b/src/lib/bits/radio-group/components/RadioGroup.svelte
index dbd8f4d69..26fb87f7b 100644
--- a/src/lib/bits/radio-group/components/RadioGroup.svelte
+++ b/src/lib/bits/radio-group/components/RadioGroup.svelte
@@ -2,6 +2,7 @@
 	import { melt } from "@melt-ui/svelte";
 	import { ctx } from "../ctx.js";
 	import type { Props } from "../types.js";
+	import { ATTRS } from "../attrs.js";
 
 	type $$Props = Props;
 	export let required: $$Props["required"] = undefined;
@@ -39,10 +40,10 @@
 </script>
 
 {#if asChild}
-	<slot builder={$root} />
+	<slot builder={$root} attrs={ATTRS.root} />
 {:else}
 	{@const builder = $root}
-	<div use:melt={builder} {...$$restProps}>
+	<div use:melt={builder} {...$$restProps} {...ATTRS.root}>
 		<slot {builder} />
 	</div>
 {/if}
diff --git a/src/lib/bits/radio-group/components/RadioGroupItem.svelte b/src/lib/bits/radio-group/components/RadioGroupItem.svelte
index a54dc9fcf..39fb72545 100644
--- a/src/lib/bits/radio-group/components/RadioGroupItem.svelte
+++ b/src/lib/bits/radio-group/components/RadioGroupItem.svelte
@@ -3,6 +3,7 @@
 	import { ctx } from "../ctx.js";
 	import type { ItemEvents, ItemProps } from "../types.js";
 	import { createDispatcher } from "$lib/internal/events.js";
+	import { ATTRS } from "../attrs.js";
 
 	type $$Props = ItemProps;
 	type $$Events = ItemEvents;
@@ -16,12 +17,13 @@
 </script>
 
 {#if asChild}
-	<slot builder={$item} />
+	<slot builder={$item} attrs={ATTRS.item} />
 {:else}
 	{@const builder = $item({ value, disabled })}
 	<button
 		use:melt={builder}
 		{...$$restProps}
+		{...ATTRS.item}
 		on:m-click={dispatch}
 		on:m-focus={dispatch}
 		on:m-keydown={dispatch}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f46d8a3f9..09a9f65ed 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -53,6 +53,9 @@ export default {
 			},
 			fontFamily: {
 				sans: ["Inter", ...fontFamily.sans]
+			},
+			borderWidth: {
+				6: "6px"
 			}
 		}
 	},