diff --git a/packages/ui/src/RadioGroup.tsx b/packages/ui/src/RadioGroup.tsx
index aabd2ad4c..768c6a13e 100644
--- a/packages/ui/src/RadioGroup.tsx
+++ b/packages/ui/src/RadioGroup.tsx
@@ -18,17 +18,25 @@ export const Root = forwardRef<HTMLDivElement, RootProps>(
 // 	RadioGroup.Item
 // )`rounded-md border border-app-line bg-app-box px-4 py-2 flex items-center space-x-2`;
 
-export interface ItemProps extends RadioGroup.RadioGroupItemProps {}
-export const Item = ({ children, ...props }: ItemProps) => {
+export interface ItemProps extends RadioGroup.RadioGroupItemProps {
+	radioClassName?: string;
+}
+export const Item = ({ children, className, radioClassName, ...props }: ItemProps) => {
 	return (
-		<div className="flex max-w-sm space-x-2 rounded-md border border-app-line bg-app-box/50 px-4 py-3">
+		<div
+			className={clsx(
+				'flex max-w-sm space-x-2 rounded-md border border-app-line bg-app-box/50 px-4 py-3',
+				className
+			)}
+		>
 			<RadioGroup.Item
 				id={'radio' + props.value}
 				className={cx(
 					'peer relative mr-1 mt-1 h-4 w-4 flex-shrink-0 rounded-full border border-transparent',
 					'radix-state-checked:bg-accent',
 					'radix-state-unchecked:bg-gray-100 dark:radix-state-unchecked:bg-gray-900',
-					'focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800'
+					'focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring focus-visible:ring-accent focus-visible:ring-opacity-75 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-800',
+					radioClassName
 				)}
 				{...props}
 			>