diff --git a/.mcp.json b/.mcp.json
index 03b7976cc3f..80268502752 100644
--- a/.mcp.json
+++ b/.mcp.json
@@ -9,6 +9,14 @@
 				"tokenUrl": "https://api.superset.sh/api/auth/mcp/token",
 				"scopes": ["openid", "profile", "email"]
 			}
+		},
+		"expo-mcp": {
+			"type": "http",
+			"url": "https://mcp.expo.dev/mcp"
+		},
+		"maestro": {
+			"command": "maestro",
+			"args": ["mcp"]
 		}
 	}
 }
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/FilesView/FilesView.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/FilesView/FilesView.tsx
index 4ce396eb63a..a7f288e1075 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/FilesView/FilesView.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/RightSidebar/FilesView/FilesView.tsx
@@ -39,8 +39,8 @@ export function FilesView() {
 
 	const [searchTerm, setSearchTerm] = useState("");
 	const projectId = workspace?.project?.id;
-	const showHiddenFiles = useFileExplorerStore(
-		(s) => (projectId ? (s.showHiddenFiles[projectId] ?? false) : false),
+	const showHiddenFiles = useFileExplorerStore((s) =>
+		projectId ? (s.showHiddenFiles[projectId] ?? false) : false,
 	);
 	const toggleHiddenFiles = useFileExplorerStore((s) => s.toggleHiddenFiles);
 
diff --git a/apps/mobile/components/ui/accordion.tsx b/apps/mobile/components/ui/accordion.tsx
new file mode 100644
index 00000000000..d4a8263e65c
--- /dev/null
+++ b/apps/mobile/components/ui/accordion.tsx
@@ -0,0 +1,155 @@
+import * as AccordionPrimitive from "@rn-primitives/accordion";
+import { ChevronDown } from "lucide-react-native";
+import { Platform, Pressable, View } from "react-native";
+import Animated, {
+	FadeOutUp,
+	LayoutAnimationConfig,
+	LinearTransition,
+	useAnimatedStyle,
+	useDerivedValue,
+	withTiming,
+} from "react-native-reanimated";
+import { Icon } from "@/components/ui/icon";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+function Accordion({
+	children,
+	...props
+}: Omit<AccordionPrimitive.RootProps, "asChild"> &
+	React.RefAttributes<AccordionPrimitive.RootRef>) {
+	return (
+		<LayoutAnimationConfig skipEntering>
+			<AccordionPrimitive.Root
+				{...(props as AccordionPrimitive.RootProps)}
+				asChild={Platform.OS !== "web"}
+			>
+				<Animated.View layout={LinearTransition.duration(200)}>
+					{children}
+				</Animated.View>
+			</AccordionPrimitive.Root>
+		</LayoutAnimationConfig>
+	);
+}
+
+function AccordionItem({
+	children,
+	className,
+	value,
+	...props
+}: AccordionPrimitive.ItemProps &
+	React.RefAttributes<AccordionPrimitive.ItemRef>) {
+	return (
+		<AccordionPrimitive.Item
+			className={cn(
+				"border-border border-b",
+				Platform.select({ web: "last:border-b-0" }),
+				className,
+			)}
+			value={value}
+			asChild
+			{...props}
+		>
+			<Animated.View
+				className="native:overflow-hidden"
+				layout={Platform.select({ native: LinearTransition.duration(200) })}
+			>
+				{children}
+			</Animated.View>
+		</AccordionPrimitive.Item>
+	);
+}
+
+const Trigger = Platform.OS === "web" ? View : Pressable;
+
+function AccordionTrigger({
+	className,
+	children,
+	...props
+}: AccordionPrimitive.TriggerProps & {
+	children?: React.ReactNode;
+} & React.RefAttributes<AccordionPrimitive.TriggerRef>) {
+	const { isExpanded } = AccordionPrimitive.useItemContext();
+
+	const progress = useDerivedValue(
+		() =>
+			isExpanded
+				? withTiming(1, { duration: 250 })
+				: withTiming(0, { duration: 200 }),
+		[isExpanded],
+	);
+	const chevronStyle = useAnimatedStyle(
+		() => ({
+			transform: [{ rotate: `${progress.value * 180}deg` }],
+		}),
+		[progress],
+	);
+
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-left text-sm font-medium",
+				Platform.select({ web: "group-hover:underline" }),
+			)}
+		>
+			<AccordionPrimitive.Header>
+				<AccordionPrimitive.Trigger {...props} asChild={Platform.OS !== "web"}>
+					<Trigger
+						className={cn(
+							"flex-row items-start justify-between gap-4 rounded-md py-4 disabled:opacity-50",
+							Platform.select({
+								web: "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 outline-none transition-all hover:underline focus-visible:ring-[3px] disabled:pointer-events-none [&[data-state=open]>svg]:rotate-180",
+							}),
+							className,
+						)}
+					>
+						{children}
+						<Animated.View style={chevronStyle}>
+							<Icon
+								as={ChevronDown}
+								size={16}
+								className={cn(
+									"text-muted-foreground shrink-0",
+									Platform.select({
+										web: "pointer-events-none translate-y-0.5 transition-transform duration-200",
+									}),
+								)}
+							/>
+						</Animated.View>
+					</Trigger>
+				</AccordionPrimitive.Trigger>
+			</AccordionPrimitive.Header>
+		</TextClassContext.Provider>
+	);
+}
+
+function AccordionContent({
+	className,
+	children,
+	...props
+}: AccordionPrimitive.ContentProps &
+	React.RefAttributes<AccordionPrimitive.ContentRef>) {
+	const { isExpanded } = AccordionPrimitive.useItemContext();
+	return (
+		<TextClassContext.Provider value="text-sm">
+			<AccordionPrimitive.Content
+				className={cn(
+					"overflow-hidden",
+					Platform.select({
+						web: isExpanded ? "animate-accordion-down" : "animate-accordion-up",
+					}),
+				)}
+				{...props}
+			>
+				<Animated.View
+					exiting={Platform.select({ native: FadeOutUp.duration(200) })}
+					className={cn("pb-4", className)}
+				>
+					{children}
+				</Animated.View>
+			</AccordionPrimitive.Content>
+		</TextClassContext.Provider>
+	);
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
diff --git a/apps/mobile/components/ui/alert-dialog.tsx b/apps/mobile/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000000..e143a46b991
--- /dev/null
+++ b/apps/mobile/components/ui/alert-dialog.tsx
@@ -0,0 +1,167 @@
+import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
+import * as React from "react";
+import { Platform, View, type ViewProps } from "react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { buttonTextVariants, buttonVariants } from "@/components/ui/button";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function AlertDialogOverlay({
+	className,
+	children,
+	...props
+}: Omit<AlertDialogPrimitive.OverlayProps, "asChild"> &
+	React.RefAttributes<AlertDialogPrimitive.OverlayRef> & {
+		children?: React.ReactNode;
+	}) {
+	return (
+		<FullWindowOverlay>
+			<AlertDialogPrimitive.Overlay
+				className={cn(
+					"absolute bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center bg-black/50 p-2",
+					Platform.select({
+						web: "animate-in fade-in-0 fixed",
+					}),
+					className,
+				)}
+				{...props}
+			>
+				<NativeOnlyAnimatedView
+					entering={FadeIn.duration(200).delay(50)}
+					exiting={FadeOut.duration(150)}
+				>
+					{children}
+				</NativeOnlyAnimatedView>
+			</AlertDialogPrimitive.Overlay>
+		</FullWindowOverlay>
+	);
+}
+
+function AlertDialogContent({
+	className,
+	portalHost,
+	...props
+}: AlertDialogPrimitive.ContentProps &
+	React.RefAttributes<AlertDialogPrimitive.ContentRef> & {
+		portalHost?: string;
+	}) {
+	return (
+		<AlertDialogPortal hostName={portalHost}>
+			<AlertDialogOverlay>
+				<AlertDialogPrimitive.Content
+					className={cn(
+						"bg-background border-border z-50 flex flex-col gap-4 rounded-lg border p-6 shadow-lg shadow-black/5 sm:max-w-lg",
+						Platform.select({
+							web: "animate-in fade-in-0 zoom-in-95 web:max-w-[calc(100%-2rem)] duration-200",
+						}),
+						className,
+					)}
+					{...props}
+				/>
+			</AlertDialogOverlay>
+		</AlertDialogPortal>
+	);
+}
+
+function AlertDialogHeader({ className, ...props }: ViewProps) {
+	return (
+		<TextClassContext.Provider value="text-center sm:text-left">
+			<View className={cn("flex flex-col gap-2", className)} {...props} />
+		</TextClassContext.Provider>
+	);
+}
+
+function AlertDialogFooter({ className, ...props }: ViewProps) {
+	return (
+		<View
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogTitle({
+	className,
+	...props
+}: AlertDialogPrimitive.TitleProps &
+	React.RefAttributes<AlertDialogPrimitive.TitleRef>) {
+	return (
+		<AlertDialogPrimitive.Title
+			className={cn("text-foreground text-lg font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogDescription({
+	className,
+	...props
+}: AlertDialogPrimitive.DescriptionProps &
+	React.RefAttributes<AlertDialogPrimitive.DescriptionRef>) {
+	return (
+		<AlertDialogPrimitive.Description
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogAction({
+	className,
+	...props
+}: AlertDialogPrimitive.ActionProps &
+	React.RefAttributes<AlertDialogPrimitive.ActionRef>) {
+	return (
+		<TextClassContext.Provider value={buttonTextVariants({ className })}>
+			<AlertDialogPrimitive.Action
+				className={cn(buttonVariants(), className)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+function AlertDialogCancel({
+	className,
+	...props
+}: AlertDialogPrimitive.CancelProps &
+	React.RefAttributes<AlertDialogPrimitive.CancelRef>) {
+	return (
+		<TextClassContext.Provider
+			value={buttonTextVariants({ className, variant: "outline" })}
+		>
+			<AlertDialogPrimitive.Cancel
+				className={cn(buttonVariants({ variant: "outline" }), className)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+export {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogOverlay,
+	AlertDialogPortal,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+};
diff --git a/apps/mobile/components/ui/alert.tsx b/apps/mobile/components/ui/alert.tsx
new file mode 100644
index 00000000000..854b06a7815
--- /dev/null
+++ b/apps/mobile/components/ui/alert.tsx
@@ -0,0 +1,85 @@
+import type { LucideIcon } from "lucide-react-native";
+import * as React from "react";
+import { View, type ViewProps } from "react-native";
+import { Icon } from "@/components/ui/icon";
+import { Text, TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+function Alert({
+	className,
+	variant,
+	children,
+	icon,
+	iconClassName,
+	...props
+}: ViewProps &
+	React.RefAttributes<View> & {
+		icon: LucideIcon;
+		variant?: "default" | "destructive";
+		iconClassName?: string;
+	}) {
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-sm text-foreground",
+				variant === "destructive" && "text-destructive",
+				className,
+			)}
+		>
+			<View
+				role="alert"
+				className={cn(
+					"bg-card border-border relative w-full rounded-lg border px-4 pb-2 pt-3.5",
+					className,
+				)}
+				{...props}
+			>
+				<View className="absolute left-3.5 top-3">
+					<Icon
+						as={icon}
+						className={cn(
+							"size-4",
+							variant === "destructive" && "text-destructive",
+							iconClassName,
+						)}
+					/>
+				</View>
+				{children}
+			</View>
+		</TextClassContext.Provider>
+	);
+}
+
+function AlertTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+	return (
+		<Text
+			className={cn(
+				"mb-1 ml-0.5 min-h-4 pl-6 font-medium leading-none tracking-tight",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof Text> & React.RefAttributes<Text>) {
+	const textClass = React.useContext(TextClassContext);
+	return (
+		<Text
+			className={cn(
+				"text-muted-foreground ml-0.5 pb-1.5 pl-6 text-sm leading-relaxed",
+				textClass?.includes("text-destructive") && "text-destructive/90",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Alert, AlertDescription, AlertTitle };
diff --git a/apps/mobile/components/ui/aspect-ratio.tsx b/apps/mobile/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000000..0edd624e023
--- /dev/null
+++ b/apps/mobile/components/ui/aspect-ratio.tsx
@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@rn-primitives/aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };
diff --git a/apps/mobile/components/ui/avatar.tsx b/apps/mobile/components/ui/avatar.tsx
new file mode 100644
index 00000000000..1725edea7de
--- /dev/null
+++ b/apps/mobile/components/ui/avatar.tsx
@@ -0,0 +1,47 @@
+import * as AvatarPrimitive from "@rn-primitives/avatar";
+import { cn } from "@/lib/utils";
+
+function Avatar({
+	className,
+	...props
+}: AvatarPrimitive.RootProps & React.RefAttributes<AvatarPrimitive.RootRef>) {
+	return (
+		<AvatarPrimitive.Root
+			className={cn(
+				"relative flex size-8 shrink-0 overflow-hidden rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarImage({
+	className,
+	...props
+}: AvatarPrimitive.ImageProps & React.RefAttributes<AvatarPrimitive.ImageRef>) {
+	return (
+		<AvatarPrimitive.Image
+			className={cn("aspect-square size-full", className)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarFallback({
+	className,
+	...props
+}: AvatarPrimitive.FallbackProps &
+	React.RefAttributes<AvatarPrimitive.FallbackRef>) {
+	return (
+		<AvatarPrimitive.Fallback
+			className={cn(
+				"bg-muted flex size-full flex-row items-center justify-center rounded-full",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Avatar, AvatarFallback, AvatarImage };
diff --git a/apps/mobile/components/ui/badge.tsx b/apps/mobile/components/ui/badge.tsx
new file mode 100644
index 00000000000..5583e5683bc
--- /dev/null
+++ b/apps/mobile/components/ui/badge.tsx
@@ -0,0 +1,72 @@
+import * as Slot from "@rn-primitives/slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Platform, View, type ViewProps } from "react-native";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+	cn(
+		"border-border group shrink-0 flex-row items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5",
+		Platform.select({
+			web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive w-fit whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		}),
+	),
+	{
+		variants: {
+			variant: {
+				default: cn(
+					"bg-primary border-transparent",
+					Platform.select({ web: "[a&]:hover:bg-primary/90" }),
+				),
+				secondary: cn(
+					"bg-secondary border-transparent",
+					Platform.select({ web: "[a&]:hover:bg-secondary/90" }),
+				),
+				destructive: cn(
+					"bg-destructive border-transparent",
+					Platform.select({ web: "[a&]:hover:bg-destructive/90" }),
+				),
+				outline: Platform.select({
+					web: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+				}),
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+const badgeTextVariants = cva("text-xs font-medium", {
+	variants: {
+		variant: {
+			default: "text-primary-foreground",
+			secondary: "text-secondary-foreground",
+			destructive: "text-white",
+			outline: "text-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+type BadgeProps = ViewProps &
+	React.RefAttributes<View> & {
+		asChild?: boolean;
+	} & VariantProps<typeof badgeVariants>;
+
+function Badge({ className, variant, asChild, ...props }: BadgeProps) {
+	const Component = asChild ? Slot.View : View;
+	return (
+		<TextClassContext.Provider value={badgeTextVariants({ variant })}>
+			<Component
+				className={cn(badgeVariants({ variant }), className)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+export { Badge, badgeTextVariants, badgeVariants };
+export type { BadgeProps };
diff --git a/apps/mobile/components/ui/button.tsx b/apps/mobile/components/ui/button.tsx
index dff5292b0a9..3bb70e8c08c 100644
--- a/apps/mobile/components/ui/button.tsx
+++ b/apps/mobile/components/ui/button.tsx
@@ -3,6 +3,8 @@ import { Platform, Pressable } from "react-native";
 import { TextClassContext } from "@/components/ui/text";
 import { cn } from "@/lib/utils";
 
+// NOTE: group-* is not supported yet by Uniwind
+
 const buttonVariants = cva(
 	cn(
 		"group shrink-0 flex-row items-center justify-center gap-2 rounded-md shadow-none",
diff --git a/apps/mobile/components/ui/checkbox.tsx b/apps/mobile/components/ui/checkbox.tsx
new file mode 100644
index 00000000000..e7a1e177621
--- /dev/null
+++ b/apps/mobile/components/ui/checkbox.tsx
@@ -0,0 +1,53 @@
+import * as CheckboxPrimitive from "@rn-primitives/checkbox";
+import { Check } from "lucide-react-native";
+import { Platform } from "react-native";
+import { Icon } from "@/components/ui/icon";
+import { cn } from "@/lib/utils";
+
+const DEFAULT_HIT_SLOP = 24;
+
+function Checkbox({
+	className,
+	checkedClassName,
+	indicatorClassName,
+	iconClassName,
+	...props
+}: CheckboxPrimitive.RootProps &
+	React.RefAttributes<CheckboxPrimitive.RootRef> & {
+		checkedClassName?: string;
+		indicatorClassName?: string;
+		iconClassName?: string;
+	}) {
+	return (
+		<CheckboxPrimitive.Root
+			className={cn(
+				"border-input dark:bg-input/30 size-4 shrink-0 rounded-[4px] border shadow-sm shadow-black/5",
+				Platform.select({
+					web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer cursor-default outline-none transition-shadow focus-visible:ring-[3px] disabled:cursor-not-allowed",
+					native: "overflow-hidden",
+				}),
+				props.checked && cn("border-primary", checkedClassName),
+				props.disabled && "opacity-50",
+				className,
+			)}
+			hitSlop={DEFAULT_HIT_SLOP}
+			{...props}
+		>
+			<CheckboxPrimitive.Indicator
+				className={cn(
+					"bg-primary h-full w-full items-center justify-center",
+					indicatorClassName,
+				)}
+			>
+				<Icon
+					as={Check}
+					size={12}
+					strokeWidth={Platform.OS === "web" ? 2.5 : 3.5}
+					className={cn("text-primary-foreground", iconClassName)}
+				/>
+			</CheckboxPrimitive.Indicator>
+		</CheckboxPrimitive.Root>
+	);
+}
+
+export { Checkbox };
diff --git a/apps/mobile/components/ui/collapsible.tsx b/apps/mobile/components/ui/collapsible.tsx
new file mode 100644
index 00000000000..613bf3eeb23
--- /dev/null
+++ b/apps/mobile/components/ui/collapsible.tsx
@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@rn-primitives/collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+
+const CollapsibleContent = CollapsiblePrimitive.Content;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/apps/mobile/components/ui/context-menu.tsx b/apps/mobile/components/ui/context-menu.tsx
new file mode 100644
index 00000000000..d9a1ffb892a
--- /dev/null
+++ b/apps/mobile/components/ui/context-menu.tsx
@@ -0,0 +1,324 @@
+import * as ContextMenuPrimitive from "@rn-primitives/context-menu";
+import {
+	Check,
+	ChevronDown,
+	ChevronRight,
+	ChevronUp,
+} from "lucide-react-native";
+import * as React from "react";
+import {
+	Platform,
+	type StyleProp,
+	StyleSheet,
+	Text,
+	type TextProps,
+	View,
+	type ViewStyle,
+} from "react-native";
+import { FadeIn } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { Icon } from "@/components/ui/icon";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+function ContextMenuSubTrigger({
+	className,
+	inset,
+	children,
+	iconClassName,
+	...props
+}: ContextMenuPrimitive.SubTriggerProps &
+	React.RefAttributes<ContextMenuPrimitive.SubTriggerRef> & {
+		children?: React.ReactNode;
+		iconClassName?: string;
+		inset?: boolean;
+	}) {
+	const { open } = ContextMenuPrimitive.useSubContext();
+	const icon =
+		Platform.OS === "web" ? ChevronRight : open ? ChevronUp : ChevronDown;
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-sm select-none group-active:text-accent-foreground",
+				open && "text-accent-foreground",
+			)}
+		>
+			<ContextMenuPrimitive.SubTrigger
+				className={cn(
+					"active:bg-accent group flex flex-row items-center justify-between rounded-sm px-2 py-2 sm:py-1.5",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none",
+					}),
+					open && cn("bg-accent", Platform.select({ native: "mb-1" })),
+					inset && "pl-8",
+				)}
+				{...props}
+			>
+				{children}
+				<Icon
+					as={icon}
+					className={cn("text-foreground size-4 shrink-0", iconClassName)}
+				/>
+			</ContextMenuPrimitive.SubTrigger>
+		</TextClassContext.Provider>
+	);
+}
+
+function ContextMenuSubContent({
+	className,
+	...props
+}: ContextMenuPrimitive.SubContentProps &
+	React.RefAttributes<ContextMenuPrimitive.SubContentRef>) {
+	return (
+		<NativeOnlyAnimatedView entering={FadeIn}>
+			<ContextMenuPrimitive.SubContent
+				className={cn(
+					"bg-popover border-border overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5",
+					Platform.select({
+						web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]",
+					}),
+					className,
+				)}
+				{...props}
+			/>
+		</NativeOnlyAnimatedView>
+	);
+}
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function ContextMenuContent({
+	className,
+	overlayClassName,
+	overlayStyle,
+	portalHost,
+	...props
+}: ContextMenuPrimitive.ContentProps &
+	React.RefAttributes<ContextMenuPrimitive.ContentRef> & {
+		overlayStyle?: StyleProp<ViewStyle>;
+		overlayClassName?: string;
+		portalHost?: string;
+	}) {
+	return (
+		<ContextMenuPrimitive.Portal hostName={portalHost}>
+			<FullWindowOverlay>
+				<ContextMenuPrimitive.Overlay
+					style={Platform.select({
+						web: overlayStyle ?? undefined,
+						native: overlayStyle
+							? StyleSheet.flatten([
+									StyleSheet.absoluteFill,
+									overlayStyle as typeof StyleSheet.absoluteFill,
+								])
+							: StyleSheet.absoluteFill,
+					})}
+					className={overlayClassName}
+				>
+					<NativeOnlyAnimatedView entering={FadeIn}>
+						<TextClassContext.Provider value="text-popover-foreground">
+							<ContextMenuPrimitive.Content
+								className={cn(
+									"bg-popover border-border min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5",
+									Platform.select({
+										web: cn(
+											"animate-in fade-in-0 zoom-in-95 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) z-50 cursor-default",
+											props.side === "bottom" && "slide-in-from-top-2",
+											props.side === "top" && "slide-in-from-bottom-2",
+										),
+									}),
+									className,
+								)}
+								{...props}
+							/>
+						</TextClassContext.Provider>
+					</NativeOnlyAnimatedView>
+				</ContextMenuPrimitive.Overlay>
+			</FullWindowOverlay>
+		</ContextMenuPrimitive.Portal>
+	);
+}
+
+function ContextMenuItem({
+	className,
+	inset,
+	variant,
+	...props
+}: ContextMenuPrimitive.ItemProps &
+	React.RefAttributes<ContextMenuPrimitive.ItemRef> & {
+		className?: string;
+		inset?: boolean;
+		variant?: "default" | "destructive";
+	}) {
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"select-none text-sm text-popover-foreground group-active:text-popover-foreground",
+				variant === "destructive" &&
+					"text-destructive group-active:text-destructive",
+			)}
+		>
+			<ContextMenuPrimitive.Item
+				className={cn(
+					"active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 sm:py-1.5",
+					Platform.select({
+						web: cn(
+							"focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+							variant === "destructive" &&
+								"focus:bg-destructive/10 dark:focus:bg-destructive/20",
+						),
+					}),
+					variant === "destructive" &&
+						"active:bg-destructive/10 dark:active:bg-destructive/20",
+					props.disabled && "opacity-50",
+					inset && "pl-8",
+					className,
+				)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+function ContextMenuCheckboxItem({
+	className,
+	children,
+	...props
+}: ContextMenuPrimitive.CheckboxItemProps &
+	React.RefAttributes<ContextMenuPrimitive.CheckboxItemRef> & {
+		children?: React.ReactNode;
+	}) {
+	return (
+		<TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+			<ContextMenuPrimitive.CheckboxItem
+				className={cn(
+					"active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+					}),
+					props.disabled && "opacity-50",
+					className,
+				)}
+				{...props}
+			>
+				<View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+					<ContextMenuPrimitive.ItemIndicator>
+						<Icon
+							as={Check}
+							className={cn(
+								"text-foreground size-4",
+								Platform.select({ web: "pointer-events-none" }),
+							)}
+						/>
+					</ContextMenuPrimitive.ItemIndicator>
+				</View>
+				{children}
+			</ContextMenuPrimitive.CheckboxItem>
+		</TextClassContext.Provider>
+	);
+}
+
+function ContextMenuRadioItem({
+	className,
+	children,
+	...props
+}: ContextMenuPrimitive.RadioItemProps &
+	React.RefAttributes<ContextMenuPrimitive.RadioItemRef> & {
+		children?: React.ReactNode;
+	}) {
+	return (
+		<TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+			<ContextMenuPrimitive.RadioItem
+				className={cn(
+					"active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+					}),
+					props.disabled && "opacity-50",
+					className,
+				)}
+				{...props}
+			>
+				<View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+					<ContextMenuPrimitive.ItemIndicator>
+						<View className="bg-foreground h-2 w-2 rounded-full" />
+					</ContextMenuPrimitive.ItemIndicator>
+				</View>
+				{children}
+			</ContextMenuPrimitive.RadioItem>
+		</TextClassContext.Provider>
+	);
+}
+
+function ContextMenuLabel({
+	className,
+	inset,
+	...props
+}: ContextMenuPrimitive.LabelProps &
+	React.RefAttributes<ContextMenuPrimitive.LabelRef> & {
+		className?: string;
+		inset?: boolean;
+	}) {
+	return (
+		<ContextMenuPrimitive.Label
+			className={cn(
+				"text-foreground px-2 py-2 text-sm font-medium sm:py-1.5",
+				inset && "pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSeparator({
+	className,
+	...props
+}: ContextMenuPrimitive.SeparatorProps &
+	React.RefAttributes<ContextMenuPrimitive.SeparatorRef>) {
+	return (
+		<ContextMenuPrimitive.Separator
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuShortcut({
+	className,
+	...props
+}: TextProps & React.RefAttributes<Text>) {
+	return (
+		<Text
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	ContextMenu,
+	ContextMenuCheckboxItem,
+	ContextMenuContent,
+	ContextMenuGroup,
+	ContextMenuItem,
+	ContextMenuLabel,
+	ContextMenuRadioGroup,
+	ContextMenuRadioItem,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuTrigger,
+};
diff --git a/apps/mobile/components/ui/dialog.tsx b/apps/mobile/components/ui/dialog.tsx
new file mode 100644
index 00000000000..42da9c3ec56
--- /dev/null
+++ b/apps/mobile/components/ui/dialog.tsx
@@ -0,0 +1,164 @@
+import * as DialogPrimitive from "@rn-primitives/dialog";
+import { X } from "lucide-react-native";
+import * as React from "react";
+import { Platform, Text, View, type ViewProps } from "react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { Icon } from "@/components/ui/icon";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function DialogOverlay({
+	className,
+	children,
+	...props
+}: Omit<DialogPrimitive.OverlayProps, "asChild"> &
+	React.RefAttributes<DialogPrimitive.OverlayRef> & {
+		children?: React.ReactNode;
+	}) {
+	return (
+		<FullWindowOverlay>
+			<DialogPrimitive.Overlay
+				className={cn(
+					"absolute bottom-0 left-0 right-0 top-0 z-50 flex items-center justify-center bg-black/50 p-2",
+					Platform.select({
+						web: "animate-in fade-in-0 fixed cursor-default [&>*]:cursor-auto",
+					}),
+					className,
+				)}
+				{...props}
+				asChild={Platform.OS !== "web"}
+			>
+				<NativeOnlyAnimatedView
+					entering={FadeIn.duration(200)}
+					exiting={FadeOut.duration(150)}
+				>
+					<NativeOnlyAnimatedView
+						entering={FadeIn.delay(50)}
+						exiting={FadeOut.duration(150)}
+					>
+						{children}
+					</NativeOnlyAnimatedView>
+				</NativeOnlyAnimatedView>
+			</DialogPrimitive.Overlay>
+		</FullWindowOverlay>
+	);
+}
+function DialogContent({
+	className,
+	portalHost,
+	children,
+	...props
+}: DialogPrimitive.ContentProps &
+	React.RefAttributes<DialogPrimitive.ContentRef> & {
+		portalHost?: string;
+	}) {
+	return (
+		<DialogPortal hostName={portalHost}>
+			<DialogOverlay>
+				<DialogPrimitive.Content
+					className={cn(
+						"bg-background border-border z-50 mx-auto flex w-full flex-col gap-4 rounded-lg border p-6 shadow-lg shadow-black/5 sm:max-w-lg",
+						Platform.select({
+							web: "animate-in fade-in-0 zoom-in-95 web:max-w-[calc(100%-2rem)] duration-200",
+						}),
+						className,
+					)}
+					{...props}
+				>
+					{children}
+					<DialogPrimitive.Close
+						className={cn(
+							"absolute right-4 top-4 rounded opacity-70 active:opacity-100",
+							Platform.select({
+								web: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
+							}),
+						)}
+						hitSlop={12}
+					>
+						<Icon
+							as={X}
+							className={cn(
+								"text-accent-foreground web:pointer-events-none size-4 shrink-0",
+							)}
+						/>
+						<Text className="sr-only">Close</Text>
+					</DialogPrimitive.Close>
+				</DialogPrimitive.Content>
+			</DialogOverlay>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: ViewProps) {
+	return (
+		<View
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({ className, ...props }: ViewProps) {
+	return (
+		<View
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogTitle({
+	className,
+	...props
+}: DialogPrimitive.TitleProps & React.RefAttributes<DialogPrimitive.TitleRef>) {
+	return (
+		<DialogPrimitive.Title
+			className={cn(
+				"text-foreground text-lg font-semibold leading-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({
+	className,
+	...props
+}: DialogPrimitive.DescriptionProps &
+	React.RefAttributes<DialogPrimitive.DescriptionRef>) {
+	return (
+		<DialogPrimitive.Description
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};
diff --git a/apps/mobile/components/ui/dropdown-menu.tsx b/apps/mobile/components/ui/dropdown-menu.tsx
new file mode 100644
index 00000000000..e0c0de0ac60
--- /dev/null
+++ b/apps/mobile/components/ui/dropdown-menu.tsx
@@ -0,0 +1,331 @@
+import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
+import {
+	Check,
+	ChevronDown,
+	ChevronRight,
+	ChevronUp,
+} from "lucide-react-native";
+import * as React from "react";
+import {
+	Platform,
+	type StyleProp,
+	StyleSheet,
+	Text,
+	type TextProps,
+	View,
+	type ViewStyle,
+} from "react-native";
+import { FadeIn } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { Icon } from "@/components/ui/icon";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	iconClassName,
+	...props
+}: DropdownMenuPrimitive.SubTriggerProps &
+	React.RefAttributes<DropdownMenuPrimitive.SubTriggerRef> & {
+		children?: React.ReactNode;
+		iconClassName?: string;
+		inset?: boolean;
+	}) {
+	const { open } = DropdownMenuPrimitive.useSubContext();
+	const icon =
+		Platform.OS === "web" ? ChevronRight : open ? ChevronUp : ChevronDown;
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-sm select-none group-active:text-accent-foreground",
+				open && "text-accent-foreground",
+			)}
+		>
+			<DropdownMenuPrimitive.SubTrigger
+				className={cn(
+					"active:bg-accent group flex flex-row items-center justify-between rounded-sm px-2 py-2 sm:py-1.5",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none",
+					}),
+					open && "bg-accent",
+					inset && "pl-8",
+				)}
+				{...props}
+			>
+				{children}
+				<Icon
+					as={icon}
+					className={cn("text-foreground size-4 shrink-0", iconClassName)}
+				/>
+			</DropdownMenuPrimitive.SubTrigger>
+		</TextClassContext.Provider>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: DropdownMenuPrimitive.SubContentProps &
+	React.RefAttributes<DropdownMenuPrimitive.SubContentRef>) {
+	return (
+		<NativeOnlyAnimatedView entering={FadeIn}>
+			<DropdownMenuPrimitive.SubContent
+				className={cn(
+					"bg-popover border-border overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5",
+					Platform.select({
+						web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]",
+					}),
+					className,
+				)}
+				{...props}
+			/>
+		</NativeOnlyAnimatedView>
+	);
+}
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function DropdownMenuContent({
+	className,
+	overlayClassName,
+	overlayStyle,
+	portalHost,
+	...props
+}: DropdownMenuPrimitive.ContentProps &
+	React.RefAttributes<DropdownMenuPrimitive.ContentRef> & {
+		overlayStyle?: StyleProp<ViewStyle>;
+		overlayClassName?: string;
+		portalHost?: string;
+	}) {
+	return (
+		<DropdownMenuPrimitive.Portal hostName={portalHost}>
+			<FullWindowOverlay>
+				<DropdownMenuPrimitive.Overlay
+					style={Platform.select({
+						web: overlayStyle ?? undefined,
+						native: overlayStyle
+							? StyleSheet.flatten([
+									StyleSheet.absoluteFill,
+									overlayStyle as typeof StyleSheet.absoluteFill,
+								])
+							: StyleSheet.absoluteFill,
+					})}
+					className={overlayClassName}
+				>
+					<NativeOnlyAnimatedView entering={FadeIn}>
+						<TextClassContext.Provider value="text-popover-foreground">
+							<DropdownMenuPrimitive.Content
+								className={cn(
+									"bg-popover border-border min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5",
+									Platform.select({
+										web: cn(
+											"animate-in fade-in-0 zoom-in-95 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) z-50 cursor-default",
+											props.side === "bottom" && "slide-in-from-top-2",
+											props.side === "top" && "slide-in-from-bottom-2",
+										),
+									}),
+									className,
+								)}
+								{...props}
+							/>
+						</TextClassContext.Provider>
+					</NativeOnlyAnimatedView>
+				</DropdownMenuPrimitive.Overlay>
+			</FullWindowOverlay>
+		</DropdownMenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant,
+	...props
+}: DropdownMenuPrimitive.ItemProps &
+	React.RefAttributes<DropdownMenuPrimitive.ItemRef> & {
+		className?: string;
+		inset?: boolean;
+		variant?: "default" | "destructive";
+	}) {
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"select-none text-sm text-popover-foreground group-active:text-popover-foreground",
+				variant === "destructive" &&
+					"text-destructive group-active:text-destructive",
+			)}
+		>
+			<DropdownMenuPrimitive.Item
+				className={cn(
+					"active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 sm:py-1.5",
+					Platform.select({
+						web: cn(
+							"focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+							variant === "destructive" &&
+								"focus:bg-destructive/10 dark:focus:bg-destructive/20",
+						),
+					}),
+					variant === "destructive" &&
+						"active:bg-destructive/10 dark:active:bg-destructive/20",
+					props.disabled && "opacity-50",
+					inset && "pl-8",
+					className,
+				)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	...props
+}: DropdownMenuPrimitive.CheckboxItemProps &
+	React.RefAttributes<DropdownMenuPrimitive.CheckboxItemRef> & {
+		children?: React.ReactNode;
+	}) {
+	return (
+		<TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+			<DropdownMenuPrimitive.CheckboxItem
+				className={cn(
+					"active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+					}),
+					props.disabled && "opacity-50",
+					className,
+				)}
+				{...props}
+			>
+				<View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+					<DropdownMenuPrimitive.ItemIndicator>
+						<Icon
+							as={Check}
+							className={cn(
+								"text-foreground size-4",
+								Platform.select({ web: "pointer-events-none" }),
+							)}
+						/>
+					</DropdownMenuPrimitive.ItemIndicator>
+				</View>
+				{children}
+			</DropdownMenuPrimitive.CheckboxItem>
+		</TextClassContext.Provider>
+	);
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: DropdownMenuPrimitive.RadioItemProps &
+	React.RefAttributes<DropdownMenuPrimitive.RadioItemRef> & {
+		children?: React.ReactNode;
+	}) {
+	return (
+		<TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+			<DropdownMenuPrimitive.RadioItem
+				className={cn(
+					"active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+					}),
+					props.disabled && "opacity-50",
+					className,
+				)}
+				{...props}
+			>
+				<View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+					<DropdownMenuPrimitive.ItemIndicator>
+						<View className="bg-foreground h-2 w-2 rounded-full" />
+					</DropdownMenuPrimitive.ItemIndicator>
+				</View>
+				{children}
+			</DropdownMenuPrimitive.RadioItem>
+		</TextClassContext.Provider>
+	);
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: DropdownMenuPrimitive.LabelProps &
+	React.RefAttributes<DropdownMenuPrimitive.LabelRef> & {
+		className?: string;
+		inset?: boolean;
+	}) {
+	return (
+		<DropdownMenuPrimitive.Label
+			className={cn(
+				"text-foreground px-2 py-2 text-sm font-medium sm:py-1.5",
+				inset && "pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: DropdownMenuPrimitive.SeparatorProps &
+	React.RefAttributes<DropdownMenuPrimitive.SeparatorRef>) {
+	return (
+		<DropdownMenuPrimitive.Separator
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({
+	className,
+	...props
+}: TextProps & React.RefAttributes<Text>) {
+	return (
+		<Text
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+};
diff --git a/apps/mobile/components/ui/hover-card.tsx b/apps/mobile/components/ui/hover-card.tsx
new file mode 100644
index 00000000000..4d88a7c75a7
--- /dev/null
+++ b/apps/mobile/components/ui/hover-card.tsx
@@ -0,0 +1,56 @@
+import * as HoverCardPrimitive from "@rn-primitives/hover-card";
+import * as React from "react";
+import { Platform, StyleSheet } from "react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function HoverCardContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: HoverCardPrimitive.ContentProps &
+	React.RefAttributes<HoverCardPrimitive.ContentRef>) {
+	return (
+		<HoverCardPrimitive.Portal>
+			<FullWindowOverlay>
+				<HoverCardPrimitive.Overlay
+					style={Platform.select({ native: StyleSheet.absoluteFill })}
+				>
+					<NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut}>
+						<TextClassContext.Provider value="text-popover-foreground">
+							<HoverCardPrimitive.Content
+								align={align}
+								sideOffset={sideOffset}
+								className={cn(
+									"bg-popover border-border outline-hidden z-50 w-64 rounded-md border p-4 shadow-md shadow-black/5",
+									Platform.select({
+										web: cn(
+											"animate-in fade-in-0 zoom-in-95 origin-(--radix-hover-card-content-transform-origin) cursor-default [&>*]:cursor-auto",
+											props.side === "bottom" && "slide-in-from-top-2",
+											props.side === "top" && "slide-in-from-bottom-2",
+										),
+									}),
+									className,
+								)}
+								{...props}
+							/>
+						</TextClassContext.Provider>
+					</NativeOnlyAnimatedView>
+				</HoverCardPrimitive.Overlay>
+			</FullWindowOverlay>
+		</HoverCardPrimitive.Portal>
+	);
+}
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };
diff --git a/apps/mobile/components/ui/icon.tsx b/apps/mobile/components/ui/icon.tsx
new file mode 100644
index 00000000000..94d2523a80c
--- /dev/null
+++ b/apps/mobile/components/ui/icon.tsx
@@ -0,0 +1,54 @@
+import type { LucideIcon, LucideProps } from "lucide-react-native";
+import { withUniwind } from "uniwind";
+import { cn } from "@/lib/utils";
+
+type IconProps = LucideProps & {
+	as: LucideIcon;
+};
+
+function IconImpl({ as: IconComponent, ...props }: IconProps) {
+	return <IconComponent {...props} />;
+}
+
+const StyledIcon = withUniwind(IconImpl, {
+	size: {
+		fromClassName: "className",
+		styleProperty: "width",
+	},
+	color: {
+		fromClassName: "className",
+		styleProperty: "color",
+	},
+});
+
+/**
+ * A wrapper component for Lucide icons with Uniwind `className` support via `withUniwind`.
+ *
+ * This component allows you to render any Lucide icon while applying utility classes
+ * using `uniwind`. It avoids the need to wrap or configure each icon individually.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import { ArrowRight } from 'lucide-react-native';
+ * import { Icon } from '@/registry/uniwind/registry/components/ui/icon';
+ *
+ * <Icon as={ArrowRight} className="text-red-500 size-4" />
+ * ```
+ *
+ * @param {LucideIcon} as - The Lucide icon component to render.
+ * @param {string} className - Utility classes to style the icon using Uniwind.
+ * @param {number} size - Icon size (overrides the size class).
+ * @param {...LucideProps} ...props - Additional Lucide icon props passed to the "as" icon.
+ */
+function Icon({ as: IconComponent, className, ...props }: IconProps) {
+	return (
+		<StyledIcon
+			as={IconComponent}
+			className={cn("text-foreground size-5", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Icon };
diff --git a/apps/mobile/components/ui/label.tsx b/apps/mobile/components/ui/label.tsx
new file mode 100644
index 00000000000..bca5ff9e1a8
--- /dev/null
+++ b/apps/mobile/components/ui/label.tsx
@@ -0,0 +1,41 @@
+import * as LabelPrimitive from "@rn-primitives/label";
+import { Platform } from "react-native";
+import { cn } from "@/lib/utils";
+
+function Label({
+	className,
+	onPress,
+	onLongPress,
+	onPressIn,
+	onPressOut,
+	disabled,
+	...props
+}: LabelPrimitive.TextProps & React.RefAttributes<LabelPrimitive.TextRef>) {
+	return (
+		<LabelPrimitive.Root
+			className={cn(
+				"flex select-none flex-row items-center gap-2",
+				Platform.select({
+					web: "cursor-default leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+				}),
+				disabled && "opacity-50",
+			)}
+			onPress={onPress}
+			onLongPress={onLongPress}
+			onPressIn={onPressIn}
+			onPressOut={onPressOut}
+			disabled={disabled}
+		>
+			<LabelPrimitive.Text
+				className={cn(
+					"text-foreground text-sm font-medium",
+					Platform.select({ web: "leading-none" }),
+					className,
+				)}
+				{...props}
+			/>
+		</LabelPrimitive.Root>
+	);
+}
+
+export { Label };
diff --git a/apps/mobile/components/ui/menubar.tsx b/apps/mobile/components/ui/menubar.tsx
new file mode 100644
index 00000000000..3c208d23c14
--- /dev/null
+++ b/apps/mobile/components/ui/menubar.tsx
@@ -0,0 +1,396 @@
+import * as MenubarPrimitive from "@rn-primitives/menubar";
+import { Portal } from "@rn-primitives/portal";
+import {
+	Check,
+	ChevronDown,
+	ChevronRight,
+	ChevronUp,
+} from "lucide-react-native";
+import * as React from "react";
+import {
+	Platform,
+	Pressable,
+	type StyleProp,
+	StyleSheet,
+	Text,
+	type TextProps,
+	View,
+	type ViewStyle,
+} from "react-native";
+import { FadeIn } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { Icon } from "@/components/ui/icon";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function Menubar({
+	className,
+	value: valueProp,
+	onValueChange: onValueChangeProp,
+	...props
+}: MenubarPrimitive.RootProps & React.RefAttributes<MenubarPrimitive.RootRef>) {
+	const id = React.useId();
+	const [value, setValue] = React.useState<string | undefined>(undefined);
+
+	function closeMenu() {
+		if (onValueChangeProp) {
+			onValueChangeProp(undefined);
+			return;
+		}
+		setValue(undefined);
+	}
+
+	return (
+		<>
+			{Platform.OS !== "web" && (value || valueProp) ? (
+				<Portal name={`menubar-overlay-${id}`}>
+					<Pressable onPress={closeMenu} style={StyleSheet.absoluteFill} />
+				</Portal>
+			) : null}
+			<MenubarPrimitive.Root
+				className={cn(
+					"bg-background border-border flex h-10 flex-row items-center gap-1 rounded-md border p-1 shadow-sm shadow-black/5 sm:h-9",
+					className,
+				)}
+				value={value ?? valueProp}
+				onValueChange={onValueChangeProp ?? setValue}
+				{...props}
+			/>
+		</>
+	);
+}
+
+function MenubarTrigger({
+	className,
+	...props
+}: MenubarPrimitive.TriggerProps &
+	React.RefAttributes<MenubarPrimitive.TriggerRef>) {
+	const { value } = MenubarPrimitive.useRootContext();
+	const { value: itemValue } = MenubarPrimitive.useMenuContext();
+
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-sm font-medium select-none group-active:text-accent-foreground",
+				value === itemValue && "text-accent-foreground",
+			)}
+		>
+			<MenubarPrimitive.Trigger
+				className={cn(
+					"group flex items-center rounded-md px-2 py-1.5 sm:py-1",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none",
+					}),
+					value === itemValue && "bg-accent",
+					className,
+				)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+function MenubarSubTrigger({
+	className,
+	inset,
+	children,
+	iconClassName,
+	...props
+}: MenubarPrimitive.SubTriggerProps &
+	React.RefAttributes<MenubarPrimitive.SubTriggerRef> & {
+		children?: React.ReactNode;
+		iconClassName?: string;
+		inset?: boolean;
+	}) {
+	const { open } = MenubarPrimitive.useSubContext();
+	const icon =
+		Platform.OS === "web" ? ChevronRight : open ? ChevronUp : ChevronDown;
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-sm select-none group-active:text-accent-foreground",
+				open && "text-accent-foreground",
+			)}
+		>
+			<MenubarPrimitive.SubTrigger
+				className={cn(
+					"active:bg-accent group flex flex-row items-center justify-between rounded-sm px-2 py-2 sm:py-1.5",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none",
+					}),
+					open && "bg-accent",
+					inset && "pl-8",
+				)}
+				{...props}
+			>
+				{children}
+				<Icon
+					as={icon}
+					className={cn("text-foreground size-4 shrink-0", iconClassName)}
+				/>
+			</MenubarPrimitive.SubTrigger>
+		</TextClassContext.Provider>
+	);
+}
+
+function MenubarSubContent({
+	className,
+	...props
+}: MenubarPrimitive.SubContentProps &
+	React.RefAttributes<MenubarPrimitive.SubContentRef>) {
+	return (
+		<NativeOnlyAnimatedView entering={FadeIn}>
+			<MenubarPrimitive.SubContent
+				className={cn(
+					"bg-popover border-border overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5",
+					Platform.select({
+						web: "animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]",
+					}),
+					className,
+				)}
+				{...props}
+			/>
+		</NativeOnlyAnimatedView>
+	);
+}
+
+function MenubarContent({
+	className,
+	overlayClassName,
+	overlayStyle,
+	portalHost,
+	align = "start",
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
+}: MenubarPrimitive.ContentProps &
+	React.RefAttributes<MenubarPrimitive.ContentRef> & {
+		overlayStyle?: StyleProp<ViewStyle>;
+		overlayClassName?: string;
+		portalHost?: string;
+	}) {
+	return (
+		<MenubarPrimitive.Portal hostName={portalHost}>
+			<FullWindowOverlay>
+				<NativeOnlyAnimatedView
+					entering={FadeIn}
+					style={StyleSheet.absoluteFill}
+					pointerEvents="box-none"
+				>
+					<TextClassContext.Provider value="text-popover-foreground">
+						<MenubarPrimitive.Content
+							className={cn(
+								"bg-popover border-border min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5",
+								Platform.select({
+									web: cn(
+										"animate-in fade-in-0 zoom-in-95 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) z-50 cursor-default",
+										props.side === "bottom" && "slide-in-from-top-2",
+										props.side === "top" && "slide-in-from-bottom-2",
+									),
+								}),
+								className,
+							)}
+							align={align}
+							alignOffset={alignOffset}
+							sideOffset={sideOffset}
+							{...props}
+						/>
+					</TextClassContext.Provider>
+				</NativeOnlyAnimatedView>
+			</FullWindowOverlay>
+		</MenubarPrimitive.Portal>
+	);
+}
+
+function MenubarItem({
+	className,
+	inset,
+	variant,
+	...props
+}: MenubarPrimitive.ItemProps &
+	React.RefAttributes<MenubarPrimitive.ItemRef> & {
+		className?: string;
+		inset?: boolean;
+		variant?: "default" | "destructive";
+	}) {
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"select-none text-sm text-popover-foreground group-active:text-popover-foreground",
+				variant === "destructive" &&
+					"text-destructive group-active:text-destructive",
+			)}
+		>
+			<MenubarPrimitive.Item
+				className={cn(
+					"active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 sm:py-1.5",
+					Platform.select({
+						web: cn(
+							"focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+							variant === "destructive" &&
+								"focus:bg-destructive/10 dark:focus:bg-destructive/20",
+						),
+					}),
+					variant === "destructive" &&
+						"active:bg-destructive/10 dark:active:bg-destructive/20",
+					props.disabled && "opacity-50",
+					inset && "pl-8",
+					className,
+				)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+function MenubarCheckboxItem({
+	className,
+	children,
+	...props
+}: MenubarPrimitive.CheckboxItemProps &
+	React.RefAttributes<MenubarPrimitive.CheckboxItemRef> & {
+		children?: React.ReactNode;
+	}) {
+	return (
+		<TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+			<MenubarPrimitive.CheckboxItem
+				className={cn(
+					"active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+					}),
+					props.disabled && "opacity-50",
+					className,
+				)}
+				{...props}
+			>
+				<View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+					<MenubarPrimitive.ItemIndicator>
+						<Icon
+							as={Check}
+							className={cn(
+								"text-foreground size-4",
+								Platform.select({ web: "pointer-events-none" }),
+							)}
+						/>
+					</MenubarPrimitive.ItemIndicator>
+				</View>
+				{children}
+			</MenubarPrimitive.CheckboxItem>
+		</TextClassContext.Provider>
+	);
+}
+
+function MenubarRadioItem({
+	className,
+	children,
+	...props
+}: MenubarPrimitive.RadioItemProps &
+	React.RefAttributes<MenubarPrimitive.RadioItemRef> & {
+		children?: React.ReactNode;
+	}) {
+	return (
+		<TextClassContext.Provider value="text-sm text-popover-foreground select-none group-active:text-accent-foreground">
+			<MenubarPrimitive.RadioItem
+				className={cn(
+					"active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5",
+					Platform.select({
+						web: "focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none",
+					}),
+					props.disabled && "opacity-50",
+					className,
+				)}
+				{...props}
+			>
+				<View className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+					<MenubarPrimitive.ItemIndicator>
+						<View className="bg-foreground h-2 w-2 rounded-full" />
+					</MenubarPrimitive.ItemIndicator>
+				</View>
+				{children}
+			</MenubarPrimitive.RadioItem>
+		</TextClassContext.Provider>
+	);
+}
+
+function MenubarLabel({
+	className,
+	inset,
+	...props
+}: MenubarPrimitive.LabelProps &
+	React.RefAttributes<MenubarPrimitive.LabelRef> & {
+		className?: string;
+		inset?: boolean;
+	}) {
+	return (
+		<MenubarPrimitive.Label
+			className={cn(
+				"text-foreground px-2 py-2 text-sm font-medium sm:py-1.5",
+				inset && "pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSeparator({
+	className,
+	...props
+}: MenubarPrimitive.SeparatorProps &
+	React.RefAttributes<MenubarPrimitive.SeparatorRef>) {
+	return (
+		<MenubarPrimitive.Separator
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarShortcut({
+	className,
+	...props
+}: TextProps & React.RefAttributes<Text>) {
+	return (
+		<Text
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Menubar,
+	MenubarCheckboxItem,
+	MenubarContent,
+	MenubarGroup,
+	MenubarItem,
+	MenubarLabel,
+	MenubarMenu,
+	MenubarPortal,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarSeparator,
+	MenubarShortcut,
+	MenubarSub,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarTrigger,
+};
diff --git a/apps/mobile/components/ui/native-only-animated-view.tsx b/apps/mobile/components/ui/native-only-animated-view.tsx
new file mode 100644
index 00000000000..78e707fb895
--- /dev/null
+++ b/apps/mobile/components/ui/native-only-animated-view.tsx
@@ -0,0 +1,24 @@
+import { Platform } from "react-native";
+import Animated from "react-native-reanimated";
+
+/**
+ * This component is used to wrap animated views that should only be animated on native.
+ * @param props - The props for the animated view.
+ * @returns The animated view if the platform is native, otherwise the children.
+ * @example
+ * <NativeOnlyAnimatedView entering={FadeIn} exiting={FadeOut}>
+ *   <Text>I am only animated on native</Text>
+ * </NativeOnlyAnimatedView>
+ */
+function NativeOnlyAnimatedView(
+	props: React.ComponentProps<typeof Animated.View> &
+		React.RefAttributes<Animated.View>,
+) {
+	if (Platform.OS === "web") {
+		return <>{props.children as React.ReactNode}</>;
+	} else {
+		return <Animated.View {...props} />;
+	}
+}
+
+export { NativeOnlyAnimatedView };
diff --git a/apps/mobile/components/ui/popover.tsx b/apps/mobile/components/ui/popover.tsx
new file mode 100644
index 00000000000..18129009ded
--- /dev/null
+++ b/apps/mobile/components/ui/popover.tsx
@@ -0,0 +1,62 @@
+import * as PopoverPrimitive from "@rn-primitives/popover";
+import * as React from "react";
+import { Platform, StyleSheet } from "react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function PopoverContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	portalHost,
+	...props
+}: PopoverPrimitive.ContentProps &
+	React.RefAttributes<PopoverPrimitive.ContentRef> & {
+		portalHost?: string;
+	}) {
+	return (
+		<PopoverPrimitive.Portal hostName={portalHost}>
+			<FullWindowOverlay>
+				<PopoverPrimitive.Overlay
+					style={Platform.select({ native: StyleSheet.absoluteFill })}
+				>
+					<NativeOnlyAnimatedView
+						entering={FadeIn.duration(200)}
+						exiting={FadeOut}
+					>
+						<TextClassContext.Provider value="text-popover-foreground">
+							<PopoverPrimitive.Content
+								align={align}
+								sideOffset={sideOffset}
+								className={cn(
+									"bg-popover border-border outline-hidden z-50 w-72 rounded-md border p-4 shadow-md shadow-black/5",
+									Platform.select({
+										web: cn(
+											"animate-in fade-in-0 zoom-in-95 origin-(--radix-popover-content-transform-origin) cursor-auto",
+											props.side === "bottom" && "slide-in-from-top-2",
+											props.side === "top" && "slide-in-from-bottom-2",
+										),
+									}),
+									className,
+								)}
+								{...props}
+							/>
+						</TextClassContext.Provider>
+					</NativeOnlyAnimatedView>
+				</PopoverPrimitive.Overlay>
+			</FullWindowOverlay>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+export { Popover, PopoverContent, PopoverTrigger };
diff --git a/apps/mobile/components/ui/progress.tsx b/apps/mobile/components/ui/progress.tsx
new file mode 100644
index 00000000000..5e5a88592be
--- /dev/null
+++ b/apps/mobile/components/ui/progress.tsx
@@ -0,0 +1,93 @@
+import * as ProgressPrimitive from "@rn-primitives/progress";
+import { Platform, View } from "react-native";
+import Animated, {
+	Extrapolation,
+	interpolate,
+	useAnimatedStyle,
+	useDerivedValue,
+	withSpring,
+} from "react-native-reanimated";
+import { cn } from "@/lib/utils";
+
+function Progress({
+	className,
+	value,
+	indicatorClassName,
+	...props
+}: ProgressPrimitive.RootProps &
+	React.RefAttributes<ProgressPrimitive.RootRef> & {
+		indicatorClassName?: string;
+	}) {
+	return (
+		<ProgressPrimitive.Root
+			className={cn(
+				"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+				className,
+			)}
+			{...props}
+		>
+			<Indicator value={value} className={indicatorClassName} />
+		</ProgressPrimitive.Root>
+	);
+}
+
+export { Progress };
+
+const Indicator = Platform.select({
+	web: WebIndicator,
+	native: NativeIndicator,
+	default: NullIndicator,
+});
+
+type IndicatorProps = {
+	value: number | undefined | null;
+	className?: string;
+};
+
+function WebIndicator({ value, className }: IndicatorProps) {
+	if (Platform.OS !== "web") {
+		return null;
+	}
+
+	return (
+		<View
+			className={cn(
+				"bg-primary h-full w-full flex-1 transition-all",
+				className,
+			)}
+			style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
+		>
+			<ProgressPrimitive.Indicator className={cn("h-full w-full", className)} />
+		</View>
+	);
+}
+
+function NativeIndicator({ value, className }: IndicatorProps) {
+	const progress = useDerivedValue(() => value ?? 0);
+
+	const indicator = useAnimatedStyle(() => {
+		return {
+			width: withSpring(
+				`${interpolate(progress.value, [0, 100], [1, 100], Extrapolation.CLAMP)}%`,
+				{ overshootClamping: true },
+			),
+		};
+	}, [value]);
+
+	if (Platform.OS === "web") {
+		return null;
+	}
+
+	return (
+		<ProgressPrimitive.Indicator asChild>
+			<Animated.View
+				style={indicator}
+				className={cn("bg-foreground h-full", className)}
+			/>
+		</ProgressPrimitive.Indicator>
+	);
+}
+
+function NullIndicator(_props: IndicatorProps) {
+	return null;
+}
diff --git a/apps/mobile/components/ui/radio-group.tsx b/apps/mobile/components/ui/radio-group.tsx
new file mode 100644
index 00000000000..4c8a0f5a72d
--- /dev/null
+++ b/apps/mobile/components/ui/radio-group.tsx
@@ -0,0 +1,37 @@
+import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
+import { Platform } from "react-native";
+import { cn } from "@/lib/utils";
+
+function RadioGroup({
+	className,
+	...props
+}: RadioGroupPrimitive.RootProps &
+	React.RefAttributes<RadioGroupPrimitive.RootRef>) {
+	return (
+		<RadioGroupPrimitive.Root className={cn("gap-3", className)} {...props} />
+	);
+}
+
+function RadioGroupItem({
+	className,
+	...props
+}: RadioGroupPrimitive.ItemProps &
+	React.RefAttributes<RadioGroupPrimitive.ItemRef>) {
+	return (
+		<RadioGroupPrimitive.Item
+			className={cn(
+				"border-input dark:bg-input/30 aspect-square size-4 shrink-0 items-center justify-center rounded-full border shadow-sm shadow-black/5",
+				Platform.select({
+					web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed",
+				}),
+				props.disabled && "opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="bg-primary size-2 rounded-full" />
+		</RadioGroupPrimitive.Item>
+	);
+}
+
+export { RadioGroup, RadioGroupItem };
diff --git a/apps/mobile/components/ui/select.tsx b/apps/mobile/components/ui/select.tsx
new file mode 100644
index 00000000000..1ba86c88386
--- /dev/null
+++ b/apps/mobile/components/ui/select.tsx
@@ -0,0 +1,288 @@
+import * as SelectPrimitive from "@rn-primitives/select";
+import {
+	Check,
+	ChevronDown,
+	ChevronDownIcon,
+	ChevronUpIcon,
+} from "lucide-react-native";
+import * as React from "react";
+import { Platform, ScrollView, StyleSheet, View } from "react-native";
+import { FadeIn, FadeOut } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { Icon } from "@/components/ui/icon";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+type Option = SelectPrimitive.Option;
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+function SelectValue({
+	ref,
+	className,
+	...props
+}: SelectPrimitive.ValueProps &
+	React.RefAttributes<SelectPrimitive.ValueRef> & {
+		className?: string;
+	}) {
+	const { value } = SelectPrimitive.useRootContext();
+	return (
+		<SelectPrimitive.Value
+			ref={ref}
+			className={cn(
+				"text-foreground line-clamp-1 flex flex-row items-center gap-2 text-sm",
+				!value && "text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SelectTrigger({
+	ref,
+	className,
+	children,
+	size = "default",
+	...props
+}: SelectPrimitive.TriggerProps &
+	React.RefAttributes<SelectPrimitive.TriggerRef> & {
+		children?: React.ReactNode;
+		size?: "default" | "sm";
+	}) {
+	return (
+		<SelectPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				"border-input dark:bg-input/30 dark:active:bg-input/50 bg-background flex h-10 flex-row items-center justify-between gap-2 rounded-md border px-3 py-2 shadow-sm shadow-black/5 sm:h-9",
+				Platform.select({
+					web: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 w-fit whitespace-nowrap text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0",
+				}),
+				props.disabled && "opacity-50",
+				size === "sm" && "h-8 py-2 sm:py-1.5",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<Icon
+				as={ChevronDown}
+				aria-hidden={true}
+				className="text-muted-foreground size-4"
+			/>
+		</SelectPrimitive.Trigger>
+	);
+}
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function SelectContent({
+	className,
+	children,
+	position = "popper",
+	portalHost,
+	...props
+}: SelectPrimitive.ContentProps &
+	React.RefAttributes<SelectPrimitive.ContentRef> & {
+		className?: string;
+		portalHost?: string;
+	}) {
+	return (
+		<SelectPrimitive.Portal hostName={portalHost}>
+			<FullWindowOverlay>
+				<SelectPrimitive.Overlay
+					style={Platform.select({ native: StyleSheet.absoluteFill })}
+				>
+					<TextClassContext.Provider value="text-popover-foreground">
+						<NativeOnlyAnimatedView
+							className="z-50"
+							entering={FadeIn}
+							exiting={FadeOut}
+						>
+							<SelectPrimitive.Content
+								className={cn(
+									"bg-popover border-border relative z-50 min-w-[8rem] rounded-md border shadow-md shadow-black/5",
+									Platform.select({
+										web: cn(
+											"animate-in fade-in-0 zoom-in-95 origin-(--radix-select-content-transform-origin) max-h-52 overflow-y-auto overflow-x-hidden",
+											props.side === "bottom" && "slide-in-from-top-2",
+											props.side === "top" && "slide-in-from-bottom-2",
+										),
+										native: "p-1",
+									}),
+									position === "popper" &&
+										Platform.select({
+											web: cn(
+												props.side === "bottom" && "translate-y-1",
+												props.side === "top" && "-translate-y-1",
+											),
+										}),
+									className,
+								)}
+								position={position}
+								{...props}
+							>
+								<SelectScrollUpButton />
+								<SelectPrimitive.Viewport
+									className={cn(
+										"p-1",
+										position === "popper" &&
+											cn(
+												"w-full",
+												Platform.select({
+													web: "h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)]",
+												}),
+											),
+									)}
+								>
+									{children}
+								</SelectPrimitive.Viewport>
+								<SelectScrollDownButton />
+							</SelectPrimitive.Content>
+						</NativeOnlyAnimatedView>
+					</TextClassContext.Provider>
+				</SelectPrimitive.Overlay>
+			</FullWindowOverlay>
+		</SelectPrimitive.Portal>
+	);
+}
+
+function SelectLabel({
+	className,
+	...props
+}: SelectPrimitive.LabelProps & React.RefAttributes<SelectPrimitive.LabelRef>) {
+	return (
+		<SelectPrimitive.Label
+			className={cn(
+				"text-muted-foreground px-2 py-2 text-xs sm:py-1.5",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SelectItem({
+	className,
+	children,
+	...props
+}: SelectPrimitive.ItemProps & React.RefAttributes<SelectPrimitive.ItemRef>) {
+	return (
+		<SelectPrimitive.Item
+			className={cn(
+				"active:bg-accent group relative flex w-full flex-row items-center gap-2 rounded-sm py-2 pl-2 pr-8 sm:py-1.5",
+				Platform.select({
+					web: "focus:bg-accent focus:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-default outline-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none",
+				}),
+				props.disabled && "opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<View className="absolute right-2 flex size-3.5 items-center justify-center">
+				<SelectPrimitive.ItemIndicator>
+					<Icon as={Check} className="text-muted-foreground size-4 shrink-0" />
+				</SelectPrimitive.ItemIndicator>
+			</View>
+			<SelectPrimitive.ItemText className="text-foreground group-active:text-accent-foreground select-none text-sm" />
+		</SelectPrimitive.Item>
+	);
+}
+
+function SelectSeparator({
+	className,
+	...props
+}: SelectPrimitive.SeparatorProps &
+	React.RefAttributes<SelectPrimitive.SeparatorRef>) {
+	return (
+		<SelectPrimitive.Separator
+			className={cn(
+				"bg-border -mx-1 my-1 h-px",
+				Platform.select({ web: "pointer-events-none" }),
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+/**
+ * @platform Web only
+ * Returns null on native platforms
+ */
+function SelectScrollUpButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+	if (Platform.OS !== "web") {
+		return null;
+	}
+	return (
+		<SelectPrimitive.ScrollUpButton
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<Icon as={ChevronUpIcon} className="size-4" />
+		</SelectPrimitive.ScrollUpButton>
+	);
+}
+
+/**
+ * @platform Web only
+ * Returns null on native platforms
+ */
+function SelectScrollDownButton({
+	className,
+	...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+	if (Platform.OS !== "web") {
+		return null;
+	}
+	return (
+		<SelectPrimitive.ScrollDownButton
+			className={cn(
+				"flex cursor-default items-center justify-center py-1",
+				className,
+			)}
+			{...props}
+		>
+			<Icon as={ChevronDownIcon} className="size-4" />
+		</SelectPrimitive.ScrollDownButton>
+	);
+}
+
+/**
+ * @platform Native only
+ * Returns the children on the web
+ */
+function NativeSelectScrollView({
+	className,
+	...props
+}: React.ComponentProps<typeof ScrollView>) {
+	if (Platform.OS === "web") {
+		return <>{props.children}</>;
+	}
+	return <ScrollView className={cn("max-h-52", className)} {...props} />;
+}
+
+export {
+	NativeSelectScrollView,
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+	type Option,
+};
diff --git a/apps/mobile/components/ui/separator.tsx b/apps/mobile/components/ui/separator.tsx
new file mode 100644
index 00000000000..c91fef4f192
--- /dev/null
+++ b/apps/mobile/components/ui/separator.tsx
@@ -0,0 +1,25 @@
+import * as SeparatorPrimitive from "@rn-primitives/separator";
+import { cn } from "@/lib/utils";
+
+function Separator({
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: SeparatorPrimitive.RootProps &
+	React.RefAttributes<SeparatorPrimitive.RootRef>) {
+	return (
+		<SeparatorPrimitive.Root
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0",
+				orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };
diff --git a/apps/mobile/components/ui/skeleton.tsx b/apps/mobile/components/ui/skeleton.tsx
new file mode 100644
index 00000000000..e5d083c2d28
--- /dev/null
+++ b/apps/mobile/components/ui/skeleton.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { View } from "react-native";
+import Animated, {
+	useAnimatedStyle,
+	useSharedValue,
+	withRepeat,
+	withTiming,
+} from "react-native-reanimated";
+import { cn } from "@/lib/utils";
+
+const duration = 1000;
+
+function Skeleton({
+	className,
+	...props
+}: React.ComponentProps<typeof View> & React.RefAttributes<View>) {
+	const sv = useSharedValue(1);
+
+	React.useEffect(() => {
+		sv.value = withRepeat(withTiming(0.5, { duration }), -1, true);
+	}, [sv]);
+
+	const style = useAnimatedStyle(
+		() => ({
+			opacity: sv.value,
+		}),
+		[sv],
+	);
+	return (
+		<Animated.View
+			style={style}
+			className={cn("bg-secondary dark:bg-muted rounded-md", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };
diff --git a/apps/mobile/components/ui/tabs.tsx b/apps/mobile/components/ui/tabs.tsx
new file mode 100644
index 00000000000..ab03b290be3
--- /dev/null
+++ b/apps/mobile/components/ui/tabs.tsx
@@ -0,0 +1,75 @@
+import * as TabsPrimitive from "@rn-primitives/tabs";
+import { Platform } from "react-native";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+function Tabs({
+	className,
+	...props
+}: TabsPrimitive.RootProps & React.RefAttributes<TabsPrimitive.RootRef>) {
+	return (
+		<TabsPrimitive.Root
+			className={cn("flex flex-col gap-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function TabsList({
+	className,
+	...props
+}: TabsPrimitive.ListProps & React.RefAttributes<TabsPrimitive.ListRef>) {
+	return (
+		<TabsPrimitive.List
+			className={cn(
+				"bg-muted flex h-9 flex-row items-center justify-center rounded-lg p-[3px]",
+				Platform.select({ web: "inline-flex w-fit", native: "mr-auto" }),
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function TabsTrigger({
+	className,
+	...props
+}: TabsPrimitive.TriggerProps & React.RefAttributes<TabsPrimitive.TriggerRef>) {
+	const { value } = TabsPrimitive.useRootContext();
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-foreground dark:text-muted-foreground text-sm font-medium",
+				value === props.value && "dark:text-foreground",
+			)}
+		>
+			<TabsPrimitive.Trigger
+				className={cn(
+					"flex flex-row items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 shadow-none shadow-black/5",
+					Platform.select({
+						web: "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring web:h-[calc(100%-1px)] inline-flex cursor-default whitespace-nowrap transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+					}),
+					props.disabled && "opacity-50",
+					props.value === value &&
+						"bg-background dark:border-foreground/10 dark:bg-input/30",
+					className,
+				)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+function TabsContent({
+	className,
+	...props
+}: TabsPrimitive.ContentProps & React.RefAttributes<TabsPrimitive.ContentRef>) {
+	return (
+		<TabsPrimitive.Content
+			className={cn(Platform.select({ web: "flex-1 outline-none" }), className)}
+			{...props}
+		/>
+	);
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };
diff --git a/apps/mobile/components/ui/textarea.tsx b/apps/mobile/components/ui/textarea.tsx
new file mode 100644
index 00000000000..16ba411eee7
--- /dev/null
+++ b/apps/mobile/components/ui/textarea.tsx
@@ -0,0 +1,33 @@
+import { Platform, TextInput, type TextInputProps } from "react-native";
+import { cn } from "@/lib/utils";
+
+function Textarea({
+	className,
+	multiline = true,
+	numberOfLines = Platform.select({ web: 2, native: 8 }), // On web, numberOfLines also determines initial height. On native, it determines the maximum height.
+	placeholderTextColorClassName,
+	...props
+}: TextInputProps & React.RefAttributes<TextInput>) {
+	return (
+		<TextInput
+			className={cn(
+				"text-foreground border-input dark:bg-input/30 flex min-h-16 w-full flex-row rounded-md border bg-transparent px-3 py-2 text-base shadow-sm shadow-black/5 md:text-sm",
+				Platform.select({
+					web: "placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive field-sizing-content resize-y outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed",
+				}),
+				props.editable === false && "opacity-50",
+				className,
+			)}
+			placeholderTextColorClassName={cn(
+				"text-muted-foreground",
+				placeholderTextColorClassName,
+			)}
+			multiline={multiline}
+			numberOfLines={numberOfLines}
+			textAlignVertical="top"
+			{...props}
+		/>
+	);
+}
+
+export { Textarea };
diff --git a/apps/mobile/components/ui/toggle-group.tsx b/apps/mobile/components/ui/toggle-group.tsx
new file mode 100644
index 00000000000..f0c8b1e4e1e
--- /dev/null
+++ b/apps/mobile/components/ui/toggle-group.tsx
@@ -0,0 +1,116 @@
+import * as ToggleGroupPrimitive from "@rn-primitives/toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Platform } from "react-native";
+import { Icon } from "@/components/ui/icon";
+import { TextClassContext } from "@/components/ui/text";
+import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/lib/utils";
+
+const ToggleGroupContext = React.createContext<VariantProps<
+	typeof toggleVariants
+> | null>(null);
+
+function ToggleGroup({
+	className,
+	variant,
+	size,
+	children,
+	...props
+}: ToggleGroupPrimitive.RootProps &
+	VariantProps<typeof toggleVariants> &
+	React.RefAttributes<ToggleGroupPrimitive.RootRef>) {
+	return (
+		<ToggleGroupPrimitive.Root
+			className={cn(
+				"flex flex-row items-center rounded-md shadow-none",
+				Platform.select({ web: "w-fit" }),
+				variant === "outline" && "shadow-sm shadow-black/5",
+				className,
+			)}
+			{...props}
+		>
+			<ToggleGroupContext.Provider value={{ variant, size }}>
+				{children}
+			</ToggleGroupContext.Provider>
+		</ToggleGroupPrimitive.Root>
+	);
+}
+
+function useToggleGroupContext() {
+	const context = React.useContext(ToggleGroupContext);
+	if (context === null) {
+		throw new Error(
+			"ToggleGroup compound components cannot be rendered outside the ToggleGroup component",
+		);
+	}
+	return context;
+}
+
+function ToggleGroupItem({
+	className,
+	children,
+	variant,
+	size,
+	isFirst,
+	isLast,
+	...props
+}: ToggleGroupPrimitive.ItemProps &
+	VariantProps<typeof toggleVariants> &
+	React.RefAttributes<ToggleGroupPrimitive.ItemRef> & {
+		isFirst?: boolean;
+		isLast?: boolean;
+	}) {
+	const context = useToggleGroupContext();
+	const { value } = ToggleGroupPrimitive.useRootContext();
+
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-sm text-foreground font-medium",
+				ToggleGroupPrimitive.utils.getIsSelected(value, props.value)
+					? "text-accent-foreground"
+					: Platform.select({ web: "group-hover:text-muted-foreground" }),
+			)}
+		>
+			<ToggleGroupPrimitive.Item
+				className={cn(
+					toggleVariants({
+						variant: context.variant || variant,
+						size: context.size || size,
+					}),
+					props.disabled && "opacity-50",
+					ToggleGroupPrimitive.utils.getIsSelected(value, props.value) &&
+						"bg-accent",
+					"min-w-0 shrink-0 rounded-none shadow-none",
+					isFirst && "rounded-l-md",
+					isLast && "rounded-r-md",
+					(context.variant === "outline" || variant === "outline") &&
+						"border-l-0",
+					(context.variant === "outline" || variant === "outline") &&
+						isFirst &&
+						"border-l",
+					Platform.select({
+						web: "flex-1 focus:z-10 focus-visible:z-10",
+					}),
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</ToggleGroupPrimitive.Item>
+		</TextClassContext.Provider>
+	);
+}
+
+function ToggleGroupIcon({
+	className,
+	...props
+}: React.ComponentProps<typeof Icon>) {
+	const textClass = React.useContext(TextClassContext);
+	return (
+		<Icon className={cn("size-4 shrink-0", textClass, className)} {...props} />
+	);
+}
+
+export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };
diff --git a/apps/mobile/components/ui/toggle.tsx b/apps/mobile/components/ui/toggle.tsx
new file mode 100644
index 00000000000..baebaa8b30a
--- /dev/null
+++ b/apps/mobile/components/ui/toggle.tsx
@@ -0,0 +1,81 @@
+import * as TogglePrimitive from "@rn-primitives/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Platform } from "react-native";
+import { Icon } from "@/components/ui/icon";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+	cn(
+		"active:bg-muted group flex flex-row items-center justify-center gap-2 rounded-md",
+		Platform.select({
+			web: "hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex cursor-default whitespace-nowrap outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:pointer-events-none [&_svg]:pointer-events-none",
+		}),
+	),
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline: cn(
+					"border-input active:bg-accent border bg-transparent shadow-sm shadow-black/5",
+					Platform.select({
+						web: "hover:bg-accent hover:text-accent-foreground",
+					}),
+				),
+			},
+			size: {
+				default: "h-10 min-w-10 px-2.5 sm:h-9 sm:min-w-9 sm:px-2",
+				sm: "h-9 min-w-9 px-2 sm:h-8 sm:min-w-8 sm:px-1.5",
+				lg: "h-11 min-w-11 px-3 sm:h-10 sm:min-w-10 sm:px-2.5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Toggle({
+	className,
+	variant,
+	size,
+	...props
+}: TogglePrimitive.RootProps &
+	VariantProps<typeof toggleVariants> &
+	React.RefAttributes<TogglePrimitive.RootRef>) {
+	return (
+		<TextClassContext.Provider
+			value={cn(
+				"text-sm text-foreground font-medium",
+				props.pressed
+					? "text-accent-foreground"
+					: Platform.select({ web: "group-hover:text-muted-foreground" }),
+				className,
+			)}
+		>
+			<TogglePrimitive.Root
+				className={cn(
+					toggleVariants({ variant, size }),
+					props.disabled && "opacity-50",
+					props.pressed && "bg-accent",
+					className,
+				)}
+				{...props}
+			/>
+		</TextClassContext.Provider>
+	);
+}
+
+function ToggleIcon({
+	className,
+	...props
+}: React.ComponentProps<typeof Icon>) {
+	const textClass = React.useContext(TextClassContext);
+	return (
+		<Icon className={cn("size-4 shrink-0", textClass, className)} {...props} />
+	);
+}
+
+export { Toggle, ToggleIcon, toggleVariants };
diff --git a/apps/mobile/components/ui/tooltip.tsx b/apps/mobile/components/ui/tooltip.tsx
new file mode 100644
index 00000000000..7bd02c3f1a3
--- /dev/null
+++ b/apps/mobile/components/ui/tooltip.tsx
@@ -0,0 +1,72 @@
+import * as TooltipPrimitive from "@rn-primitives/tooltip";
+import * as React from "react";
+import { Platform, StyleSheet } from "react-native";
+import { FadeInDown, FadeInUp, FadeOut } from "react-native-reanimated";
+import { FullWindowOverlay as RNFullWindowOverlay } from "react-native-screens";
+import { NativeOnlyAnimatedView } from "@/components/ui/native-only-animated-view";
+import { TextClassContext } from "@/components/ui/text";
+import { cn } from "@/lib/utils";
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const FullWindowOverlay =
+	Platform.OS === "ios" ? RNFullWindowOverlay : React.Fragment;
+
+function TooltipContent({
+	className,
+	sideOffset = 4,
+	portalHost,
+	side = "top",
+	...props
+}: TooltipPrimitive.ContentProps &
+	React.RefAttributes<TooltipPrimitive.ContentRef> & {
+		portalHost?: string;
+	}) {
+	return (
+		<TooltipPrimitive.Portal hostName={portalHost}>
+			<FullWindowOverlay>
+				<TooltipPrimitive.Overlay
+					style={Platform.select({ native: StyleSheet.absoluteFill })}
+				>
+					<NativeOnlyAnimatedView
+						entering={
+							side === "top"
+								? FadeInDown.withInitialValues({
+										transform: [{ translateY: 3 }],
+									}).duration(150)
+								: FadeInUp.withInitialValues({
+										transform: [{ translateY: -5 }],
+									})
+						}
+						exiting={FadeOut}
+					>
+						<TextClassContext.Provider value="text-xs text-primary-foreground">
+							<TooltipPrimitive.Content
+								sideOffset={sideOffset}
+								className={cn(
+									"bg-primary z-50 rounded-md px-3 py-2 sm:py-1.5",
+									Platform.select({
+										web: cn(
+											"animate-in fade-in-0 zoom-in-95 origin-(--radix-tooltip-content-transform-origin) w-fit text-balance",
+											side === "bottom" && "slide-in-from-top-2",
+											side === "left" && "slide-in-from-right-2",
+											side === "right" && "slide-in-from-left-2",
+											side === "top" && "slide-in-from-bottom-2",
+										),
+									}),
+									className,
+								)}
+								side={side}
+								{...props}
+							/>
+						</TextClassContext.Provider>
+					</NativeOnlyAnimatedView>
+				</TooltipPrimitive.Overlay>
+			</FullWindowOverlay>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export { Tooltip, TooltipContent, TooltipTrigger };
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 03cb5f14f20..9ce221cdb8a 100644
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -16,9 +16,30 @@
 		"@electric-sql/client": "https://pkg.pr.new/@electric-sql/client@3724",
 		"@react-native-async-storage/async-storage": "2.2.0",
 		"@react-navigation/native": "^7.1.28",
+		"@rn-primitives/accordion": "^1.2.0",
+		"@rn-primitives/alert-dialog": "^1.2.0",
+		"@rn-primitives/aspect-ratio": "^1.2.0",
+		"@rn-primitives/avatar": "^1.2.0",
+		"@rn-primitives/checkbox": "^1.2.0",
+		"@rn-primitives/collapsible": "^1.2.0",
+		"@rn-primitives/context-menu": "^1.2.0",
+		"@rn-primitives/dialog": "^1.2.0",
+		"@rn-primitives/dropdown-menu": "^1.2.0",
+		"@rn-primitives/hover-card": "^1.2.0",
+		"@rn-primitives/label": "^1.2.0",
+		"@rn-primitives/menubar": "^1.2.0",
+		"@rn-primitives/popover": "^1.2.0",
 		"@rn-primitives/portal": "^1.3.0",
+		"@rn-primitives/progress": "^1.2.0",
+		"@rn-primitives/radio-group": "^1.2.0",
+		"@rn-primitives/select": "^1.2.0",
+		"@rn-primitives/separator": "^1.2.0",
 		"@rn-primitives/slot": "^1.2.0",
 		"@rn-primitives/switch": "^1.2.0",
+		"@rn-primitives/tabs": "^1.2.0",
+		"@rn-primitives/toggle": "^1.2.0",
+		"@rn-primitives/toggle-group": "^1.2.0",
+		"@rn-primitives/tooltip": "^1.2.0",
 		"@superset/db": "workspace:*",
 		"@superset/trpc": "workspace:*",
 		"@tanstack/db": "0.5.22",
diff --git a/apps/mobile/screens/(authenticated)/demo/DemoScreen.tsx b/apps/mobile/screens/(authenticated)/demo/DemoScreen.tsx
index e245a66bfc1..635d655031e 100644
--- a/apps/mobile/screens/(authenticated)/demo/DemoScreen.tsx
+++ b/apps/mobile/screens/(authenticated)/demo/DemoScreen.tsx
@@ -1,7 +1,41 @@
 import { eq, isNull } from "@tanstack/db";
 import { useLiveQuery } from "@tanstack/react-db";
-import { ScrollView, Text, View } from "react-native";
+import {
+	AlertCircle,
+	Bold,
+	ChevronRight,
+	Info,
+	Italic,
+	Mail,
+	Star,
+	Underline,
+	User,
+} from "lucide-react-native";
+import * as React from "react";
+import { Pressable, ScrollView, View } from "react-native";
 import { OrganizationSwitcher } from "@/components/OrganizationSwitcher";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
 	Card,
 	CardContent,
@@ -9,11 +43,61 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { Progress } from "@/components/ui/progress";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Text } from "@/components/ui/text";
+import { Textarea } from "@/components/ui/textarea";
+import { Toggle, ToggleIcon } from "@/components/ui/toggle";
+import {
+	ToggleGroup,
+	ToggleGroupIcon,
+	ToggleGroupItem,
+} from "@/components/ui/toggle-group";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { useCollections } from "@/providers/CollectionsProvider";
 
 export function DemoScreen() {
 	const collections = useCollections();
 
+	// Live queries
 	const { data: organizations } = useLiveQuery(
 		(q) => q.from({ organizations: collections.organizations }),
 		[collections],
@@ -73,18 +157,620 @@ export function DemoScreen() {
 		[collections],
 	);
 
+	// Component state
+	const [checkboxChecked, setCheckboxChecked] = React.useState(false);
+	const [switchChecked, setSwitchChecked] = React.useState(false);
+	const [radioValue, setRadioValue] = React.useState("option-1");
+	const [selectValue, setSelectValue] = React.useState<
+		{ value: string; label: string } | undefined
+	>(undefined);
+	const [progressValue, setProgressValue] = React.useState(33);
+	const [togglePressed, setTogglePressed] = React.useState(false);
+	const [toggleGroupValue, setToggleGroupValue] = React.useState<string[]>([]);
+	const [collapsibleOpen, setCollapsibleOpen] = React.useState(false);
+	const [tabValue, setTabValue] = React.useState("tab1");
+	const [inputValue, setInputValue] = React.useState("");
+	const [textareaValue, setTextareaValue] = React.useState("");
+
 	return (
 		<ScrollView className="flex-1 bg-background">
 			<View className="p-6 gap-6">
+				{/* Header */}
 				<View className="gap-2">
-					<Text className="text-4xl font-bold">Electric Collections Demo</Text>
+					<Text className="text-4xl font-bold">Component Demo</Text>
 					<Text className="text-lg text-muted-foreground">
-						Real-time synced data from Electric SQL
+						All UI components + real-time synced data
 					</Text>
 				</View>
 
 				<OrganizationSwitcher />
 
+				<Separator />
+
+				{/* ── Buttons ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Button</CardTitle>
+						<CardDescription>All button variants and sizes</CardDescription>
+					</CardHeader>
+					<CardContent className="gap-3">
+						<View className="flex-row flex-wrap gap-2">
+							<Button>
+								<Text>Default</Text>
+							</Button>
+							<Button variant="secondary">
+								<Text>Secondary</Text>
+							</Button>
+							<Button variant="destructive">
+								<Text>Destructive</Text>
+							</Button>
+							<Button variant="outline">
+								<Text>Outline</Text>
+							</Button>
+							<Button variant="ghost">
+								<Text>Ghost</Text>
+							</Button>
+							<Button variant="link">
+								<Text>Link</Text>
+							</Button>
+						</View>
+						<View className="flex-row flex-wrap gap-2">
+							<Button size="sm">
+								<Text>Small</Text>
+							</Button>
+							<Button size="default">
+								<Text>Default</Text>
+							</Button>
+							<Button size="lg">
+								<Text>Large</Text>
+							</Button>
+							<Button size="icon">
+								<Icon as={Star} size={16} className="text-primary-foreground" />
+							</Button>
+						</View>
+					</CardContent>
+				</Card>
+
+				{/* ── Badge ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Badge</CardTitle>
+						<CardDescription>Status indicators</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<View className="flex-row flex-wrap gap-2">
+							<Badge>
+								<Text>Default</Text>
+							</Badge>
+							<Badge variant="secondary">
+								<Text>Secondary</Text>
+							</Badge>
+							<Badge variant="destructive">
+								<Text>Destructive</Text>
+							</Badge>
+							<Badge variant="outline">
+								<Text>Outline</Text>
+							</Badge>
+						</View>
+					</CardContent>
+				</Card>
+
+				{/* ── Alert ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Alert</CardTitle>
+						<CardDescription>Informational messages</CardDescription>
+					</CardHeader>
+					<CardContent className="gap-3">
+						<Alert icon={Info}>
+							<AlertTitle>Heads up!</AlertTitle>
+							<AlertDescription>
+								This is a default alert component.
+							</AlertDescription>
+						</Alert>
+						<Alert icon={AlertCircle} variant="destructive">
+							<AlertTitle>Error</AlertTitle>
+							<AlertDescription>
+								Something went wrong. Please try again.
+							</AlertDescription>
+						</Alert>
+					</CardContent>
+				</Card>
+
+				{/* ── Avatar ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Avatar</CardTitle>
+						<CardDescription>User profile images with fallback</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<View className="flex-row gap-3 items-center">
+							<Avatar alt="Satya Patel">
+								<AvatarFallback>
+									<Text className="text-xs">SP</Text>
+								</AvatarFallback>
+							</Avatar>
+							<Avatar alt="Kiet Ho">
+								<AvatarFallback>
+									<Text className="text-xs">KH</Text>
+								</AvatarFallback>
+							</Avatar>
+							<Avatar alt="User" className="size-12">
+								<AvatarFallback>
+									<Icon as={User} size={20} className="text-muted-foreground" />
+								</AvatarFallback>
+							</Avatar>
+						</View>
+					</CardContent>
+				</Card>
+
+				{/* ── Input & Textarea ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Input & Textarea</CardTitle>
+						<CardDescription>Text input fields</CardDescription>
+					</CardHeader>
+					<CardContent className="gap-3">
+						<View className="gap-2">
+							<Label>Email</Label>
+							<Input
+								placeholder="you@example.com"
+								value={inputValue}
+								onChangeText={setInputValue}
+							/>
+						</View>
+						<View className="gap-2">
+							<Label>Message</Label>
+							<Textarea
+								placeholder="Type your message here..."
+								value={textareaValue}
+								onChangeText={setTextareaValue}
+							/>
+						</View>
+					</CardContent>
+				</Card>
+
+				{/* ── Checkbox & Switch ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Checkbox & Switch</CardTitle>
+						<CardDescription>Toggle controls</CardDescription>
+					</CardHeader>
+					<CardContent className="gap-4">
+						<Pressable
+							className="flex-row items-center gap-3"
+							onPress={() => setCheckboxChecked(!checkboxChecked)}
+						>
+							<Checkbox
+								checked={checkboxChecked}
+								onCheckedChange={setCheckboxChecked}
+							/>
+							<Label>Accept terms and conditions</Label>
+						</Pressable>
+						<View className="flex-row items-center justify-between">
+							<Label>Enable notifications</Label>
+							<Switch
+								checked={switchChecked}
+								onCheckedChange={setSwitchChecked}
+							/>
+						</View>
+					</CardContent>
+				</Card>
+
+				{/* ── Radio Group ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Radio Group</CardTitle>
+						<CardDescription>Single selection</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<RadioGroup value={radioValue} onValueChange={setRadioValue}>
+							<Pressable
+								className="flex-row items-center gap-3"
+								onPress={() => setRadioValue("option-1")}
+							>
+								<RadioGroupItem value="option-1" />
+								<Label>Option One</Label>
+							</Pressable>
+							<Pressable
+								className="flex-row items-center gap-3"
+								onPress={() => setRadioValue("option-2")}
+							>
+								<RadioGroupItem value="option-2" />
+								<Label>Option Two</Label>
+							</Pressable>
+							<Pressable
+								className="flex-row items-center gap-3"
+								onPress={() => setRadioValue("option-3")}
+							>
+								<RadioGroupItem value="option-3" />
+								<Label>Option Three</Label>
+							</Pressable>
+						</RadioGroup>
+					</CardContent>
+				</Card>
+
+				{/* ── Select ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Select</CardTitle>
+						<CardDescription>Dropdown selection</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Select value={selectValue} onValueChange={setSelectValue}>
+							<SelectTrigger>
+								<SelectValue placeholder="Select a fruit" />
+							</SelectTrigger>
+							<SelectContent>
+								<SelectItem label="Apple" value="apple">
+									Apple
+								</SelectItem>
+								<SelectItem label="Banana" value="banana">
+									Banana
+								</SelectItem>
+								<SelectItem label="Cherry" value="cherry">
+									Cherry
+								</SelectItem>
+							</SelectContent>
+						</Select>
+					</CardContent>
+				</Card>
+
+				{/* ── Progress ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Progress</CardTitle>
+						<CardDescription>
+							Value: {progressValue}% — tap buttons to change
+						</CardDescription>
+					</CardHeader>
+					<CardContent className="gap-3">
+						<Progress value={progressValue} />
+						<View className="flex-row gap-2">
+							<Button
+								size="sm"
+								variant="outline"
+								onPress={() => setProgressValue((v) => Math.max(0, v - 10))}
+							>
+								<Text>-10</Text>
+							</Button>
+							<Button
+								size="sm"
+								variant="outline"
+								onPress={() => setProgressValue((v) => Math.min(100, v + 10))}
+							>
+								<Text>+10</Text>
+							</Button>
+						</View>
+					</CardContent>
+				</Card>
+
+				{/* ── Tabs ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Tabs</CardTitle>
+						<CardDescription>Tabbed content</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Tabs value={tabValue} onValueChange={setTabValue}>
+							<TabsList>
+								<TabsTrigger value="tab1">
+									<Text>Account</Text>
+								</TabsTrigger>
+								<TabsTrigger value="tab2">
+									<Text>Password</Text>
+								</TabsTrigger>
+							</TabsList>
+							<TabsContent value="tab1">
+								<Text className="text-sm text-muted-foreground py-2">
+									Make changes to your account here.
+								</Text>
+							</TabsContent>
+							<TabsContent value="tab2">
+								<Text className="text-sm text-muted-foreground py-2">
+									Change your password here.
+								</Text>
+							</TabsContent>
+						</Tabs>
+					</CardContent>
+				</Card>
+
+				{/* ── Accordion ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Accordion</CardTitle>
+						<CardDescription>Expandable sections</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Accordion type="multiple" collapsable>
+							<AccordionItem value="item-1">
+								<AccordionTrigger>
+									<Text>Is it accessible?</Text>
+								</AccordionTrigger>
+								<AccordionContent>
+									<Text className="text-muted-foreground">
+										Yes. It follows WAI-ARIA design patterns.
+									</Text>
+								</AccordionContent>
+							</AccordionItem>
+							<AccordionItem value="item-2">
+								<AccordionTrigger>
+									<Text>Is it styled?</Text>
+								</AccordionTrigger>
+								<AccordionContent>
+									<Text className="text-muted-foreground">
+										Yes. It comes with default styles from shadcn/ui.
+									</Text>
+								</AccordionContent>
+							</AccordionItem>
+							<AccordionItem value="item-3">
+								<AccordionTrigger>
+									<Text>Is it animated?</Text>
+								</AccordionTrigger>
+								<AccordionContent>
+									<Text className="text-muted-foreground">
+										Yes. It uses Reanimated for smooth native animations.
+									</Text>
+								</AccordionContent>
+							</AccordionItem>
+						</Accordion>
+					</CardContent>
+				</Card>
+
+				{/* ── Collapsible ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Collapsible</CardTitle>
+						<CardDescription>Toggle content visibility</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Collapsible
+							open={collapsibleOpen}
+							onOpenChange={setCollapsibleOpen}
+						>
+							<View className="flex-row items-center justify-between">
+								<Text className="text-sm font-semibold">3 items tagged</Text>
+								<CollapsibleTrigger asChild>
+									<Button variant="ghost" size="sm">
+										<Icon
+											as={ChevronRight}
+											size={16}
+											className="text-foreground"
+										/>
+									</Button>
+								</CollapsibleTrigger>
+							</View>
+							<View className="mt-2 rounded-md border border-border px-4 py-2">
+								<Text className="text-sm">@tanstack/db</Text>
+							</View>
+							<CollapsibleContent>
+								<View className="mt-2 gap-2">
+									<View className="rounded-md border border-border px-4 py-2">
+										<Text className="text-sm">@rn-primitives/accordion</Text>
+									</View>
+									<View className="rounded-md border border-border px-4 py-2">
+										<Text className="text-sm">@rn-primitives/dialog</Text>
+									</View>
+								</View>
+							</CollapsibleContent>
+						</Collapsible>
+					</CardContent>
+				</Card>
+
+				{/* ── Dialog ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Dialog</CardTitle>
+						<CardDescription>Modal dialog</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Dialog>
+							<DialogTrigger asChild>
+								<Button variant="outline">
+									<Text>Open Dialog</Text>
+								</Button>
+							</DialogTrigger>
+							<DialogContent>
+								<DialogHeader>
+									<DialogTitle>Edit Profile</DialogTitle>
+									<DialogDescription>
+										Make changes to your profile here. Click save when you're
+										done.
+									</DialogDescription>
+								</DialogHeader>
+								<View className="gap-3">
+									<View className="gap-2">
+										<Label>Name</Label>
+										<Input placeholder="Your name" />
+									</View>
+								</View>
+								<DialogFooter>
+									<Button>
+										<Text>Save changes</Text>
+									</Button>
+								</DialogFooter>
+							</DialogContent>
+						</Dialog>
+					</CardContent>
+				</Card>
+
+				{/* ── Alert Dialog ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Alert Dialog</CardTitle>
+						<CardDescription>Confirmation dialog</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<AlertDialog>
+							<AlertDialogTrigger asChild>
+								<Button variant="destructive">
+									<Text>Delete Item</Text>
+								</Button>
+							</AlertDialogTrigger>
+							<AlertDialogContent>
+								<AlertDialogHeader>
+									<AlertDialogTitle>Are you sure?</AlertDialogTitle>
+									<AlertDialogDescription>
+										This action cannot be undone. This will permanently delete
+										your data.
+									</AlertDialogDescription>
+								</AlertDialogHeader>
+								<AlertDialogFooter>
+									<AlertDialogCancel>
+										<Text>Cancel</Text>
+									</AlertDialogCancel>
+									<AlertDialogAction>
+										<Text>Continue</Text>
+									</AlertDialogAction>
+								</AlertDialogFooter>
+							</AlertDialogContent>
+						</AlertDialog>
+					</CardContent>
+				</Card>
+
+				{/* ── Popover ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Popover</CardTitle>
+						<CardDescription>Floating content</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Popover>
+							<PopoverTrigger asChild>
+								<Button variant="outline">
+									<Text>Open Popover</Text>
+								</Button>
+							</PopoverTrigger>
+							<PopoverContent>
+								<View className="gap-2">
+									<Text className="text-sm font-medium">Dimensions</Text>
+									<Text className="text-xs text-muted-foreground">
+										Set the dimensions for the layer.
+									</Text>
+									<View className="gap-2">
+										<View className="gap-1">
+											<Label>Width</Label>
+											<Input placeholder="100%" />
+										</View>
+										<View className="gap-1">
+											<Label>Height</Label>
+											<Input placeholder="25px" />
+										</View>
+									</View>
+								</View>
+							</PopoverContent>
+						</Popover>
+					</CardContent>
+				</Card>
+
+				{/* ── Tooltip ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Tooltip</CardTitle>
+						<CardDescription>Hover/press for info</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button variant="outline" size="icon">
+									<Icon as={Mail} size={16} className="text-foreground" />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>
+								<Text>Send email</Text>
+							</TooltipContent>
+						</Tooltip>
+					</CardContent>
+				</Card>
+
+				{/* ── Toggle ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Toggle</CardTitle>
+						<CardDescription>Pressable toggle buttons</CardDescription>
+					</CardHeader>
+					<CardContent className="gap-3">
+						<Toggle
+							pressed={togglePressed}
+							onPressedChange={setTogglePressed}
+							variant="outline"
+						>
+							<ToggleIcon as={Bold} />
+							<Text>Bold</Text>
+						</Toggle>
+					</CardContent>
+				</Card>
+
+				{/* ── Toggle Group ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Toggle Group</CardTitle>
+						<CardDescription>Grouped toggle options</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<ToggleGroup
+							type="multiple"
+							value={toggleGroupValue}
+							onValueChange={setToggleGroupValue}
+							variant="outline"
+						>
+							<ToggleGroupItem value="bold" isFirst>
+								<ToggleGroupIcon as={Bold} />
+							</ToggleGroupItem>
+							<ToggleGroupItem value="italic">
+								<ToggleGroupIcon as={Italic} />
+							</ToggleGroupItem>
+							<ToggleGroupItem value="underline" isLast>
+								<ToggleGroupIcon as={Underline} />
+							</ToggleGroupItem>
+						</ToggleGroup>
+					</CardContent>
+				</Card>
+
+				{/* ── Skeleton ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Skeleton</CardTitle>
+						<CardDescription>Loading placeholders</CardDescription>
+					</CardHeader>
+					<CardContent className="gap-3">
+						<View className="flex-row items-center gap-3">
+							<Skeleton className="size-10 rounded-full" />
+							<View className="gap-2 flex-1">
+								<Skeleton className="h-4 w-3/4" />
+								<Skeleton className="h-3 w-1/2" />
+							</View>
+						</View>
+					</CardContent>
+				</Card>
+
+				{/* ── Aspect Ratio ── */}
+				<Card>
+					<CardHeader>
+						<CardTitle>Aspect Ratio</CardTitle>
+						<CardDescription>16:9 container</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<AspectRatio ratio={16 / 9}>
+							<View className="flex-1 items-center justify-center rounded-md bg-muted">
+								<Text className="text-sm text-muted-foreground">
+									16:9 Content Area
+								</Text>
+							</View>
+						</AspectRatio>
+					</CardContent>
+				</Card>
+
+				<Separator />
+
+				{/* ── Data Section ── */}
+				<View className="gap-2">
+					<Text className="text-2xl font-bold">Live Data</Text>
+					<Text className="text-sm text-muted-foreground">
+						Real-time synced from Electric SQL
+					</Text>
+				</View>
+
 				<Card>
 					<CardHeader>
 						<CardTitle>Organizations (Global)</CardTitle>
@@ -116,7 +802,7 @@ export function DemoScreen() {
 						))}
 						{(activeTasks?.length || 0) > 5 && (
 							<Text className="text-sm text-muted-foreground">
-								...and {activeTasks?.length - 5} more
+								...and {(activeTasks?.length ?? 0) - 5} more
 							</Text>
 						)}
 					</CardContent>
@@ -155,7 +841,7 @@ export function DemoScreen() {
 						))}
 						{(repositories?.length || 0) > 5 && (
 							<Text className="text-sm text-muted-foreground">
-								...and {repositories?.length - 5} more
+								...and {(repositories?.length ?? 0) - 5} more
 							</Text>
 						)}
 					</CardContent>
diff --git a/apps/streams/package.json b/apps/streams/package.json
index f518670068e..290e8ae1ceb 100644
--- a/apps/streams/package.json
+++ b/apps/streams/package.json
@@ -14,14 +14,14 @@
 	},
 	"dependencies": {
 		"@anthropic-ai/claude-agent-sdk": "^0.2.19",
-		"@durable-streams/client": "^0.2.0",
+		"@durable-streams/client": "^0.2.1",
 		"@durable-streams/server": "^0.2.0",
+		"@hono/node-server": "^1.13.0",
 		"@superset/durable-session": "workspace:*",
 		"@tanstack/ai": "^0.3.0",
-		"@tanstack/db": "^0.5.22",
-		"@hono/node-server": "^1.13.0",
+		"@tanstack/db": "0.5.22",
 		"hono": "^4.4.0",
-		"zod": "^4.1.12"
+		"zod": "^4.3.5"
 	},
 	"devDependencies": {
 		"@durable-streams/server-conformance-tests": "^0.2.0",
diff --git a/bun.lock b/bun.lock
index d974b62f7f9..5ebd5f79a90 100644
--- a/bun.lock
+++ b/bun.lock
@@ -394,9 +394,30 @@
         "@electric-sql/client": "https://pkg.pr.new/@electric-sql/client@3724",
         "@react-native-async-storage/async-storage": "2.2.0",
         "@react-navigation/native": "^7.1.28",
+        "@rn-primitives/accordion": "^1.2.0",
+        "@rn-primitives/alert-dialog": "^1.2.0",
+        "@rn-primitives/aspect-ratio": "^1.2.0",
+        "@rn-primitives/avatar": "^1.2.0",
+        "@rn-primitives/checkbox": "^1.2.0",
+        "@rn-primitives/collapsible": "^1.2.0",
+        "@rn-primitives/context-menu": "^1.2.0",
+        "@rn-primitives/dialog": "^1.2.0",
+        "@rn-primitives/dropdown-menu": "^1.2.0",
+        "@rn-primitives/hover-card": "^1.2.0",
+        "@rn-primitives/label": "^1.2.0",
+        "@rn-primitives/menubar": "^1.2.0",
+        "@rn-primitives/popover": "^1.2.0",
         "@rn-primitives/portal": "^1.3.0",
+        "@rn-primitives/progress": "^1.2.0",
+        "@rn-primitives/radio-group": "^1.2.0",
+        "@rn-primitives/select": "^1.2.0",
+        "@rn-primitives/separator": "^1.2.0",
         "@rn-primitives/slot": "^1.2.0",
         "@rn-primitives/switch": "^1.2.0",
+        "@rn-primitives/tabs": "^1.2.0",
+        "@rn-primitives/toggle": "^1.2.0",
+        "@rn-primitives/toggle-group": "^1.2.0",
+        "@rn-primitives/tooltip": "^1.2.0",
         "@superset/db": "workspace:*",
         "@superset/trpc": "workspace:*",
         "@tanstack/db": "0.5.22",
@@ -453,14 +474,14 @@
       "version": "0.0.1",
       "dependencies": {
         "@anthropic-ai/claude-agent-sdk": "^0.2.19",
-        "@durable-streams/client": "^0.2.0",
+        "@durable-streams/client": "^0.2.1",
         "@durable-streams/server": "^0.2.0",
         "@hono/node-server": "^1.13.0",
         "@superset/durable-session": "workspace:*",
         "@tanstack/ai": "^0.3.0",
-        "@tanstack/db": "^0.5.22",
+        "@tanstack/db": "0.5.22",
         "hono": "^4.4.0",
-        "zod": "^4.1.12",
+        "zod": "^4.3.5",
       },
       "devDependencies": {
         "@durable-streams/server-conformance-tests": "^0.2.0",
@@ -571,9 +592,9 @@
         "@durable-streams/state": "^0.2.0",
         "@standard-schema/spec": "^1.0.0",
         "@tanstack/ai": "^0.3.0",
-        "@tanstack/db": "^0.5.22",
+        "@tanstack/db": "0.5.22",
         "@tanstack/db-ivm": "^0.1.17",
-        "zod": "^4.1.12",
+        "zod": "^4.3.5",
       },
       "devDependencies": {
         "@superset/typescript": "workspace:*",
@@ -1725,14 +1746,60 @@
 
     "@remirror/core-constants": ["@remirror/core-constants@3.0.0", "", {}, "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg=="],
 
+    "@rn-primitives/accordion": ["@rn-primitives/accordion@1.2.0", "", { "dependencies": { "@radix-ui/react-accordion": "^1.2.11", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-gt1NQC6XTbSN6KEqX3QDbvqO4kXFDKhQGiljL/pq1WO0iJNVaV47/3E8fLOZLEuj2FSkQblNhSvVc4WU/7qHoA=="],
+
+    "@rn-primitives/alert-dialog": ["@rn-primitives/alert-dialog@1.2.0", "", { "dependencies": { "@radix-ui/react-alert-dialog": "^1.1.14", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-/XxvQVRMnIyQo29iuQ631CHjghGKY8U4k3gbsS2MCGP0hglZVFoBRiAF3Bgyr16LxWRu1DoPltvzwOrUCsB+YQ=="],
+
+    "@rn-primitives/aspect-ratio": ["@rn-primitives/aspect-ratio@1.2.0", "", { "dependencies": { "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-IUQ6MR26AV1ckN+U3m8UjlgJMxB53sqPL3ri2rrGtmFPtq+Gv2luGEL79gWXIPZuDdXiBBwiyTUg6gao3JkZtw=="],
+
+    "@rn-primitives/avatar": ["@rn-primitives/avatar@1.2.0", "", { "dependencies": { "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-ic029KaJRADdjmjPzpaSaZ9QrtgGF8DnAA7TcQ/gYqUfLXjkbfzsjARKv7NtEoJLjWAcjIAK6R8JkcbMfPtYig=="],
+
+    "@rn-primitives/checkbox": ["@rn-primitives/checkbox@1.2.0", "", { "dependencies": { "@radix-ui/react-checkbox": "^1.3.2", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-FU/c81eoo6zGm4J4uCccjnqijrQ0grMkt6W3xhnOFkxqxiU2QrnlXN7ddhm2yN+s8CNnke4bOj/xr78wIaYfiw=="],
+
+    "@rn-primitives/collapsible": ["@rn-primitives/collapsible@1.2.0", "", { "dependencies": { "@radix-ui/react-collapsible": "^1.1.11", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-JLmGpQ+7VBqNVS0QqpWqHakIpwzbpbPyaWy/czCQa97mcz+TqUHXVtHXuf2UWyW/Cix/JRAro+Vpld4YN0glPg=="],
+
+    "@rn-primitives/context-menu": ["@rn-primitives/context-menu@1.2.0", "", { "dependencies": { "@radix-ui/react-context-menu": "^2.2.15", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0", "@rn-primitives/utils": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-sHmqVeRyPM0UgTZIwmHmjQfRLiPZu1lIDwGmqTLPdiQNsN+P1zsDVgrMFqbd+GTBkHQWJaM03DpSe9neKAUnQQ=="],
+
+    "@rn-primitives/dialog": ["@rn-primitives/dialog@1.2.0", "", { "dependencies": { "@radix-ui/react-dialog": "^1.1.14", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-18q+SZe7ioyMQRYIL+aSleqque1Ky18LOQGA8kDPryrGMf16LYStd61SshMlluqhL2T00ZkEjsSVgpU5ZXvcnQ=="],
+
+    "@rn-primitives/dropdown-menu": ["@rn-primitives/dropdown-menu@1.2.0", "", { "dependencies": { "@radix-ui/react-dropdown-menu": "^2.1.15", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0", "@rn-primitives/utils": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-TJDDr8VQfw9CRZ7xZ6kBYLVMqL1xFVC5ZZ4sfRmWP6PCT0lNks4XqGuTFLeVVlNLPSmzt9GKC2DZqzDXui8/NQ=="],
+
+    "@rn-primitives/hooks": ["@rn-primitives/hooks@1.3.0", "", { "dependencies": { "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-BR97reSu7uVDpyMeQdRJHT0w8KdS6jdYnOL6xQtqS2q3H6N7vXBlX4LFERqJZphD+aziJFIAJ3HJF1vtt6XlpQ=="],
+
+    "@rn-primitives/hover-card": ["@rn-primitives/hover-card@1.2.0", "", { "dependencies": { "@radix-ui/react-hover-card": "^1.1.14", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/popover": "1.2.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-YesqV3rEIhvsarA1Aq6pmkNlmQn5rWpmjHP4s4JIrceaQjSwl9Rmnvzp7qHg0CN3AOd803hNyplMn9vn8Z3g6Q=="],
+
+    "@rn-primitives/label": ["@rn-primitives/label@1.2.0", "", { "dependencies": { "@radix-ui/react-label": "^2.1.7", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-eThBr6vn2jS81ZS4JNcg0+02TkEircH4bZmjF4IZUDl4XRpevwK95NyOkbfhGYmpVbAuisAVxDmvNOQ4OVjfug=="],
+
+    "@rn-primitives/menubar": ["@rn-primitives/menubar@1.2.0", "", { "dependencies": { "@radix-ui/react-menubar": "^1.1.15", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0", "@rn-primitives/utils": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-kcGHHqHHBEtC8+Oz9rUt39XSY69opxSF+VJyJtAkQra8ewKqf6gJofU2KHwQT8XmpbartxUBHkI8yjVHQ6zGkw=="],
+
+    "@rn-primitives/popover": ["@rn-primitives/popover@1.2.0", "", { "dependencies": { "@radix-ui/react-popover": "^1.1.14", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-QJ2T+RcF1FyTQy58Nz8Bwy5lnan5Rt7xQPl8rB2n7DBCGOnZNhEub5LoHm+gjmskGo9t1JyNKoEAD7I4j/7jQQ=="],
+
     "@rn-primitives/portal": ["@rn-primitives/portal@1.3.0", "", { "dependencies": { "zustand": "^5.0.4" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-a2DSce7TcSfcs0cCngLadAJOvx/+mdH9NRu+GxkX8NPRsGGhJvDEOqouMgDqLwx7z9mjXoUaZcwaVcemUSW9/A=="],
 
+    "@rn-primitives/progress": ["@rn-primitives/progress@1.2.0", "", { "dependencies": { "@radix-ui/react-progress": "^1.1.7", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-bbO4WGSNAd2idYDW0ma4xCX9UFOjNK3U4F4hLRhMKglz3c/QVYfpKvlGQ0Y0d7kpelA7MQizvFeqGGYfxSuisw=="],
+
+    "@rn-primitives/radio-group": ["@rn-primitives/radio-group@1.2.0", "", { "dependencies": { "@radix-ui/react-radio-group": "^1.3.7", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-H/u3E4S6FmvDyWSgs3uLg0I5t12i8E2JGJRelbKv5QzLSLdq8684dLfCbwuNjs/OzDAi5x1l27bf9+Jw42MvNw=="],
+
+    "@rn-primitives/select": ["@rn-primitives/select@1.2.0", "", { "dependencies": { "@radix-ui/react-select": "^2.2.5", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-W3qFkdSAFPnjNMM7II5MiLCItjWOGXr8f+3obPtLAHcWrcsX/d1KogmplWXwmhBvVStCgE1OpJAD3DE2CHx9Rw=="],
+
+    "@rn-primitives/separator": ["@rn-primitives/separator@1.2.0", "", { "dependencies": { "@radix-ui/react-separator": "^1.1.7", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-1suBbXNm7cNEP/eKshh3xsn5dPNp532qU9fBfBA5mW9ZN5pUO3wrwv974heluVX/pOXBZ+li3HGN/Aos134stA=="],
+
     "@rn-primitives/slot": ["@rn-primitives/slot@1.2.0", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-cpbn+JLjSeq3wcA4uqgFsUimMrWYWx2Ks7r5rkwd1ds1utxynsGkLOKpYVQkATwWrYhtcoF1raxIKEqXuMN+/w=="],
 
     "@rn-primitives/switch": ["@rn-primitives/switch@1.2.0", "", { "dependencies": { "@radix-ui/react-switch": "^1.2.5", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-M4r4LvLUFgn3SIkrMuEkDIxnRbHPLZF2cvKhdHmsk1vk6DSIw3WxYEA+0GkU6a8wnOCFzWRl4kHh5+x86bo1/w=="],
 
+    "@rn-primitives/tabs": ["@rn-primitives/tabs@1.2.0", "", { "dependencies": { "@radix-ui/react-tabs": "^1.1.12", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-sKqVYQD1s46eS8kGBsCGxJrtZ4my+sjXD5m2auGSdTJmJ8dNYqZJEI1caiMm64ZvRuQDe2bFsekAFGexBD4qUQ=="],
+
+    "@rn-primitives/toggle": ["@rn-primitives/toggle@1.2.0", "", { "dependencies": { "@radix-ui/react-toggle": "^1.1.9", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-pVhlIdGCOaxBmcrSUYF3EUTeqOoLHCYEuj/qo64Ai89DnI5aSmReBgpttY5v/r0gNrku9dJZfrOe+uGzWNUn8Q=="],
+
+    "@rn-primitives/toggle-group": ["@rn-primitives/toggle-group@1.2.0", "", { "dependencies": { "@radix-ui/react-toggle-group": "^1.1.10", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0", "@rn-primitives/utils": "1.2.0" }, "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-xCbYZzGzCbr/3pu3xE9pEKzuXU5LHT0ZlK9WMdECQUHLRjSI2A6KnUiZJ+JqZ3lzcVlgCE2lZeZXmpvVyBXnNQ=="],
+
+    "@rn-primitives/tooltip": ["@rn-primitives/tooltip@1.2.0", "", { "dependencies": { "@radix-ui/react-tooltip": "^1.2.7", "@rn-primitives/hooks": "1.3.0", "@rn-primitives/slot": "1.2.0", "@rn-primitives/types": "1.2.0" }, "peerDependencies": { "@rn-primitives/portal": "*", "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-Fn1Y/maW1o64QI+nmBj2jBI/KdCEXv8kVGbDjjDFI68KUxDjuig/hACLiD7fEbLBhZqB/QnHUSRsnPUUOOVGdA=="],
+
     "@rn-primitives/types": ["@rn-primitives/types@1.2.0", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-b+6zKgdKVqAfaFPSfhwlQL0dnPQXPpW890m3eguC0VDI1eOsoEvUfVb6lmgH4bum9MmI0xymq4tOUI/fsKLoCQ=="],
 
+    "@rn-primitives/utils": ["@rn-primitives/utils@1.2.0", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-web": "*" }, "optionalPeers": ["react-native", "react-native-web"] }, "sha512-vLXV5NuxIHDeb4Bw57FzdUh89/g8gz6GERm8TsbJaSUPsDXfnC/ffeYiZJb0LxNteKE3Nr8na4Jy2n26tFil7w=="],
+
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.2", "", {}, "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw=="],
 
     "@rollup/plugin-commonjs": ["@rollup/plugin-commonjs@28.0.1", "", { "dependencies": { "@rollup/pluginutils": "^5.0.1", "commondir": "^1.0.1", "estree-walker": "^2.0.2", "fdir": "^6.2.0", "is-reference": "1.2.1", "magic-string": "^0.30.3", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^2.68.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-+tNWdlWKbpB3WgBN7ijjYkq9X5uhjmcvyjEght4NmH5fAU++zfQzAJ6wumLS+dNcvwEZhKx2Z+skY8m7v0wGSA=="],
diff --git a/packages/durable-session/package.json b/packages/durable-session/package.json
index 864e1d25126..5e242a8c89e 100644
--- a/packages/durable-session/package.json
+++ b/packages/durable-session/package.json
@@ -17,9 +17,9 @@
 		"@durable-streams/state": "^0.2.0",
 		"@standard-schema/spec": "^1.0.0",
 		"@tanstack/ai": "^0.3.0",
-		"@tanstack/db": "^0.5.22",
+		"@tanstack/db": "0.5.22",
 		"@tanstack/db-ivm": "^0.1.17",
-		"zod": "^4.1.12"
+		"zod": "^4.3.5"
 	},
 	"devDependencies": {
 		"@superset/typescript": "workspace:*",
@@ -29,9 +29,9 @@
 		"typescript": "^5.9.3"
 	},
 	"peerDependencies": {
-		"react": "^18.0.0 || ^19.0.0",
-		"@tanstack/react-db": "^0.1.66",
 		"@superset/ui": "workspace:*",
-		"lucide-react": ">=0.300.0"
+		"@tanstack/react-db": "^0.1.66",
+		"lucide-react": ">=0.300.0",
+		"react": "^18.0.0 || ^19.0.0"
 	}
 }