diff --git a/apps/landing/src/app/(detail)/docs/api/box/page.mdx b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
index 3ace3fbaa..748acafb2 100644
--- a/apps/landing/src/app/(detail)/docs/api/box/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
@@ -15,15 +15,79 @@ It is just a `div` with some styles.
 ## How to use
 
 ```tsx
-const before = <Box bg="red" />
+import { Box } from '@devup-ui/react'
 
-const after = <div className="d0" />
+function App() {
+  return <Box bg="red" flex={1} height="100px" width={100} />
+}
 ```
 
+The Box component defined above will render like this:
+
+```tsx
+function App() {
+  return <div className="a b c d" />
+}
+```
+
+```css
+.a {
+  background: red;
+}
+.b {
+  flex: 1;
+}
+.c {
+  height: 100px;
+}
+.d {
+  width: 400px;
+}
+```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+### Rendering as Another Element
+
 You can use the `as` prop to change the element type.
 
 ```tsx
-const before = <Box as="span" />
+import { Box } from '@devup-ui/react'
+
+function App() {
+  return <Box as="span" bg="red" />
+}
+```
+
+By using the as prop, you can render it as another element as shown below:
+
+```tsx
+function App() {
+  return <span className="a" />
+}
+```
 
-const after = <span className="d0" />
+```css
+.a {
+  background: red;
+}
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/button/page.mdx b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
index 5b517db81..0cbc85daf 100644
--- a/apps/landing/src/app/(detail)/docs/api/button/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
@@ -13,7 +13,58 @@ The `Button` component is a simple button component that can be used to trigger
 ## How to use
 
 ```tsx
-const before = <Button bg="red" />
+import { Button } from '@devup-ui/react'
 
-const after = <button className="d0" />
+function App() {
+  return (
+    <Button bg="red" h={25} onClick={() => alert('clicked!!')} w={25}>
+      click me
+    </Button>
+  )
+}
+```
+
+The Button component defined above will render like this:
+
+```tsx
+function App() {
+  return (
+    <button className="a b c" onClick="alert('clicked!!')">
+      click me
+    </button>
+  )
+}
+```
+
+```css
+.a {
+  background: red;
+}
+.b {
+  width: 100px;
+}
+.c {
+  height: 100px;
+}
 ```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
diff --git a/apps/landing/src/app/(detail)/docs/api/center/page.mdx b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
index fa0950962..63783ba43 100644
--- a/apps/landing/src/app/(detail)/docs/api/center/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
@@ -14,19 +14,90 @@ It has a `display: flex` style with `justify-content: center` and `align-items:
 ## How to use
 
 ```tsx
-const before = (
-  <Center>
-    <Box bg="blue" h={25} w={25} />
-    <Box bg="blue" h={25} w={25} />
-    <Box bg="blue" h={25} w={25} />
-  </Center>
-)
-
-const after = (
-  <div className="d3 d4 d5">
-    <div className="d0 d1 d2"></div>
-    <div className="d0 d1 d2"></div>
-    <div className="d0 d1 d2"></div>
-  </div>
-)
+import { Box, Center } from '@devup-ui/react'
+
+function App() {
+  return (
+    <Center>
+      <Box bg="blue" h={25} w={25} />
+      <Box bg="blue" display="flex" h={25} w={25} />
+      <Box bg="blue" h={25} w={25} />
+    </Center>
+  )
+}
+```
+
+The Center component defined above will render like this:
+
+```tsx
+function App() {
+  return (
+    <div className="e f g">
+      <div className="a b c"></div>
+      <div className="a b c d"></div>
+      <div className="a b c"></div>
+    </div>
+  )
+}
 ```
+
+```css
+.a {
+  background: blue;
+}
+.b {
+  height: 100px;
+}
+.c {
+  width: 100px;
+}
+.d {
+  display: flex;
+}
+.e {
+  display: flex;
+}
+.f {
+  justify-content: center;
+}
+.g {
+  align-items: center;
+}
+```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+<br />
+
+Class names and style properties are resolved in the following order:
+
+1. Generate class names for child components.
+   - Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
+
+2. Remove duplicate component properties.
+   - Deduplicate only when both the `key:value` pair and the `style-order` match.
+
+3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
+   - Example: In other words, the `display: flex` implemented internally by `Center` and the `display: flex` provided directly by the user have different style-orders, so they are not removed, and the final style is applied according to priority.
+
+4. Generate the parent component’s className based on the merged result.
+   - After child classNames are generated and duplicates (per rules above) removed, compute/merge the parent className and final style output.
diff --git a/apps/landing/src/app/(detail)/docs/api/css/page.mdx b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
index 045b5110d..ecf1836b4 100644
--- a/apps/landing/src/app/(detail)/docs/api/css/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
@@ -18,15 +18,39 @@ You can use `css` as a tag function to create a css string. Pass in a string of
 into a class list.
 
 ```tsx
-const before = (
-  <div
-    className={css`
-      color: red;
-    `}
-  />
-)
-
-const after = <any className="d0" />
+import { css } from '@devup-ui/react'
+
+function App() {
+  return (
+    <div
+      className={css`
+        background: red;
+        width: 100px;
+        height: 100px;
+      `}
+    />
+  )
+}
+```
+
+The content above is rendered/transformed as shown below:
+
+```tsx
+function App() {
+  return <div className="a b c" />
+}
+```
+
+```css
+.a {
+  background: red;
+}
+.b {
+  width: 100px;
+}
+.c {
+  height: 100px;
+}
 ```
 
 ### CSS Object
