diff --git a/.changeset/plenty-months-sneeze.md b/.changeset/plenty-months-sneeze.md
new file mode 100644
index 00000000..8e31a5bb
--- /dev/null
+++ b/.changeset/plenty-months-sneeze.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+Add support conditional pattern
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 7151629e..17b19595 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -844,6 +844,19 @@ mod tests {
             "test.tsx",
             r#"import { Box } from "@devup-ui/core";
 <Box margin={a ?? "1px"} />;
+"#,
+            ExtractOption {
+                package: "@devup-ui/core".to_string(),
+                css_file: None
+            }
+        )
+        .unwrap());
+
+        reset_class_map();
+        assert_debug_snapshot!(extract(
+            "test.tsx",
+            r#"import { Box } from "@devup-ui/core";
+<Box margin={(a===1||a===2)&&b===3 && "1px"} />;
 "#,
             ExtractOption {
                 package: "@devup-ui/core".to_string(),
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap
new file mode 100644
index 00000000..dbd9542a
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_logical_case-4.snap
@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "extract(\"test.tsx\",\nr#\"import { Box } from \"@devup-ui/core\";\n<Box margin={(a===1||a===2)&&b===3 && \"1px\"} />;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+---
+ExtractOutput {
+    styles: [
+        Static(
+            ExtractStaticStyle {
+                property: "margin",
+                value: "1px",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    ],
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={(a === 1 || a === 2) && b === 3 ? \"d0\" : \"\"} />;\n",
+}
diff --git a/packages/react/src/types/responsive-value.ts b/packages/react/src/types/responsive-value.ts
index bcfb1bc9..6e8b96f8 100644
--- a/packages/react/src/types/responsive-value.ts
+++ b/packages/react/src/types/responsive-value.ts
@@ -1,4 +1,4 @@
-type Value<T> = T | null | undefined
+type Value<T> = T | null | undefined | false
 export type ResponsiveValue<T> = 0 extends T
   ? Value<number | T> | Value<number | T>[]
   : Value<T> | Value<T>[]