diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-arrow.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-arrow.svelte
index 0cb3af2ed..1106a9be5 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-arrow.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-arrow.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
 	import type { ArrowProps } from "../index.js";
+	import { useMenuArrow } from "../menu.svelte.js";
 	import { FloatingLayer } from "$lib/bits/utilities/floating-layer/index.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let { el = $bindable(), ...restProps }: ArrowProps = $props();
+
+	const state = useMenuArrow();
+
+	const mergedProps = $derived(mergeProps(restProps, state.props as any));
 </script>
 
-<FloatingLayer.Arrow bind:el {...restProps} />
+<FloatingLayer.Arrow bind:el {...mergedProps} />
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte
index 28d87923f..c15c4799b 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-checkbox-item.svelte
@@ -34,8 +34,8 @@
 		onSelect: box.with(() => handleSelect),
 	});
 
-	function handleSelect() {
-		onSelect();
+	function handleSelect(e: Event) {
+		onSelect(e);
 		state.toggleChecked();
 	}
 
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-group.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-group.svelte
index 23ef51306..e151b7741 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-group.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-group.svelte
@@ -1,22 +1,18 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setGroupCtx } from "../ctx.js";
 	import type { GroupProps } from "../index.js";
-	type $$Props = GroupProps;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	import { useMenuGroup } from "../menu.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	const { group, id, getAttrs } = setGroupCtx();
-	const attrs = getAttrs("group");
+	let { asChild, children, child, el = $bindable(), ...restProps }: GroupProps = $props();
 
-	$: builder = $group(id);
-	$: Object.assign(builder, attrs);
+	const state = useMenuGroup();
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div {...mergedProps} bind:this={el}>
+		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-label.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-label.svelte
index 885a76a68..bcde1955b 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-label.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-label.svelte
@@ -1,24 +1,18 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getGroupLabel } from "../ctx.js";
 	import type { LabelProps } from "../index.js";
+	import { useMenuLabel } from "../menu.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = LabelProps;
+	let { asChild, children, child, el = $bindable(), ...restProps }: LabelProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const { groupLabel, id, getAttrs } = getGroupLabel();
-	const attrs = getAttrs("label");
-
-	$: builder = $groupLabel(id);
-	$: Object.assign(builder, attrs);
+	const state = useMenuLabel();
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div {...mergedProps} bind:this={el}>
+		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte
index 15868464f..dba2985a0 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-group.svelte
@@ -1,41 +1,39 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setRadioGroupCtx } from "../ctx.js";
+	import { box } from "runed";
 	import type { RadioGroupProps } from "../index.js";
+	import { useMenuRadioGroup } from "../menu.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = RadioGroupProps;
+	let {
+		asChild,
+		children,
+		child,
+		el = $bindable(),
+		value = $bindable(""),
+		onValueChange = noop,
+		...restProps
+	}: RadioGroupProps = $props();
 