@@ -34,13 +58,37 @@ const after = <any className="d0" />
 You can also use the css function by passing in a css object as an argument.
 
 ```tsx
-const before = (
-  <any
-    className={css({
-      color: 'red',
-    })}
-  />
-)
-
-const after = <any className="d0" />
+import { css } from '@devup-ui/react'
+
+function App() {
+  return (
+    <div
+      className={css({
+        background: 'red',
+        width: '100px',
+        height: '100px',
+      })}
+    />
+  )
+}
+```
+
+The content above is rendered/transformed as shown below:
+
+```tsx
+function App() {
+  return <div className="a b c" />
+}
+```
+
+```css
+.a {
+  background: red;
+}
+.b {
+  width: 100px;
+}
+.c {
+  height: 100px;
+}
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
index 1ea9852cb..710363a46 100644
--- a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
@@ -15,7 +15,23 @@ It has a `display: flex` style by default.
 ## How to use
 
 ```tsx
-const before = <Flex />
+import { Flex } from '@devup-ui/react'
 
-const after = <div className="d0" />
+function App() {
+  return <Flex />
+}
+```
+
+The Flex component defined above will render like this:
+
+```tsx
+function App() {
+  return <div className="a" />
+}
+```
+
+```css
+.a {
+  display: flex;
+}
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
index a93bf9c55..035921d3c 100644
--- a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
@@ -15,19 +15,81 @@ It has a `display: grid` style by default.
 ## How to use
 
 ```tsx
-const before = (
-  <Grid>
-    <Box bg="blue" h={25} w={25} />
-    <Box bg="blue" h={25} w={25} />
-    <Box bg="blue" h={25} w={25} />
-  </Grid>
-)
-
-const after = (
-  <div className="d3">
-    <div className="d0 d1 d2"></div>
-    <div className="d0 d1 d2"></div>
-    <div className="d0 d1 d2"></div>
-  </div>
-)
+import { Box, Grid } from '@devup-ui/react'
+
+function App() {
+  return (
+    <Grid>
+      <Box bg="blue" h={25} w={25} />
+      <Box bg="blue" h={25} w={25} />
+      <Box bg="blue" h={25} w={25} />
+    </Grid>
+  )
+}
+```
+
+The Grid component defined above will render like this:
+
+```tsx
+function App() {
+  return (
+    <div className="d">
+      <div className="a b c"></div>
+      <div className="a b c"></div>
+      <div className="a b c"></div>
+    </div>
+  )
+}
+```
+
+```css
+.a {
+  background: blue;
+}
+.b {
+  height: 100px;
+}
+.c {
+  width: 100px;
+}
+.d {
+  display: grid;
+}
 ```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+<br />
+
+Class names and style properties are resolved in the following order:
+
+1. Generate class names for child components.
+   - Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
+
+2. Remove duplicate component properties.
+   - Deduplicate only when both the `key:value` pair and the `style-order` match.
+
+3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
+   - Example: In other words, the `display: flex` implemented internally by `Center` and the `display: flex` provided directly by the user have different style-orders, so they are not removed, and the final style is applied according to priority.
+
+4. Generate the parent component’s className based on the merged result.
+   - After child classNames are generated and duplicates (per rules above) removed, compute/merge the parent className and final style output.
diff --git a/apps/landing/src/app/(detail)/docs/api/image/page.mdx b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
index 7f1be76bd..7d9cbb02d 100644
--- a/apps/landing/src/app/(detail)/docs/api/image/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
@@ -15,7 +15,17 @@ It is just a `img` with some styles.
 ## How to use
 
 ```tsx
-const before = <Image src="https://via.placeholder.com/150" />
+import { Image } from '@devup-ui/react'
 
-const after = <img src="https://via.placeholder.com/150" />
+function App() {
+  return <Image src="https://via.placeholder.com/150" />
+}
+```
+
+The Image component defined above will render like this:
+
+```tsx
+function App() {
+  return <img src="https://via.placeholder.com/150" />
+}
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/input/page.mdx b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
index 61d252591..0efe0dca9 100644
--- a/apps/landing/src/app/(detail)/docs/api/input/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
@@ -15,7 +15,23 @@ It is just a `input` with some styles.
 ## How to use
 
 ```tsx
