From 0eca533b161883475025b093f746326ea511f1ad Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Mon, 6 Oct 2025 00:07:02 +0900
Subject: [PATCH 1/5] Rewrite landing docs api

---
 .../src/app/(detail)/docs/api/box/page.mdx    | 54 +++++++++++-
 .../src/app/(detail)/docs/api/button/page.mdx | 37 +++++++-
 .../src/app/(detail)/docs/api/center/page.mdx | 83 ++++++++++++++----
 .../src/app/(detail)/docs/api/css/page.mdx    | 84 +++++++++++++++----
 .../src/app/(detail)/docs/api/flex/page.mdx   | 20 ++++-
 .../src/app/(detail)/docs/api/grid/page.mdx   | 74 ++++++++++++----
 .../src/app/(detail)/docs/api/image/page.mdx  | 14 +++-
 .../src/app/(detail)/docs/api/input/page.mdx  | 20 ++++-
 .../app/(detail)/docs/api/selector/page.mdx   |  4 +
 .../(detail)/docs/api/style-props/page.mdx    |  2 +
 .../src/app/(detail)/docs/api/text/page.mdx   | 60 ++++++++++++-
 .../app/(detail)/docs/api/v-stack/page.mdx    | 80 ++++++++++++++----
 12 files changed, 455 insertions(+), 77 deletions(-)

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 3ace3fba..520bcf5d 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,61 @@ 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="aa ab ac a-d" />
+}
+```
+
+```css
+.aa {
+  background: red;
+}
+.ab {
+  flex: 1;
+}
+.ac {
+  height: 100px;
+}
+.a-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.
+
+### 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:
 
-const after = <span className="d0" />
+```tsx
+function App() {
+  return <span className="aa" />
+}
+```
+
+```css
+.aa {
+  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 5b517db8..0f0259ba 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,40 @@ 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="aa ab ac" onClick="alert('clicked!!')">
+      click me
+    </button>
+  )
+}
 ```
+
+```css
+.aa {
+  background: red;
+}
+.ab {
+  width: 100px;
+}
+.ac {
+  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.
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 fa095096..4f67348a 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,72 @@ 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="ae af ag">
+      <div className="aa ab ac"></div>
+      <div className="aa ab ac a-d"></div>
+      <div className="aa ab ac"></div>
+    </div>
+  )
+}
 ```
+
+```css
+.aa {
+  background: blue;
+}
+.ab {
+  height: 100px;
+}
+.ac {
+  width: 100px;
+}
+.a-d {
+  display: flex;
+}
+.ae {
+  display: flex;
+}
+.af {
+  justify-content: center;
+}
+.ag {
+  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.
+
+<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 045b5110..56e2a3e0 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="aa ab ac" />
+}
+```
+
+```css
+.aa {
+  background: red;
+}
+.ab {
+  width: 100px;
+}
+.ac {
+  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="aa ab ac" />
+}
+```
+
+```css
+.aa {
+  background: red;
+}
+.ab {
+  width: 100px;
+}
+.ac {
+  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 1ea9852c..ace68f7b 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="aa" />
+}
+```
+
+```css
+.aa {
+  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 a93bf9c5..e0dfca27 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,63 @@ 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="a-d">
+      <div className="aa ab ac"></div>
+      <div className="aa ab ac"></div>
+      <div className="aa ab ac"></div>
+    </div>
+  )
+}
+```
+
+```css
+.aa {
+  background: blue;
+}
+.ab {
+  height: 100px;
+}
+.ac {
+  width: 100px;
+}
+.a-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.
+
+<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 7f1be76b..7d9cbb02 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 61d25259..15c4d79a 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="aa" />
+}
+```
+
+```css
+.aa {
+  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 338a8b7a..10bfade0 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 items defined in Props can be used in the same way as those defined in Style Property.
+
+<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 e6b32431..8c03e4db 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 items defined in Props can be used in the same way as those defined in Style Property.
+
 ## 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 ec1addf4..16a398dd 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="aa ab">This is Text component.</span>
+}
+```
+
+```css
+.aa {
+  color: red;
+}
+.ab {
+  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="aa ab">This is Text component.</p>
+}
+```
+
+```css
+.aa {
+  color: red;
+}
+.ab {
+  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 1f0e9cfb..78ec3f8d 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,69 @@ 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="ae af">
+      <div className="aa ab ac"></div>
+      <div className="aa ab ac a-d"></div>
+      <div className="aa ab ac"></div>
+    </div>
+  )
+}
+```
+
+```css
+.aa {
+  background: blue;
+}
+.ab {
+  height: 100px;
+}
+.ac {
+  width: 100px;
+}
+.a-d {
+  display: flex;
+}
+.ae {
+  display: flex;
+}
+af {
+  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.
+
+<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.

From 856d688d42b3c100700458a4ec2b68d1342dd876 Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Mon, 6 Oct 2025 00:47:58 +0900
Subject: [PATCH 2/5] Fix landing docs api

---
 apps/landing/src/app/(detail)/docs/api/selector/page.mdx    | 2 +-
 apps/landing/src/app/(detail)/docs/api/style-props/page.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

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 10bfade0..f4811542 100644
--- a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
@@ -8,7 +8,7 @@ export const metadata = {
 
 # Selector
 
-The items defined in Props can be used in the same way as those defined in Style Property.
+The attributes defined in Pseudo-Class correspond to those defined in Selector, allowing them to be used directly as component props.
 
 <br />
 
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 8c03e4db..42b613b7 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,7 +8,7 @@ export const metadata = {
 
 # Style Props
 
-The items defined in Props can be used in the same way as those defined in Style Property.
+The attributes defined in Style Property correspond to those defined in Props, allowing them to be used directly as component props.
 
 ## Animation
 

From 9701ba5c362b84069797ea0d68615d248e2d386b Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Tue, 7 Oct 2025 19:37:57 +0900
Subject: [PATCH 3/5] Fix landing docs api

---
 .../src/app/(detail)/docs/api/box/page.mdx    |  4 ++--
 .../src/app/(detail)/docs/api/button/page.mdx |  8 +++----
 .../src/app/(detail)/docs/api/center/page.mdx | 22 +++++++++----------
 .../src/app/(detail)/docs/api/css/page.mdx    | 16 +++++++-------
 .../src/app/(detail)/docs/api/flex/page.mdx   |  4 ++--
 .../src/app/(detail)/docs/api/grid/page.mdx   | 16 +++++++-------
 .../src/app/(detail)/docs/api/input/page.mdx  |  4 ++--
 .../src/app/(detail)/docs/api/text/page.mdx   | 12 +++++-----
 .../app/(detail)/docs/api/v-stack/page.mdx    | 20 ++++++++---------
 9 files changed, 53 insertions(+), 53 deletions(-)

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 520bcf5d..8ddc232d 100644
--- a/apps/landing/src/app/(detail)/docs/api/box/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
@@ -64,12 +64,12 @@ By using the as prop, you can render it as another element as shown below:
 
 ```tsx
 function App() {
-  return <span className="aa" />
+  return <span className="a" />
 }
 ```
 
 ```css
