checkmarble · siiick · Sep 2, 2025
diff --git a/packages/app-builder/package.json b/packages/app-builder/package.json
@@ -49,21 +49,6 @@
     "@mcansh/http-helmet": "^0.13.0",
     "@oazapfts/runtime": "^1.0.4",
     "@preact/signals-react": "^3.0.1",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-dropdown-menu": "^2.1.6",
-    "@radix-ui/react-hover-card": "^1.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.2.0",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tooltip": "^1.1.8",
     "@remix-run/node": "^2.16.5",
     "@remix-run/react": "^2.16.5",
     "@remix-run/serve": "^2.16.5",
@@ -100,6 +85,7 @@
     "pretty-cache-header": "^1.0.0",
     "qs": "^6.14.0",
     "radash": "^12.1.0",
+    "radix-ui": "^1.4.3",
     "react": "^18.3.1",
     "react-day-picker": "^9.6.2",
     "react-dom": "^18.3.1",

diff --git a/packages/app-builder/src/components/AstBuilder/OperandInfos.tsx b/packages/app-builder/src/components/AstBuilder/OperandInfos.tsx
@@ -27,13 +27,8 @@ import {
   type OperandType,
 } from '@app-builder/models/operand-type';
 import { getDataAccessorAstNodeField } from '@app-builder/services/ast-node/getDataAccessorAstNodeField';
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardPortal,
-  HoverCardTrigger,
-} from '@radix-ui/react-hover-card';
 import clsx from 'clsx';
