diff --git a/examples/web/components/CodeSnippet.tsx b/examples/web/components/CodeSnippet.tsx
index a6424fe..ce410a2 100644
--- a/examples/web/components/CodeSnippet.tsx
+++ b/examples/web/components/CodeSnippet.tsx
@@ -4,6 +4,7 @@ import withShiki from "@stefanprobst/remark-shiki";
 
 import { Editor } from "@monaco-editor/react";
 import domtoimage from "dom-to-image";
+import { $ } from "migacss";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { AiOutlineDownload } from "react-icons/ai";
 import { BsStars } from "react-icons/bs";
@@ -427,16 +428,16 @@ export function CodeSnippet({ code: _code }: { code?: string }) {
   };
 
   return (
-    <Column height={"100vh"} padding={12} gap={12}>
+    <Column $height={"100vh"} $padding={12} $gap={12}>
       <View>
-        <Row alignItems="center" justifyContent="space-between" gap={20}>
+        <Row $alignItems="center" $justifyContent="space-between" $gap={20}>
           <Text type="headline1">Shaku Snippet</Text>
-          <a href="/" style={{ textDecoration: "none" }}>
-            <Text type="headline5" color="#0e67e4">
+          <$.a href="/" $textDecoration="none">
+            <Text type="headline5" $color="#0e67e4">
               <BsStars />
               Shaku Playground →
             </Text>
-          </a>
+          </$.a>
         </Row>
         <Text type="body">
           Annotate code snippet with <a href="/">Shaku Code Annotate Syntax</a>{" "}
@@ -445,9 +446,9 @@ export function CodeSnippet({ code: _code }: { code?: string }) {
         </Text>
       </View>
 
-      <Row gap={20} flex="1 0 0 ">
-        <Column flex="1 0 0" maxWidth={600}>
-          <Row marginBottom={"1.5rem"}>
+      <Row $gap={20} $flex="1 0 0 ">
+        <Column $flex="1 0 0" $maxWidth={600}>
+          <Row $marginBottom="1.5rem">
             <select
               value={lang}
               // @ts-ignore
@@ -479,12 +480,12 @@ export function CodeSnippet({ code: _code }: { code?: string }) {
             }}
           />
         </Column>
-        <View flex="1 0 0">
+        <View $flex="1 0 0">
           <Row
-            justifyContent="flex-start"
-            marginBottom="1rem"
-            gap={12}
-            alignItems="center"
+            $justifyContent="flex-start"
+            $marginBottom="1rem"
+            $gap={12}
+            $alignItems="center"
           >
             <Text type="headline4">Preview</Text>
 
@@ -513,65 +514,54 @@ export function CodeSnippet({ code: _code }: { code?: string }) {
             ></Button>
           </Row>
           <View
-            ref={refPreview}
-            padding="40px 40px 10px 40px"
-            minWidth={400}
-            backgroundColor={selectedTheme.background}
-            width="min-content"
+            $padding="40px 40px 10px 40px"
+            $minWidth={400}
+            $backgroundColor={selectedTheme.background}
+            $width="min-content"
             // @ts-ignore
             style={{ ...selectedTheme.cssVars }}
+            ref={refPreview}
           >
-            <View flex="0 0 0" width="max-content" margin="auto auto">
-              <p
-                style={{
-                  backgroundColor: "#24292e",
-                  margin: 0,
-                  padding: "15px 15px 0",
-                  display: "flex",
-                  gap: "8px",
-                  borderRadius: "6px 6px 0 0",
-                  alignItems: "center",
-                }}
+            <View $flex="0 0 0" $width="max-content" $margin="auto auto">
+              <$.p
+                $backgroundColor="#24292e"
+                $margin={0}
+                $padding="15px 15px 0"
+                $display="flex"
+                $gap="8px"
+                $borderRadius="6px 6px 0 0"
+                $alignItems="center"
               >
                 <Dot color="#ff5f56" />
                 <Dot color="#ffbd2d" />
                 <Dot color="#26c940" />
-                <span
-                  style={{
-                    color: " #a39d9d",
-                    fontSize: "12px",
-                  }}
-                >
+                <$.span $color="#a39d9d" $fontSize="12px">
                   {lang}
-                </span>
-              </p>
+                </$.span>
+              </$.p>
               <div
                 className={styles.code}
                 dangerouslySetInnerHTML={{ __html: preview }}
               ></div>
-              <p
-                style={{
-                  backgroundColor: "#24292e",
-                  margin: 0,
-                  padding: "10px 10px 0",
-                  display: "flex",
-                  gap: "8px",
-                  borderRadius: "0 0 6px 6px",
-                }}
-              ></p>
-              <p
-                style={{
-                  color: "rgba(0,0,0,0.2)",
-                  textAlign: "center",
-                  width: "100%",
-                  fontWeight: "bold",
-                  margin: "10px",
-                  fontSize: "12px",
-                  height: "10px",
-                }}
+              <$.p
+                $backgroundColor="#24292e"
+                $margin={0}
+                $padding="10px 10px 0"
+                $display="flex"
+                $gap="8px"
+                $borderRadius="0 0 6px 6px"
+              ></$.p>
+              <$.p
+                $color="rgba(0,0,0,0.2)"
+                $textAlign="center"
+                $width="100%"
+                $fontWeight="bold"
+                $margin="10px"
+                $fontSize="12px"
+                $height="10px"
               >
                 {showLogo ? "Shaku Snippet" : ""}
-              </p>
+              </$.p>
             </View>
           </View>
         </View>
@@ -582,15 +572,13 @@ export function CodeSnippet({ code: _code }: { code?: string }) {
 
 function Dot({ color }: { color: string }) {
   return (
-    <span
-      style={{
-        backgroundColor: color,
-        width: "12px",
-        height: "12px",
-        display: "inline-block",
-        borderRadius: "15px",
-      }}
-    ></span>
+    <$.span
+      $backgroundColor={color}
+      $width="12px"
+      $height="12px"
+      $display="inline-block"
+      $borderRadius="15px"
+    ></$.span>
   );
 }
 
diff --git a/examples/web/components/Playground.tsx b/examples/web/components/Playground.tsx
index e4b5017..80aeee7 100644
--- a/examples/web/components/Playground.tsx
+++ b/examples/web/components/Playground.tsx
@@ -201,12 +201,12 @@ export function Playground({ code: _code }: { code?: string }) {
     );
   };
   return (
-    <Column height={"100vh"} padding={12} gap={12}>
+    <Column $height={"100vh"} $padding={12} $gap={12}>
       <View>
-        <Row alignItems="center" justifyContent="space-between" gap={20}>
+        <Row $alignItems="center" $justifyContent="space-between" $gap={20}>
           <Text type="headline1">Shaku Playground</Text>
           <$.a href="/snippet" $textDecoration="none">
-            <Text type="headline5" color="#dc0bf0">
+            <Text type="headline5" $color="#dc0bf0">
               <BsStars />
               Shaku Snippet →
             </Text>
@@ -227,8 +227,8 @@ export function Playground({ code: _code }: { code?: string }) {
           icon={<RiShareBoxLine />}
         ></Button>
       </Row>
-      <Row gap={20} flex="1 0 0 ">
-        <Column flex="1 0 0">
+      <Row $gap={20} $flex="1 0 0 ">
+        <Column $flex="1 0 0">
           <Editor
             defaultLanguage="markdown"
             height="100%"
@@ -237,7 +237,7 @@ export function Playground({ code: _code }: { code?: string }) {
             onChange={setCode}
           />
         </Column>
-        <View flex="1 0 0">
+        <View $flex="1 0 0">
           <div
             dangerouslySetInnerHTML={{ __html: preview }}
             className={styles.preview}
diff --git a/examples/web/components/bare.tsx b/examples/web/components/bare.tsx
index 8a5619c..b061039 100644
--- a/examples/web/components/bare.tsx
+++ b/examples/web/components/bare.tsx
@@ -19,17 +19,10 @@ type TextType =
 type BaseProps = {
   children?: ReactNode;
   style?: CSSProperties;
-  padding?: CSSProperties["padding"];
-  margin?: CSSProperties["padding"];
-  marginBottom?: CSSProperties["marginBottom"];
-  width?: CSSProperties["width"];
-  height?: CSSProperties["height"];
-  flex?: CSSProperties["flex"];
-  // this field seems ugly
-  maxWidth?: CSSProperties["maxWidth"];
-  minWidth?: CSSProperties["minWidth"];
-  backgroundColor?: CSSProperties["backgroundColor"];
-  color?: CSSProperties["color"];
+} & {
+  [P in keyof React.CSSProperties as P extends string
+    ? `$${P}`
+    : never]: React.CSSProperties[P];
 };
 
 export function Text({
@@ -57,43 +50,29 @@ export function Text({
   }
 }
 
-export function Column({
-  children,
-  ...rest
-}: BaseProps & {
-  gap?: CSSProperties["gap"];
-}) {
+export function Column({ children, ...rest }) {
   return (
-    <$.div style={{ display: "flex", flexDirection: "column", ...rest }}>
+    <$.div $display="flex" $flexDirection="column" {...rest}>
       {children}
     </$.div>
   );
 }
 
 export const Row = forwardRef(function Row(
-  {
-    children,
-    ...rest
-  }: BaseProps & {
-    alignItems?: CSSProperties["alignItems"];
-    justifyContent?: CSSProperties["justifyContent"];
-    gap?: CSSProperties["gap"];
-  },
+  { children, ...rest }: BaseProps,
   ref?: RefObject<HTMLDivElement>
 ) {
   return (
-    <div
+    <$.div
       ref={ref}
-      style={{
-        display: "flex",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "stretch",
-        ...rest,
-      }}
+      $display="flex"
+      $flexDirection="row"
+      $justifyContent="space-between"
+      $alignItems="stretch"
+      {...rest}
     >
       {children}
-    </div>
+    </$.div>
   );
 });
 
@@ -138,13 +117,13 @@ export function Button({
 }
 
 export const View = forwardRef(function View(
-  { children, style, ...rest }: BaseProps,
+  { children, ...rest }: BaseProps,
   ref?: RefObject<HTMLDivElement>
 ) {
   return (
-    <div style={{ ...rest, ...style }} ref={ref}>
+    <$.div {...rest} ref={ref}>
       {children}
-    </div>
+    </$.div>
   );
 });
 
diff --git a/examples/web/package.json b/examples/web/package.json
index 59139ed..3aa669f 100644
--- a/examples/web/package.json
+++ b/examples/web/package.json
@@ -17,7 +17,7 @@
     "@types/mdx": "^2.0.5",
     "copy-webpack-plugin": "^11.0.0",
     "dom-to-image": "2.6.0",
-    "migacss": "^0.0.2",
+    "migacss": "^0.0.5",
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
diff --git a/package-lock.json b/package-lock.json
index 18963ae..e39767c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,7 +86,7 @@
         "@types/mdx": "^2.0.5",
         "copy-webpack-plugin": "^11.0.0",
         "dom-to-image": "2.6.0",
-        "migacss": "^0.0.2",
+        "migacss": "^0.0.5",
         "next": "latest",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -6479,9 +6479,9 @@
       }
     },
     "node_modules/migacss": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/migacss/-/migacss-0.0.2.tgz",
-      "integrity": "sha512-TfMLzAfSAs1nBVnXlrQyFJ5wowKmmv8JN1vl9n5eMuh52SWzP1znX4ZNbLdg/gvDk6NSI+gWLpII2iDMz/5+Rg==",
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/migacss/-/migacss-0.0.5.tgz",
+      "integrity": "sha512-/TgVsmT3Ymm9rd0cKN7Rv9WrobZ5Wko/B0L1M6FD2gKZQ3A4ZuVsy4jxNuncxqQiMLpuESKUJj9L72ElCSKsHw==",
       "dependencies": {
         "tsup": "^7.2.0"
       }
@@ -15000,9 +15000,9 @@
       }
     },
     "migacss": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/migacss/-/migacss-0.0.2.tgz",
-      "integrity": "sha512-TfMLzAfSAs1nBVnXlrQyFJ5wowKmmv8JN1vl9n5eMuh52SWzP1znX4ZNbLdg/gvDk6NSI+gWLpII2iDMz/5+Rg==",
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/migacss/-/migacss-0.0.5.tgz",
+      "integrity": "sha512-/TgVsmT3Ymm9rd0cKN7Rv9WrobZ5Wko/B0L1M6FD2gKZQ3A4ZuVsy4jxNuncxqQiMLpuESKUJj9L72ElCSKsHw==",
       "requires": {
         "tsup": "^7.2.0"
       },
@@ -17366,7 +17366,7 @@
         "copy-webpack-plugin": "^11.0.0",
         "dom-to-image": "2.6.0",
         "eslint-config-custom": "*",
-        "migacss": "^0.0.2",
+        "migacss": "^0.0.5",
         "next": "latest",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",