-.aa {
+.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 0f0259ba..c4ecbb75 100644
--- a/apps/landing/src/app/(detail)/docs/api/button/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
@@ -29,7 +29,7 @@ The Button component defined above will render like this:
 ```tsx
 function App() {
   return (
-    <button className="aa ab ac" onClick="alert('clicked!!')">
+    <button className="a b c" onClick="alert('clicked!!')">
       click me
     </button>
   )
@@ -37,13 +37,13 @@ function App() {
 ```
 
 ```css
-.aa {
+.a {
   background: red;
 }
-.ab {
+.b {
   width: 100px;
 }
-.ac {
+.c {
   height: 100px;
 }
 ```
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 4f67348a..2ffa982b 100644
--- a/apps/landing/src/app/(detail)/docs/api/center/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
@@ -32,35 +32,35 @@ The Center component defined above will render like this:
 ```tsx
 function App() {
   return (
-    <div className="ae af ag">
-      <div className="aa ab ac"></div>
-      <div className="aa ab ac a-d"></div>
-      <div className="aa ab ac"></div>
+    <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
-.aa {
+.a {
   background: blue;
 }
-.ab {
+.b {
   height: 100px;
 }
-.ac {
+.c {
   width: 100px;
 }
-.a-d {
+.d {
   display: flex;
 }
-.ae {
+.e {
   display: flex;
 }
-.af {
+.f {
   justify-content: center;
 }
-.ag {
+.g {
   align-items: center;
 }
 ```
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 56e2a3e0..ecf1836b 100644
--- a/apps/landing/src/app/(detail)/docs/api/css/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
@@ -37,18 +37,18 @@ The content above is rendered/transformed as shown below:
 
 ```tsx
 function App() {
-  return <div className="aa ab ac" />
+  return <div className="a b c" />
 }
 ```
 
 ```css
-.aa {
+.a {
   background: red;
 }
-.ab {
+.b {
   width: 100px;
 }
-.ac {
+.c {
   height: 100px;
 }
 ```
@@ -77,18 +77,18 @@ The content above is rendered/transformed as shown below:
 
 ```tsx
 function App() {
-  return <div className="aa ab ac" />
+  return <div className="a b c" />
 }
 ```
 
 ```css
-.aa {
+.a {
   background: red;
 }
-.ab {
+.b {
   width: 100px;
 }
-.ac {
+.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 ace68f7b..710363a4 100644
--- a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
@@ -26,12 +26,12 @@ The Flex component defined above will render like this:
 
 ```tsx
 function App() {
-  return <div className="aa" />
+  return <div className="a" />
 }
 ```
 
 ```css
-.aa {
+.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 e0dfca27..2da3af34 100644
--- a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
@@ -33,26 +33,26 @@ The Grid component defined above will render like this:
 ```tsx
 function App() {
   return (
-    <div className="a-d">
-      <div className="aa ab ac"></div>
-      <div className="aa ab ac"></div>
-      <div className="aa ab ac"></div>
+    <div className="d">
+      <div className="a b c"></div>
+      <div className="a b c"></div>
+      <div className="a b c"></div>
     </div>
   )
 }
 ```
 
 ```css
-.aa {
+.a {
   background: blue;
 }
-.ab {
+.b {
   height: 100px;
 }
-.ac {
+.c {
   width: 100px;
 }
-.a-d {
+.d {
   display: grid;
 }
 ```
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 15c4d79a..0efe0dca 100644
--- a/apps/landing/src/app/(detail)/docs/api/input/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
@@ -26,12 +26,12 @@ The Input component defined above will render like this:
 
 ```tsx
 function App() {
-  return <input className="aa" />
+  return <input className="a" />
 }
 ```
 
 ```css
-.aa {
+.a {
   border: 3px solid black;
 }
 ```
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 16a398dd..d4ff9e7e 100644
--- a/apps/landing/src/app/(detail)/docs/api/text/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
@@ -30,15 +30,15 @@ The Text component defined above will render like this:
 
 ```tsx
 function App() {
-  return <span className="aa ab">This is Text component.</span>
+  return <span className="a b">This is Text component.</span>
 }
 ```
 
 ```css
-.aa {
+.a {
   color: red;
 }
-.ab {
+.b {
   font-size: 24px;
 }
 ```
@@ -63,15 +63,15 @@ The Text component defined above will render like this:
 
 ```tsx
 function App() {
-  return <p className="aa ab">This is Text component.</p>
+  return <p className="a b">This is Text component.</p>
 }
 ```
 
 ```css
-.aa {
+.a {
   color: red;
 }
-.ab {
+.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 78ec3f8d..c42f10cc 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
@@ -33,32 +33,32 @@ The VStack component defined above will render like this:
 ```tsx
 function App() {
   return (
-    <div className="ae af">
-      <div className="aa ab ac"></div>
-      <div className="aa ab ac a-d"></div>
-      <div className="aa ab ac"></div>
+    <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
-.aa {
+.a {
   background: blue;
 }
-.ab {
+.b {
   height: 100px;
 }
-.ac {
+.c {
   width: 100px;
 }
-.a-d {
+.d {
   display: flex;
 }
-.ae {
+.e {
   display: flex;
 }
-af {
+.f {
   flex-direction: column;
 }
 ```

From d918ea5dede09698a7e066cfe49b66b73e9534e8 Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Wed, 8 Oct 2025 00:13:33 +0900
Subject: [PATCH 4/5] Add exception content to landing docs api

---
 .../src/app/(detail)/docs/api/box/page.mdx     | 18 ++++++++++++++++++
 .../src/app/(detail)/docs/api/button/page.mdx  | 18 ++++++++++++++++++
 .../src/app/(detail)/docs/api/center/page.mdx  | 18 ++++++++++++++++++
 .../src/app/(detail)/docs/api/grid/page.mdx    | 18 ++++++++++++++++++
 .../src/app/(detail)/docs/api/v-stack/page.mdx | 18 ++++++++++++++++++
 5 files changed, 90 insertions(+)

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 8ddc232d..5b685749 100644
--- a/apps/landing/src/app/(detail)/docs/api/box/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
@@ -48,6 +48,24 @@ function App() {
 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.
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 c4ecbb75..0cbc85da 100644
--- a/apps/landing/src/app/(detail)/docs/api/button/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
@@ -50,3 +50,21 @@ function App() {
 
 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 2ffa982b..63783ba4 100644
--- a/apps/landing/src/app/(detail)/docs/api/center/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
@@ -68,6 +68,24 @@ function App() {
 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:
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 2da3af34..035921d3 100644
--- a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
@@ -60,6 +60,24 @@ function App() {
 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:
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 c42f10cc..9133ae7f 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
@@ -66,6 +66,24 @@ function App() {
 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:

From 37c4dc48e86a27880e183044f9dcb17367c324d4 Mon Sep 17 00:00:00 2001
From: hyu-dev <hyu630115@gmail.com>
Date: Wed, 8 Oct 2025 19:53:36 +0900
Subject: [PATCH 5/5] Fix landing docs api

---
 apps/landing/src/app/(detail)/docs/api/box/page.mdx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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 5b685749..748acafb 100644
--- a/apps/landing/src/app/(detail)/docs/api/box/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
@@ -26,21 +26,21 @@ The Box component defined above will render like this:
 
 ```tsx
 function App() {
-  return <div className="aa ab ac a-d" />
+  return <div className="a b c d" />
 }
 ```
 
 ```css
-.aa {
+.a {
   background: red;
 }
-.ab {
+.b {
   flex: 1;
 }
-.ac {
+.c {
   height: 100px;
 }
-.a-d {
+.d {
   width: 400px;
 }
 ```