-	export let value: $$Props["value"] = undefined;
-	export let onValueChange: $$Props["onValueChange"] = undefined;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
-
-	const {
-		elements: { radioGroup },
-		states: { value: localValue },
-		getAttrs,
-	} = setRadioGroupCtx({
-		defaultValue: value,
-		onValueChange: ({ next }) => {
-			if (next != null && next !== value) {
-				onValueChange?.(next);
-				value = next;
+	const state = useMenuRadioGroup({
+		value: box.with(
+			() => value,
+			(v) => {
+				if (value !== v) {
+					value = v;
+					onValueChange(v);
+				}
 			}
-			return next;
-		},
+		),
 	});
 
-	const attrs = getAttrs("radio-group");
-
-	$: value !== undefined && localValue.set(value);
-	$: builder = $radioGroup;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<div bind:this={el} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
+	<div {...mergedProps} bind:this={el}>
+		{@render children?.()}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-item.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-item.svelte
index ac0bf4e6e..6429fe8ac 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-radio-item.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-radio-item.svelte
@@ -1,44 +1,43 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { setRadioItem } from "../ctx.js";
-	import type { RadioItemEvents, RadioItemProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import { box } from "runed";
+	import type { RadioItemProps } from "../index.js";
+	import { useMenuRadioItem } from "../menu.svelte.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { noop } from "$lib/internal/callbacks.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = RadioItemProps;
-	type $$Events = RadioItemEvents;
-	export let value: $$Props["value"];
-	export let disabled = false;
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	let {
+		asChild,
+		children,
+		child,
+		el = $bindable(),
+		value,
+		onSelect = noop,
+		id = useId(),
+		disabled = false,
+		...restProps
+	}: RadioItemProps = $props();
 
-	const {
-		elements: { radioItem },
-		getAttrs,
-	} = setRadioItem(value);
+	const state = useMenuRadioItem({
+		value: box.with(() => value),
+		id: box.with(() => id),
+		disabled: box.with(() => disabled),
+		onSelect: box.with(() => handleSelect),
+	});
 
-	const attrs = getAttrs("radio-item");
-	const dispatch = createDispatcher();
+	function handleSelect(e: Event) {
+		onSelect(e);
+		if (e.defaultPrevented) return;
+		state.selectValue();
+	}
 
-	$: builder = $radioItem({ value, disabled });
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<div
-		bind:this={el}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-		on:m-pointerdown={dispatch}
-		on:m-pointerleave={dispatch}
-		on:m-pointermove={dispatch}
-		on:pointerenter
-	>
-		<slot {builder} />
+	<div {...mergedProps} bind:this={el}>
+		{@render children?.({ checked: state.isChecked })}
 	</div>
 {/if}
diff --git a/packages/bits-ui/src/lib/bits/menu/components/menu-separator.svelte b/packages/bits-ui/src/lib/bits/menu/components/menu-separator.svelte
index 35d08df8e..4ba3bce3d 100644
--- a/packages/bits-ui/src/lib/bits/menu/components/menu-separator.svelte
+++ b/packages/bits-ui/src/lib/bits/menu/components/menu-separator.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import type { SeparatorProps } from "../index.js";
+	import { useMenuSeparator } from "../menu.svelte.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
 	let { el = $bindable(), asChild, child, children, ...restProps }: SeparatorProps = $props();
 
-	const mergedProps = $derived(
-		mergeProps(restProps, { role: "separator", "aria-orientation": "horizontal" })
-	);
+	const state = useMenuSeparator();
+
+	const mergedProps = $derived(mergeProps(restProps, state.props));
 </script>
 
 {#if asChild}
diff --git a/packages/bits-ui/src/lib/bits/menu/index.ts b/packages/bits-ui/src/lib/bits/menu/index.ts
index 379c56d05..7d9c76599 100644
--- a/packages/bits-ui/src/lib/bits/menu/index.ts
+++ b/packages/bits-ui/src/lib/bits/menu/index.ts
@@ -24,5 +24,9 @@ export type {
 	MenuSubContentProps as SubContentProps,
 	MenuSeparatorProps as SeparatorProps,
 	MenuArrowProps as ArrowProps,
-	MenucheckboxItemProps as CheckboxItemProps,
+	MenuCheckboxItemProps as CheckboxItemProps,
+	MenuLabelProps as LabelProps,
+	MenuGroupProps as GroupProps,
+	MenuRadioGroupProps as RadioGroupProps,
+	MenuRadioItemProps as RadioItemProps,
 } from "./types.js";
diff --git a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
index 716014212..f02f931e3 100644
--- a/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
+++ b/packages/bits-ui/src/lib/bits/menu/menu.svelte.ts
@@ -42,12 +42,14 @@ import { afterTick } from "$lib/internal/afterTick.js";
 const TRIGGER_ATTR = "data-menu-trigger";
 const CONTENT_ATTR = "data-menu-content";
 const ITEM_ATTR = "data-menu-item";
+const SEPARATOR_ATTR = "data-menu-separator";
 const SUB_TRIGGER_ATTR = "data-menu-subtrigger";
 const CHECKBOX_ITEM_ATTR = "data-menu-checkbox-item";
 const GROUP_ATTR = "data-menu-group";
 const LABEL_ATTR = "data-menu-label";
 const RADIO_GROUP_ATTR = "data-menu-radio-group";
 const RADIO_ITEM_ATTR = "data-menu-radio-item";
+const ARROW_ATTR = "data-menu-arrow";
 
 const [setMenuRootContext] = createContext<MenuRootState>("Menu.Root");
 
@@ -667,22 +669,30 @@ class MenuCheckboxItemState {
 }
 
 class MenuGroupState {
-	props = $derived.by(
-		() =>
-			({
-				role: "group",
-				[GROUP_ATTR]: "",
-			}) as const
-	);
+	props = {
+		role: "group",
+		[GROUP_ATTR]: "",
+	} as const;
 }
 
 class MenuLabelState {
-	props = $derived.by(
-		() =>
-			({
-				[LABEL_ATTR]: "",
-			}) as const
-	);
+	props = {
+		[LABEL_ATTR]: "",
+	} as const;
+}
+
+class MenuSeparatorState {
+	props = {
+		[SEPARATOR_ATTR]: "",
+		role: "separator",
+		"aria-orientation": "horizontal",
+	} as const;
+}
+
+class MenuArrowState {
+	props = {
+		[ARROW_ATTR]: "",
+	} as const;
 }
 
 type MenuRadioGroupStateProps = WritableBoxedValues<{
@@ -726,7 +736,7 @@ class MenuRadioItemState {
 	#item: MenuItemState;
 	#value: MenuRadioItemStateProps["value"];
 	#group: MenuRadioGroupState;
-	#isChecked = $derived.by(() => this.#group.value.value === this.#value.value);
+	isChecked = $derived.by(() => this.#group.value.value === this.#value.value);
 
 	constructor(props: MenuRadioItemStateProps, item: MenuItemState, group: MenuRadioGroupState) {
 		this.#item = item;
@@ -744,8 +754,8 @@ class MenuRadioItemState {
 				[RADIO_ITEM_ATTR]: "",
 				...this.#item.props,
 				role: "menuitemradio",
-				"aria-checked": getAriaChecked(this.#isChecked),
-				"data-state": getCheckedState(this.#isChecked),
+				"aria-checked": getAriaChecked(this.isChecked),
+				"data-state": getCheckedState(this.isChecked),
 			}) as const
 	);
 }
@@ -869,3 +879,11 @@ export function useMenuGroup() {
 export function useMenuLabel() {
 	return new MenuLabelState();
 }
+
+export function useMenuSeparator() {
+	return new MenuSeparatorState();
+}
+
+export function useMenuArrow() {
+	return new MenuArrowState();
+}
diff --git a/packages/bits-ui/src/lib/bits/menu/types.ts b/packages/bits-ui/src/lib/bits/menu/types.ts
index 32c25f4fa..4e9253633 100644
--- a/packages/bits-ui/src/lib/bits/menu/types.ts
+++ b/packages/bits-ui/src/lib/bits/menu/types.ts
@@ -55,21 +55,32 @@ export type MenuItemPropsWithoutHTML = WithAsChild<{
 
 	/**
 	 * A callback fired when the menu item is selected.
+	 *
+	 * Prevent default behavior of selection with `event.preventDefault()`.
 	 */
-	onSelect?: () => void;
+	onSelect?: (event: Event) => void;
 }>;
 
 export type MenuItemProps = MenuItemPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, MenuItemPropsWithoutHTML>;
 
 export type MenuCheckboxItemPropsWithoutHTML = Omit<MenuItemPropsWithoutHTML, "children"> & {
+	/**
+	 * The checked state of the checkbox item.
+	 *
+	 * Supports two-way binding with `bind:checked`.
+	 */
 	checked?: boolean | "indeterminate";
+
+	/**
+	 * A callback that is fired when the checked state changes.
+	 */
 	onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
 } & {
 	children?: Snippet<[{ checked: boolean | "indeterminate" }]>;
 };
 
-export type MenucheckboxItemProps = MenuCheckboxItemPropsWithoutHTML &
+export type MenuCheckboxItemProps = MenuCheckboxItemPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, MenuCheckboxItemPropsWithoutHTML>;
 
 export type MenuTriggerPropsWithoutHTML = WithAsChild<{
@@ -99,15 +110,49 @@ export type MenuSubPropsWithoutHTML = {
 };
 
 export type MenuSubContentPropsWithoutHTML = WithAsChild<PopperLayerProps>;
-
 export type MenuSubContentProps = MenuSubContentPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, MenuSubContentPropsWithoutHTML>;
 
 export type MenuSeparatorPropsWithoutHTML = WithAsChild<{}>;
-
 export type MenuSeparatorProps = MenuSeparatorPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, MenuSeparatorPropsWithoutHTML>;
 
 export type MenuArrowPropsWithoutHTML = ArrowPropsWithoutHTML;
-
 export type MenuArrowProps = ArrowProps;
+
+export type MenuGroupPropsWithoutHTML = WithAsChild<{}>;
+export type MenuGroupProps = MenuGroupPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, MenuGroupPropsWithoutHTML>;
+
+export type MenuLabelPropsWithoutHTML = WithAsChild<{}>;
+export type MenuLabelProps = MenuLabelPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, MenuLabelPropsWithoutHTML>;
+
+export type MenuRadioGroupPropsWithoutHTML = WithAsChild<{
+	/**
+	 * The value of the selected radio item.
+	 *
+	 * Supports two-way binding with `bind:value`.
+	 */
+	value?: string;
+
+	/**
+	 * A callback that is fired when the selected radio item changes.
+	 */
+	onValueChange?: OnChangeFn<string>;
+}>;
+
+export type MenuRadioGroupProps = MenuRadioGroupPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, MenuRadioGroupPropsWithoutHTML>;
+
+export type MenuRadioItemPropsWithoutHTML = Omit<MenuItemPropsWithoutHTML, "children"> & {
+	/**
+	 * The value of the radio item.
+	 */
+	value: string;
+} & {
+	children?: Snippet<[{ checked: boolean }]>;
+};
+
+export type MenuRadioItemProps = MenuRadioItemPropsWithoutHTML &
+	Without<PrimitiveDivAttributes, MenuRadioItemPropsWithoutHTML>;
diff --git a/sites/docs/src/lib/components/demos/dropdown-menu-demo.svelte b/sites/docs/src/lib/components/demos/dropdown-menu-demo.svelte
index b31897c33..1a7239ac1 100644
--- a/sites/docs/src/lib/components/demos/dropdown-menu-demo.svelte
+++ b/sites/docs/src/lib/components/demos/dropdown-menu-demo.svelte
@@ -10,6 +10,7 @@
 	} from "$icons/index.js";
 
 	let checked = $state(false);
+	let invited = $state("");
 </script>
 
 <DropdownMenu.Root>
@@ -116,78 +117,104 @@
 				class="w-full max-w-[209px] rounded-xl border border-muted bg-background px-1 py-1.5 shadow-popover !ring-0 !ring-transparent"
 				sideOffset={10}
 			>
-				<DropdownMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>
-					<Avatar.Root
-						class="relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+				<DropdownMenu.RadioGroup bind:value={invited}>
+					<DropdownMenu.RadioItem
+						value="huntabyte"
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 					>
-						<Avatar.Image
-							src="https://github.com/huntabyte.png"
-							alt="@huntabyte"
-							class="aspect-square h-full w-full"
-						/>
-						<Avatar.Fallback
-							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xxs"
-							>HJ</Avatar.Fallback
-						>
-					</Avatar.Root>
-					@huntabyte
-				</DropdownMenu.Item>
-				<DropdownMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>
-					<Avatar.Root
-						class="relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+						{#snippet children({ checked })}
+							<Avatar.Root
+								class="relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+							>
+								<Avatar.Image
+									src="https://github.com/huntabyte.png"
+									alt="@huntabyte"
+									class="aspect-square h-full w-full"
+								/>
+								<Avatar.Fallback
+									class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xxs"
+									>HJ</Avatar.Fallback
+								>
+							</Avatar.Root>
+							@huntabyte
+							{#if checked}
+								×
+							{/if}
+						{/snippet}
+					</DropdownMenu.RadioItem>
+					<DropdownMenu.RadioItem
+						value="pavel"
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 					>
-						<Avatar.Image
-							src="https://github.com/pavelstianko.png"
-							alt="@pavel_stianko"
-							class="aspect-square h-full w-full"
-						/>
-						<Avatar.Fallback
-							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
-							>PS</Avatar.Fallback
-						>
-					</Avatar.Root>
-					@pavel_stianko
-				</DropdownMenu.Item>
-				<DropdownMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>
-					<Avatar.Root
-						class="relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+						{#snippet children({ checked })}
+							<Avatar.Root
+								class="relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+							>
+								<Avatar.Image
+									src="https://github.com/pavelstianko.png"
+									alt="@pavel_stianko"
+									class="aspect-square h-full w-full"
+								/>
+								<Avatar.Fallback
+									class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
+									>PS</Avatar.Fallback
+								>
+							</Avatar.Root>
+							@pavel_stianko
+							{#if checked}
+								×
+							{/if}
+						{/snippet}
+					</DropdownMenu.RadioItem>
+					<DropdownMenu.RadioItem
+						value="cokakoala"
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 					>
-						<Avatar.Image
-							src="https://github.com/adriangonz97.png"
-							alt="@cokakoala_"
-							class="aspect-square h-full w-full"
-						/>
-						<Avatar.Fallback
-							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
-							>CK</Avatar.Fallback
-						>
-					</Avatar.Root>
-					@cokakoala_
-				</DropdownMenu.Item>
-				<DropdownMenu.Item
-					class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
-				>
-					<Avatar.Root
-						class="relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+						{#snippet children({ checked })}
+							<Avatar.Root
+								class="relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+							>
+								<Avatar.Image
+									src="https://github.com/adriangonz97.png"
+									alt="@cokakoala_"
+									class="aspect-square h-full w-full"
+								/>
+								<Avatar.Fallback
+									class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
+									>CK</Avatar.Fallback
+								>
+							</Avatar.Root>
+							@cokakoala_
+							{#if checked}
+								×
+							{/if}
+						{/snippet}
+					</DropdownMenu.RadioItem>
+					<DropdownMenu.RadioItem
+						value="tglide"
+						class="flex h-10 select-none items-center rounded-button py-3 pl-3 pr-1.5 text-sm font-medium !ring-0 !ring-transparent data-[highlighted]:bg-muted"
 					>
-						<Avatar.Image
-							src="https://github.com/tglide.png"
-							alt="@tglide"
-							class="aspect-square h-full w-full"
-						/>
-						<Avatar.Fallback
-							class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
-							>TL</Avatar.Fallback
-						>
-					</Avatar.Root>
-					@thomasglopes
-				</DropdownMenu.Item>
+						{#snippet children({ checked })}
+							<Avatar.Root
+								class="relative mr-3 flex size-5 shrink-0 overflow-hidden rounded-full border border-foreground/50"
+							>
+								<Avatar.Image
+									src="https://github.com/tglide.png"
+									alt="@tglide"
+									class="aspect-square h-full w-full"
+								/>
+								<Avatar.Fallback
+									class="flex h-full w-full items-center justify-center rounded-full bg-muted text-xs"
+									>TL</Avatar.Fallback
+								>
+							</Avatar.Root>
+							@thomasglopes
+							{#if checked}
+								×
+							{/if}
+						{/snippet}
+					</DropdownMenu.RadioItem>
+				</DropdownMenu.RadioGroup>
 			</DropdownMenu.SubContent>
 		</DropdownMenu.Sub>
 	</DropdownMenu.Content>