diff --git a/.changeset/dirty-buttons-wink.md b/.changeset/dirty-buttons-wink.md
new file mode 100644
index 00000000..c9c0e48d
--- /dev/null
+++ b/.changeset/dirty-buttons-wink.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Add id to special prop
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 5a242118..c06e64ca 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -158,9 +158,9 @@ mod tests {
         reset_class_map();
         assert_debug_snapshot!(extract(
             "test.tsx",
-            r"import {Box} from '@devup-ui/core'
-        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} />
-        ",
+            r#"import {Box} from '@devup-ui/core'
+        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} id="id" />
+        "#,
             ExtractOption {
                 package: "@devup-ui/core".to_string(),
                 css_file: None
diff --git a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap
index 77f33dd6..1d4d8066 100644
--- a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props.snap
@@ -1,6 +1,6 @@
 ---
 source: libs/extractor/src/lib.rs
-expression: "extract(\"test.tsx\",\nr\"import {Box} from '@devup-ui/core'\n        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} />\n        \",\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
+expression: "extract(\"test.tsx\",\nr#\"import {Box} from '@devup-ui/core'\n        <Box padding={1} ref={ref} data-test={1} role={2} children={[]} onClick={()=>{}} aria-valuenow={24} key={2} tabIndex={1} id=\"id\" />\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()"
 ---
 ExtractOutput {
     styles: [
@@ -14,5 +14,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div ref={ref} data-test={1} role={2} children={[]} onClick={() => {}} aria-valuenow={24} key={2} tabIndex={1} className=\"d0\" />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div ref={ref} data-test={1} role={2} children={[]} onClick={() => {}} aria-valuenow={24} key={2} tabIndex={1} id=\"id\" className=\"d0\" />;\n",
 }
diff --git a/libs/extractor/src/utils.rs b/libs/extractor/src/utils.rs
index d277c6d0..65eef6c7 100644
--- a/libs/extractor/src/utils.rs
+++ b/libs/extractor/src/utils.rs
@@ -35,6 +35,7 @@ static SPECIAL_PROPERTIES: Lazy<HashSet<&str>> = Lazy::new(|| {
         "role",
         "ref",
         "key",
+        "id",
         "alt",
         "type",
         "src",
diff --git a/libs/sheet/src/snapshots/sheet__tests__create_css-5.snap b/libs/sheet/src/snapshots/sheet__tests__create_css-5.snap
new file mode 100644
index 00000000..eb43fc3c
--- /dev/null
+++ b/libs/sheet/src/snapshots/sheet__tests__create_css-5.snap
@@ -0,0 +1,5 @@
+---
+source: libs/sheet/src/lib.rs
+expression: sheet.create_css()
+---
+".test::placeholder{background:red}.test:hover{background:red}.test:active{background:blue}"