+import { HoverCard } from 'radix-ui';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Icon } from 'ui-icons';
@@ -59,15 +54,15 @@ const contentClassnames = clsx([
 
 export function OperandInfos(props: OperandInfosProps) {
   return (
-    <HoverCard openDelay={50} closeDelay={200}>
-      <HoverCardTrigger asChild>
+    <HoverCard.Root openDelay={50} closeDelay={200}>
+      <HoverCard.Trigger asChild>
         <Icon
           icon="tip"
           className="hover:group-hover:text-purple-65 group-hover:text-purple-82 data-[state=open]:text-purple-65 size-5 shrink-0 text-transparent"
         />
-      </HoverCardTrigger>
-      <HoverCardPortal>
-        <HoverCardContent
+      </HoverCard.Trigger>
+      <HoverCard.Portal>
+        <HoverCard.Content
           side="right"
           align="start"
           sideOffset={20}
@@ -83,9 +78,9 @@ export function OperandInfos(props: OperandInfosProps) {
             </div>
             <OperandDescription node={props.node} />
           </div>
-        </HoverCardContent>
-      </HoverCardPortal>
-    </HoverCard>
+        </HoverCard.Content>
+      </HoverCard.Portal>
+    </HoverCard.Root>
   );
 }
 

diff --git a/packages/app-builder/src/components/Cases/CaseRightPanel.tsx b/packages/app-builder/src/components/Cases/CaseRightPanel.tsx
@@ -1,6 +1,6 @@
 import { createRightPanel, type RightPanelRootProps } from '@app-builder/components/RightPanel';
 import { createSimpleContext } from '@app-builder/utils/create-context';
-import { type DialogTriggerProps } from '@radix-ui/react-dialog';
+import { Dialog } from 'radix-ui';
 import { useReducer } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CreateCase } from './CreateCase';
@@ -91,7 +91,7 @@ function CaseRightPanelTrigger({
   ...otherProps
 }: {
   data: Data;
-} & DialogTriggerProps) {
+} & Dialog.DialogTriggerProps) {
   const { onTriggerClick } = useCaseRightPanelContext();
 
   return (

diff --git a/packages/app-builder/src/components/Cases/CloseCase.tsx b/packages/app-builder/src/components/Cases/CloseCase.tsx
@@ -10,8 +10,8 @@ import {
   useCloseCaseMutation,
 } from '@app-builder/queries/cases/close-case';
 import { getFieldErrors, handleSubmit } from '@app-builder/utils/form';
-import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
 import { useForm } from '@tanstack/react-form';
+import { RadioGroup } from 'radix-ui';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { match } from 'ts-pattern';
@@ -64,15 +64,15 @@ export const CloseCase = ({ id }: { id: string }) => {
             {(field) => (
               <div className="flex flex-col gap-2">
                 <FormLabel name={field.name}>Choose a status</FormLabel>
-                <RadioGroup
+                <RadioGroup.Root
                   name={field.name}
                   onValueChange={(v) => field.handleChange(v as FinalOutcome)}
                   onBlur={field.handleBlur}
                   className="flex items-center gap-1"
                 >
                   {finalOutcomes.map((s) => {
                     return (
-                      <RadioGroupItem
+                      <RadioGroup.Item
                         key={s}
                         value={s}
                         className="border-grey-90 data-[state=checked]:border-purple-60 flex items-center justify-center rounded-[20px] border bg-transparent p-1.5"
@@ -90,10 +90,10 @@ export const CloseCase = ({ id }: { id: string }) => {
                             .with('false_positive', () => 'False positive')
                             .exhaustive()}
                         </span>
-                      </RadioGroupItem>
+                      </RadioGroup.Item>
                     );
                   })}
-                </RadioGroup>
+                </RadioGroup.Root>
                 <FormErrorOrDescription errors={getFieldErrors(field.state.meta.errors)} />
               </div>
             )}

diff --git a/packages/app-builder/src/components/Filters/FilterPopover.tsx b/packages/app-builder/src/components/Filters/FilterPopover.tsx
@@ -1,5 +1,5 @@
-import * as Popover from '@radix-ui/react-popover';
 import clsx from 'clsx';
+import { Popover } from 'radix-ui';
 import { type ComponentPropsWithoutRef, forwardRef } from 'react';
 import { Icon } from 'ui-icons';
 

diff --git a/packages/app-builder/src/components/Filters/FiltersDropdownMenu.tsx b/packages/app-builder/src/components/Filters/FiltersDropdownMenu.tsx
@@ -1,5 +1,5 @@
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
+import { DropdownMenu } from 'radix-ui';
 import { forwardRef } from 'react';
 
 const FiltersDropdownMenuContent = forwardRef<

diff --git a/packages/app-builder/src/components/Form/Tanstack/FormLabel.tsx b/packages/app-builder/src/components/Form/Tanstack/FormLabel.tsx
@@ -1,25 +1,24 @@
-import * as LabelPrimitive from '@radix-ui/react-label';
+import { Label } from 'radix-ui';
 import * as React from 'react';
 import { cn } from 'ui-design-system';
 
 interface FormLabelProps
-  extends Omit<React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, 'htmlFor'> {
+  extends Omit<React.ComponentPropsWithoutRef<typeof Label.Root>, 'htmlFor'> {
   name: string;
   valid?: boolean;
 }
 
-export const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  FormLabelProps
->(function FormLabel({ className, valid, name, ...props }, ref) {
-  return (
-    <LabelPrimitive.Root
-      ref={ref}
-      htmlFor={name}
-      className={cn(className, {
-        'text-red-47': valid !== undefined && !valid,
-      })}
-      {...props}
-    />
-  );
-});
+export const FormLabel = React.forwardRef<React.ElementRef<typeof Label.Root>, FormLabelProps>(
+  function FormLabel({ className, valid, name, ...props }, ref) {
+    return (
+      <Label.Root
+        ref={ref}
+        htmlFor={name}
+        className={cn(className, {
+          'text-red-47': valid !== undefined && !valid,
+        })}
+        {...props}
+      />
+    );
+  },
+);
diff --git a/packages/app-builder/src/components/RightPanel.tsx b/packages/app-builder/src/components/RightPanel.tsx
@@ -1,6 +1,6 @@
 import { createSimpleContext } from '@app-builder/utils/create-context';
-import * as Dialog from '@radix-ui/react-dialog';
 import clsx from 'clsx';
+import { Dialog } from 'radix-ui';
 import { forwardRef } from 'react';
 import { noop } from 'typescript-utils';
 import { Icon } from 'ui-icons';

diff --git a/packages/app-builder/src/components/Scenario/Sanction/FieldRuleGroup.tsx b/packages/app-builder/src/components/Scenario/Sanction/FieldRuleGroup.tsx
@@ -1,5 +1,5 @@
-import { Content, Root, Trigger } from '@radix-ui/react-popover';
 import clsx from 'clsx';
+import { Popover } from 'radix-ui';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { unique } from 'remeda';
@@ -39,7 +39,7 @@ export const FieldRuleGroup = ({
   );
 
   return (
-    <Root
+    <Popover.Root
       defaultOpen={false}
       onOpenChange={(open) => {
         if (open === false) {
@@ -50,7 +50,7 @@ export const FieldRuleGroup = ({
     >
       <div className="flex items-center gap-2">
         {selectedRuleGroup ? <RuleGroup ruleGroup={selectedRuleGroup} /> : null}
-        <Trigger asChild>
+        <Popover.Trigger asChild>
           <Button
             disabled={disabled}
             variant="secondary"
@@ -63,9 +63,9 @@ export const FieldRuleGroup = ({
             />
             {!selectedRuleGroup ? <span>{t('scenarios:rules.add_group')}</span> : null}
           </Button>
-        </Trigger>
+        </Popover.Trigger>
       </div>
-      <Content className="mt-1 min-w-[280px] shadow-md" align="start">
+      <Popover.Content className="mt-1 min-w-[280px] shadow-md" align="start">
         <Command className="flex flex-col gap-2 p-2">
           <div className="border-grey-90 flex items-center gap-2 border-b p-2 pb-3">
             {selectedRuleGroup ? (
@@ -123,7 +123,7 @@ export const FieldRuleGroup = ({
             ) : null}
           </CommandList>
         </Command>
-      </Content>
-    </Root>
+      </Popover.Content>
+    </Popover.Root>
   );
 };
diff --git a/packages/app-builder/src/components/Scenario/Trigger/ScheduleOption/ScheduleOptionEditor.tsx b/packages/app-builder/src/components/Scenario/Trigger/ScheduleOption/ScheduleOptionEditor.tsx
@@ -1,6 +1,6 @@
 import { useFormatLanguage } from '@app-builder/utils/format';
-import { Label } from '@radix-ui/react-label';
 import { type ParseKeys } from 'i18next';
+import { Label } from 'radix-ui';
 import { Trans, useTranslation } from 'react-i18next';
 import { Checkbox, Select } from 'ui-design-system';
 
@@ -37,7 +37,9 @@ export function ScheduleOptionEditor({
             })
           }
         />
-        <Label htmlFor="scheduleScenario">{t('scenarios:trigger.schedule_scenario.option')}</Label>
+        <Label.Root htmlFor="scheduleScenario">
+          {t('scenarios:trigger.schedule_scenario.option')}
+        </Label.Root>
       </div>
       {scheduleOption.isScenarioScheduled ? (
         <>

diff --git a/packages/app-builder/src/components/UserInfo.tsx b/packages/app-builder/src/components/UserInfo.tsx
@@ -2,8 +2,8 @@ import { useUnavailabilitySettings } from '@app-builder/queries/personal-setting
 import { segment } from '@app-builder/services/segment';
 import { getFullName } from '@app-builder/services/user';
 import { getRoute } from '@app-builder/utils/routes';
-import * as Popover from '@radix-ui/react-popover';
 import { Form } from '@remix-run/react';
+import { Popover } from 'radix-ui';
 import { useTranslation } from 'react-i18next';
 import { Avatar, Button, Tag } from 'ui-design-system';
 import { Icon, Logo } from 'ui-icons';

diff --git a/...ilder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules.tsx b/...ilder/src/routes/_builder+/scenarios+/$scenarioId+/i+/$iterationId+/_edit-view+/rules.tsx
@@ -24,7 +24,6 @@ import {
 import { formatNumber, useFormatLanguage } from '@app-builder/utils/format';
 import { getRoute } from '@app-builder/utils/routes';
 import { fromParams, fromUUIDtoSUUID, useParam } from '@app-builder/utils/short-uuid';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { type LoaderFunctionArgs } from '@remix-run/node';
 import { Link, useLoaderData } from '@remix-run/react';
 import {
@@ -36,6 +35,7 @@ import {
 } from '@tanstack/react-table';
 import { type Namespace } from 'i18next';
 import { type FeatureAccessLevelDto } from 'marble-api/generated/feature-access-api';
+import { DropdownMenu } from 'radix-ui';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as R from 'remeda';

diff --git a/packages/ui-design-system/package.json b/packages/ui-design-system/package.json
@@ -38,27 +38,13 @@
   "dependencies": {
     "@ariakit/react": "^0.4.15",
     "@marble/shared": "workspace:*",
-    "@radix-ui/react-avatar": "^1.1.3",
-    "@radix-ui/react-checkbox": "^1.1.4",
-    "@radix-ui/react-collapsible": "^1.1.3",
-    "@radix-ui/react-dialog": "^1.1.6",
-    "@radix-ui/react-hover-card": "^1.1.6",
-    "@radix-ui/react-label": "^2.1.2",
-    "@radix-ui/react-popover": "^1.1.6",
-    "@radix-ui/react-radio-group": "^1.2.3",
-    "@radix-ui/react-scroll-area": "^1.2.3",
-    "@radix-ui/react-select": "^2.1.6",
-    "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-switch": "^1.1.3",
-    "@radix-ui/react-tabs": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.1.8",
     "@tanstack/react-table": "^8.21.2",
     "@tanstack/react-virtual": "3.13.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "radix-ui": "^1.4.3",
     "react-day-picker": "^9.6.2",
     "react-markdown": "^10.1.0",
     "sharpstate": "^0.0.13",

diff --git a/packages/ui-design-system/src/Avatar/Avatar.tsx b/packages/ui-design-system/src/Avatar/Avatar.tsx
@@ -1,5 +1,5 @@
-import { Fallback, Image, Root, type AvatarProps as RootAvatarProps } from '@radix-ui/react-avatar';
 import { cva, type VariantProps } from 'class-variance-authority';
+import { Avatar as RadixAvatar } from 'radix-ui';
 
 const avatar = cva(
   'inline-flex select-none items-center justify-center overflow-hidden rounded-full shrink-0',
@@ -25,7 +25,7 @@ const avatar = cva(
   },
 );
 
-export type AvatarProps = Omit<RootAvatarProps, 'asChild'> &
+export type AvatarProps = Omit<RadixAvatar.AvatarProps, 'asChild'> &
   VariantProps<typeof avatar> & {
     firstName?: string;
     lastName?: string;
@@ -42,26 +42,26 @@ export function Avatar({
   ...props
 }: AvatarProps) {
   return (
-    <Root
+    <RadixAvatar.Root
       className={avatar({
         size,
         color,
         className,
       })}
       {...props}
     >
-      <Image
+      <RadixAvatar.Image
         referrerPolicy="no-referrer"
         className="size-full object-cover"
         src={src}
         alt={firstName || lastName ? `${firstName ?? ''} ${lastName ?? ''}` : 'Unknown user'}
       />
-      <Fallback
+      <RadixAvatar.Fallback
         className="text-grey-00 flex size-full items-center justify-center text-center font-normal uppercase"
         delayMs={src ? 400 : 0}
       >
         {`${firstName?.[0] ?? ''}${lastName?.[0] ?? ''}` || '👤'}
-      </Fallback>
-    </Root>
+      </RadixAvatar.Fallback>
+    </RadixAvatar.Root>
   );
 }
diff --git a/packages/ui-design-system/src/Checkbox/Checkbox.stories.tsx b/packages/ui-design-system/src/Checkbox/Checkbox.stories.tsx
@@ -1,5 +1,5 @@
-import * as Label from '@radix-ui/react-label';
 import { type Meta, type StoryFn } from '@storybook/react';
+import { Label } from 'radix-ui';
 import { useState } from 'react';
 
 import { Checkbox } from './Checkbox';