diff --git a/.changeset/two-clouds-refuse.md b/.changeset/two-clouds-refuse.md
new file mode 100644
index 0000000000..e71b8916ae
--- /dev/null
+++ b/.changeset/two-clouds-refuse.md
@@ -0,0 +1,5 @@
+---
+"@heroui/radio": patch
+---
+
+handle props styles in getBaseProps (#5942)
diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.jsx b/apps/docs/content/components/radio-group/custom-impl.raw.jsx
index def0e7f282..80fe35a1f4 100644
--- a/apps/docs/content/components/radio-group/custom-impl.raw.jsx
+++ b/apps/docs/content/components/radio-group/custom-impl.raw.jsx
@@ -15,12 +15,13 @@ export const CustomRadio = (props) => {
 
   return (
     <Component
-      {...getBaseProps()}
-      className={cn(
-        "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent",
-        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
-        "data-[selected=true]:border-primary",
-      )}
+      {...getBaseProps({
+        className: cn(
+          "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent m-0",
+          "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+          "data-[selected=true]:border-primary",
+        ),
+      })}
     >
       <VisuallyHidden>
         <input {...getInputProps()} />
diff --git a/apps/docs/content/components/radio-group/custom-impl.raw.tsx b/apps/docs/content/components/radio-group/custom-impl.raw.tsx
index 0dbb367633..16e2460c8e 100644
--- a/apps/docs/content/components/radio-group/custom-impl.raw.tsx
+++ b/apps/docs/content/components/radio-group/custom-impl.raw.tsx
@@ -18,12 +18,13 @@ export const CustomRadio = (props: RadioProps) => {
 
   return (
     <Component
-      {...getBaseProps()}
-      className={cn(
-        "group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse",
-        "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
-        "data-[selected=true]:border-primary",
-      )}
+      {...getBaseProps({
+        className: cn(
+          "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent m-0",
+          "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+          "data-[selected=true]:border-primary",
+        ),
+      })}
     >
       <VisuallyHidden>
         <input {...getInputProps()} />
diff --git a/packages/components/radio/src/use-radio.ts b/packages/components/radio/src/use-radio.ts
index 78e5f92b18..67425fa74f 100644
--- a/packages/components/radio/src/use-radio.ts
+++ b/packages/components/radio/src/use-radio.ts
@@ -156,7 +156,7 @@ export function useRadio(props: UseRadioProps) {
       return {
         ...props,
         ref: domRef,
-        className: slots.base({class: baseStyles}),
+        className: slots.base({class: clsx(baseStyles, props?.className)}),
         "data-disabled": dataAttr(isDisabled),
         "data-focus": dataAttr(isFocused),
         "data-focus-visible": dataAttr(isFocusVisible),
diff --git a/packages/components/radio/stories/radio.stories.tsx b/packages/components/radio/stories/radio.stories.tsx
index 644124ff19..0ec8be2243 100644
--- a/packages/components/radio/stories/radio.stories.tsx
+++ b/packages/components/radio/stories/radio.stories.tsx
@@ -4,11 +4,11 @@ import type {RadioProps, RadioGroupProps} from "../src";
 
 import React from "react";
 import {VisuallyHidden} from "@react-aria/visually-hidden";
-import {radio, button} from "@heroui/theme";
+import {radio, button, cn} from "@heroui/theme";
 import {clsx} from "@heroui/shared-utils";
 import {Form} from "@heroui/form";
 
-import {RadioGroup, Radio, useRadio, useRadioGroupContext} from "../src";
+import {RadioGroup, Radio, useRadio} from "../src";
 
 export default {
   title: "Components/RadioGroup",
@@ -360,19 +360,14 @@ export const Controlled = {
 const CustomRadio = (props: RadioProps) => {
   const {children, ...otherProps} = props;
 
-  const {groupState} = useRadioGroupContext();
-
-  const isSelected = groupState.selectedValue === otherProps.value;
-
   return (
     <Radio
       {...otherProps}
       classNames={{
-        base: clsx(
-          "inline-flex bg-content1 hover:bg-content2 items-center justify-between flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
-          {
-            "border-primary": isSelected,
-          },
+        base: cn(
+          "inline-flex m-0 bg-content1 hover:bg-content2 items-center justify-between",
+          "flex-row-reverse max-w-[300px] cursor-pointer rounded-lg gap-4 p-4 border-2 border-transparent",
+          "data-[selected=true]:border-primary",
         ),
       }}
     >
@@ -401,7 +396,6 @@ const RadioCard = (props: RadioProps) => {
   const {
     Component,
     children,
-    isSelected,
     description,
     getBaseProps,
     getWrapperProps,
@@ -413,13 +407,13 @@ const RadioCard = (props: RadioProps) => {
 
   return (
     <Component
-      {...getBaseProps()}
-      className={clsx(
-        "group inline-flex items-center justify-between hover:bg-content2 flex-row-reverse max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
-        {
-          "border-primary": isSelected,
-        },
-      )}
+      {...getBaseProps({
+        className: cn(
+          "group inline-flex items-center hover:opacity-70 active:opacity-50 justify-between flex-row-reverse tap-highlight-transparent m-0",
+          "max-w-[300px] cursor-pointer border-2 border-default rounded-lg gap-4 p-4",
+          "data-[selected=true]:border-primary",
+        ),
+      })}
     >
       <VisuallyHidden>
         <input {...getInputProps()} />