-const before = <Input border="3px solid black" />
+import { Input } from '@devup-ui/react'
 
-const after = <input className="d0" />
+function App() {
+  return <Input border="3px solid black" />
+}
+```
+
+The Input component defined above will render like this:
+
+```tsx
+function App() {
+  return <input className="a" />
+}
+```
+
+```css
+.a {
+  border: 3px solid black;
+}
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
index 338a8b7ad..f48115420 100644
--- a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
@@ -8,6 +8,10 @@ export const metadata = {
 
 # Selector
 
+The attributes defined in Pseudo-Class correspond to those defined in Selector, allowing them to be used directly as component props.
+
+<br />
+
 <table>
   <thead>
     <tr>
diff --git a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
index e6b324310..42b613b78 100644
--- a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
@@ -8,6 +8,8 @@ export const metadata = {
 
 # Style Props
 
+The attributes defined in Style Property correspond to those defined in Props, allowing them to be used directly as component props.
+
 ## Animation
 
 <table>
diff --git a/apps/landing/src/app/(detail)/docs/api/text/page.mdx b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
index ec1addf4b..d4ff9e7eb 100644
--- a/apps/landing/src/app/(detail)/docs/api/text/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
@@ -15,7 +15,63 @@ It is just a `span` with some styles.
 ## How to use
 
 ```tsx
-const before = <Text color="red">This is Text component.</Text>
+import { Text } from '@devup-ui/react'
 
-const after = <span className="d0">This is Text component.</span>
+function App() {
+  return (
+    <Text color="red" fontSize="24px">
+      This is Text component.
+    </Text>
+  )
+}
+```
+
+The Text component defined above will render like this:
+
+```tsx
+function App() {
+  return <span className="a b">This is Text component.</span>
+}
+```
+
+```css
+.a {
+  color: red;
+}
+.b {
+  font-size: 24px;
+}
+```
+
+### Rendering as Another Element
+
+You can use the `as` prop to change the element type.
+
+```tsx
+import { Text } from '@devup-ui/react'
+
+function App() {
+  return (
+    <Text as="p" color="red" fontSize="24px">
+      This is Text component.
+    </Text>
+  )
+}
+```
+
+The Text component defined above will render like this:
+
+```tsx
+function App() {
+  return <p className="a b">This is Text component.</p>
+}
+```
+
+```css
+.a {
+  color: red;
+}
+.b {
+  font-size: 24px;
+}
 ```
diff --git a/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx b/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
index 1f0e9cfbd..9133ae7f7 100644
--- a/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
@@ -15,19 +15,87 @@ It has a `display: flex` style with `flex-direction: column`.
 ## How to use
 
 ```tsx
-const before = (
-  <VStack>
-    <Box bg="blue" h={25} w={25} />
-    <Box bg="blue" h={25} w={25} />
-    <Box bg="blue" h={25} w={25} />
-  </VStack>
-)
-
-const after = (
-  <div className="d3 d4">
-    <div className="d0 d1 d2"></div>
-    <div className="d0 d1 d2"></div>
-    <div className="d0 d1 d2"></div>
-  </div>
-)
+import { Box, VStack } from '@devup-ui/react'
+
+function App() {
+  return (
+    <VStack>
+      <Box bg="blue" h={25} w={25} />
+      <Box bg="blue" display="flex" h={25} w={25} />
+      <Box bg="blue" h={25} w={25} />
+    </VStack>
+  )
+}
+```
+
+The VStack component defined above will render like this:
+
+```tsx
+function App() {
+  return (
+    <div className="e f">
+      <div className="a b c"></div>
+      <div className="a b c d"></div>
+      <div className="a b c"></div>
+    </div>
+  )
+}
+```
+
+```css
+.a {
+  background: blue;
+}
+.b {
+  height: 100px;
+}
+.c {
+  width: 100px;
+}
+.d {
+  display: flex;
+}
+.e {
+  display: flex;
+}
+.f {
+  flex-direction: column;
+}
 ```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+<br />
+
+Class names and style properties are resolved in the following order:
+
+1. Generate class names for child components.
+   - Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
+
+2. Remove duplicate component properties.
+   - Deduplicate only when both the `key:value` pair and the `style-order` match.
+
+3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
+   - Example: In other words, the `display: flex` implemented internally by `Center` and the `display: flex` provided directly by the user have different style-orders, so they are not removed, and the final style is applied according to priority.
+
+4. Generate the parent component’s className based on the merged result.
+   - After child classNames are generated and duplicates (per rules above) removed, compute/merge the parent className and final style output.