From e68f6157876753192395e048df4ef3ad2f5eb0a4 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Mon, 27 Jan 2025 21:55:35 +0900
Subject: [PATCH] Update landing

---
 apps/landing/package.json                     |    2 +
 .../src/app/(detail)/docs/LeftMenu.tsx        |    2 +-
 .../src/app/(detail)/docs/MenuItem.tsx        |    7 +
 .../src/app/(detail)/docs/OpenMenuItem.tsx    |    6 +
 .../src/app/(detail)/docs/api/box/page.mdx    |   25 +
 .../src/app/(detail)/docs/api/button/page.mdx |   11 +
 .../src/app/(detail)/docs/api/center/page.mdx |   14 +
 .../src/app/(detail)/docs/api/css/page.mdx    |   35 +
 .../src/app/(detail)/docs/api/flex/page.mdx   |   15 +
 .../src/app/(detail)/docs/api/grid/page.mdx   |   14 +
 .../(detail)/docs/api/group-selector/page.mdx |   10 +
 .../src/app/(detail)/docs/api/image/page.mdx  |   15 +
 .../src/app/(detail)/docs/api/input/page.mdx  |   15 +
 .../app/(detail)/docs/api/selector/page.mdx   |   70 +
 .../(detail)/docs/api/style-props/page.mdx    | 1626 +++++++++++++++++
 .../src/app/(detail)/docs/features/page.mdx   |   83 +
 .../app/(detail)/docs/installation/page.mdx   |   63 +
 apps/landing/src/app/(detail)/docs/layout.tsx |    4 +-
 .../src/app/(detail)/docs/overview/page.mdx   |   20 +-
 apps/landing/src/app/layout.tsx               |    2 +
 apps/landing/src/app/markdown.css             |   13 +
 apps/landing/src/components/Code.tsx          |   16 +
 apps/landing/src/components/CodeBoard.tsx     |    4 +-
 .../landing/src/components/Header/Discord.tsx |   30 +
 apps/landing/src/components/Header/Github.tsx |   30 +
 .../src/components/Header/HeaderInput.tsx     |    2 +-
 .../src/components/Header/HeaderWrap.tsx      |    5 +-
 .../landing/src/components/Header/MobMenu.tsx |   44 +
 .../src/components/Header/MobMenuButton.tsx   |   38 +
 .../src/components/Header/MobMenuWrap.tsx     |   32 +
 .../src/components/Header/MobMenuWrapper.tsx  |   15 +
 apps/landing/src/components/Header/index.tsx  |  109 +-
 apps/landing/src/mdx-components.tsx           |   20 +
 pnpm-lock.yaml                                |   35 +-
 34 files changed, 2316 insertions(+), 116 deletions(-)
 create mode 100644 apps/landing/src/app/markdown.css
 create mode 100644 apps/landing/src/components/Code.tsx
 create mode 100644 apps/landing/src/components/Header/Discord.tsx
 create mode 100644 apps/landing/src/components/Header/Github.tsx
 create mode 100644 apps/landing/src/components/Header/MobMenu.tsx
 create mode 100644 apps/landing/src/components/Header/MobMenuButton.tsx
 create mode 100644 apps/landing/src/components/Header/MobMenuWrap.tsx
 create mode 100644 apps/landing/src/components/Header/MobMenuWrapper.tsx

diff --git a/apps/landing/package.json b/apps/landing/package.json
index e5c7dd55..c721048b 100644
--- a/apps/landing/package.json
+++ b/apps/landing/package.json
@@ -10,6 +10,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "body-scroll-lock": "3.1.5",
     "@devup-ui/react": "workspace:*",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
@@ -22,6 +23,7 @@
     "sanitize.css": "^13.0.0"
   },
   "devDependencies": {
+    "@types/body-scroll-lock": "^3.1.2",
     "@devup-ui/next-plugin": "workspace:*",
     "@types/node": "^22",
     "@types/react": "^19",
diff --git a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
index ed3d0e66..fd173747 100644
--- a/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
+++ b/apps/landing/src/app/(detail)/docs/LeftMenu.tsx
@@ -5,7 +5,7 @@ import { MenuItem } from './MenuItem'
 
 export function LeftMenu() {
   return (
-    <VStack gap="6px" h="1008px" p="20px 16px" w="220px">
+    <VStack gap="6px">
       <MenuItem to={URL_PREFIX + '/docs/overview'}>Overview</MenuItem>
       <MenuItem to={URL_PREFIX + '/docs/installation'}>Installation</MenuItem>
       <MenuItem to={URL_PREFIX + '/docs/features'}>Features</MenuItem>
diff --git a/apps/landing/src/app/(detail)/docs/MenuItem.tsx b/apps/landing/src/app/(detail)/docs/MenuItem.tsx
index 9f042ca2..a4692dc2 100644
--- a/apps/landing/src/app/(detail)/docs/MenuItem.tsx
+++ b/apps/landing/src/app/(detail)/docs/MenuItem.tsx
@@ -24,6 +24,13 @@ export function MenuItem(props: MenuItemProps) {
   if (subMenu) return <OpenMenuItem {...props} subMenu={subMenu} />
   const inner = (
     <Flex
+      _hover={
+        selected
+          ? undefined
+          : {
+              bg: '$menuHover',
+            }
+      }
       alignItems="center"
       bg={selected ? '$menuActive' : undefined}
       borderRadius="6px"
diff --git a/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx b/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx
index 02fe528b..6b3ba4ce 100644
--- a/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx
+++ b/apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx
@@ -20,6 +20,9 @@ export function OpenMenuItem({
   return (
     <>
       <Flex
+        _hover={{
+          bg: '$menuHover',
+        }}
         alignItems="center"
         bg={selected ? '$menuActive' : undefined}
         borderRadius="6px"
@@ -54,6 +57,9 @@ export function OpenMenuItem({
               const selected = to ? path.startsWith(to) : false
               const inner = (
                 <Flex
+                  _hover={{
+                    bg: '$menuHover',
+                  }}
                   alignItems="center"
                   bg={selected ? '$menuActive' : undefined}
                   borderRadius="6px"
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 2436f01e..345fd78d 100644
--- a/apps/landing/src/app/(detail)/docs/api/box/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
@@ -1 +1,26 @@
 # Box
+
+The `Box` component is a layout primitive that can be used to create any kind of layout.
+
+It is just a `div` with some styles.
+
+
+## How to use
+
+```jsx
+// Before
+<Box bg={"red"}/>
+
+// After
+<div className="d0"/>
+```
+
+You can use the as prop to change the element type.
+
+```jsx
+// Before
+<Box as="span"/>
+
+// After
+<span class="d0"/>
+```
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 88423dcb..7a1b6960 100644
--- a/apps/landing/src/app/(detail)/docs/api/button/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
@@ -1 +1,12 @@
 # Button
+
+The Button component is a simple button component that can be used to trigger actions.
+
+
+```jsx
+// Before
+<Button bg={"red"}/>
+
+// After
+<button className="d0"/>
+```
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 160a1609..83decd62 100644
--- a/apps/landing/src/app/(detail)/docs/api/center/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
@@ -1 +1,15 @@
 # Center
+
+The `Center` component is a layout component that centers its children both vertically and horizontally.
+
+It has a `display: flex` style with `justify-content: center` and `align-items: center`.
+
+## How to use
+
+```jsx
+// Before
+<Center/>
+
+// After, It has 3 classes on default
+<div className="d0 d1 d2"/>
+```
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 4988447f..261b4456 100644
--- a/apps/landing/src/app/(detail)/docs/api/css/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
@@ -1 +1,36 @@
 # css
+
+css function is a function that returns a string.
+
+## Usage
+
+### CSS Literal
+You can use the css function to create a css string.
+```jsx
+<any css={css`
+    color: red;
+`}/>
+
+<any className={"d0"}/>
+```
+
+### CSS Object
+You can use the css function to create a css object.
+```jsx
+<any className={css({
+    color: "red"
+})}/>
+
+<any className={"d0"}/>
+```
+
+Also, css function can be used in the style prop. (responsive, pseudo-class, etc.)
+```jsx
+// It works like this
+<any style={css({
+    color: ["red", "blue"],
+    _hover: {
+        color: "green"
+    }
+})}/>
+```
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 61104142..159196d8 100644
--- a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
@@ -1 +1,16 @@
 # Flex
+
+The `Flex` component is a layout component that uses flexbox to layout its children.
+
+It has a `display: flex` style by default.
+
+## How to use
+
+```jsx
+// Before
+<Flex/>
+
+// After, It has a class on default
+<div className="d0"/>
+```
+
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 ee8abf42..0f26a61d 100644
--- a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
@@ -1 +1,15 @@
 # Grid
+
+The grid component is a layout component that arranges its children in a grid layout. It supports both fixed and fluid layouts.
+
+It has a `display: grid` style by default.
+
+## How to use
+
+```jsx
+// Before
+<Grid/>
+
+// After, It has a class on default
+<div className="d0"/>
+```
diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
index 3fcbaa3b..32f01a5f 100644
--- a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
@@ -1 +1,11 @@
 # Group Selector
+
+AThe `group` selector is used to apply styles to a group of elements. It is used to apply styles to a group of elements that are siblings of each other.
+
+## Usage
+
+```jsx
+<div role="group">
+    <Box _groupHover={{bg: "red"}}/>
+</div>
+```
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 77cfc546..bd8a7142 100644
--- a/apps/landing/src/app/(detail)/docs/api/image/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
@@ -1 +1,16 @@
 # Image
+
+The `Image` component is a layout primitive that can be used to create any kind of layout.
+
+It is just a `img` with some styles.
+
+## How to use
+
+```jsx
+// Before
+<Image src={"https://via.placeholder.com/150"}/>
+
+// After
+<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 135b6af3..beea2417 100644
--- a/apps/landing/src/app/(detail)/docs/api/input/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
@@ -1 +1,16 @@
 # Input
+
+The input component is a layout primitive that can be used to create any kind of layout.
+
+It is just a `input` with some styles.
+
+## How to use
+
+```jsx
+// Before
+<Input/>
+
+// After
+<input/>
+```
+
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 45ceab8f..6d200c71 100644
--- a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
@@ -1 +1,71 @@
 # Selector
+
+<table>
+    <thead>
+    <tr>
+        <th>Selector</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>_active?</code></td>
+    </tr>
+    <tr>
+        <td><code>_checked?</code></td>
+    </tr>
+    <tr>
+        <td><code>_default?</code></td>
+    </tr>
+    <tr>
+        <td><code>_disabled?</code></td>
+    </tr>
+    <tr>
+        <td><code>_empty?</code></td>
+    </tr>
+    <tr>
+        <td><code>_enabled?</code></td>
+    </tr>
+    <tr>
+        <td><code>_first?</code></td>
+    </tr>
+    <tr>
+        <td><code>_firstChild?</code></td>
+    </tr>
+    <tr>
+        <td><code>_firstOfType?</code></td>
+    </tr>
+    <tr>
+        <td><code>_focus?</code></td>
+    </tr>
+    <tr>
+        <td><code>_focusVisible?</code></td>
+    </tr>
+    <tr>
+        <td><code>_focusWithin?</code></td>
+    </tr>
+    <tr>
+        <td><code>_hover?</code></td>
+    </tr>
+    <tr>
+        <td><code>_invalid?</code></td>
+    </tr>
+    <tr>
+        <td><code>_lastChild?</code></td>
+    </tr>
+    <tr>
+        <td><code>_lastOfType?</code></td>
+    </tr>
+    <tr>
+        <td><code>_link?</code></td>
+    </tr>
+    <tr>
+        <td><code>_onlyChild?</code></td>
+    </tr>
+    <tr>
+        <td><code>_optional?</code></td>
+    </tr>
+    <tr>
+        <td><code>_readOnly?</code></td>
+    </tr>
+    </tbody>
+</table>
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 30dcd82e..59fce747 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
@@ -1 +1,1627 @@
 # Style Props
+
+
+
+## Animation
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>animation</code></td>
+        <td><code>animation</code></td>
+    </tr>
+    <tr>
+        <td><code>animationComposition</code></td>
+        <td><code>animation-composition</code></td>
+    </tr>
+    <tr>
+        <td><code>animationDelay</code></td>
+        <td><code>animation-delay</code></td>
+    </tr>
+    <tr>
+        <td><code>animationDirection</code></td>
+        <td><code>animation-direction</code></td>
+    </tr>
+    <tr>
+        <td><code>animationDir</code></td>
+        <td><code>animation-direction</code></td>
+    </tr>
+    <tr>
+        <td><code>animationDuration</code></td>
+        <td><code>animation-duration</code></td>
+    </tr>
+    <tr>
+        <td><code>animationFillMode</code></td>
+        <td><code>animation-fill-mode</code></td>
+    </tr>
+    <tr>
+        <td><code>animationIterationCount</code></td>
+        <td><code>animation-iteration-count</code></td>
+    </tr>
+    <tr>
+        <td><code>animationName</code></td>
+        <td><code>animation-name</code></td>
+    </tr>
+    <tr>
+        <td><code>animationPlayState</code></td>
+        <td><code>animation-play-state</code></td>
+    </tr>
+    <tr>
+        <td><code>animationTimingFunction</code></td>
+        <td><code>animation-timing-function</code></td>
+    </tr>
+    <tr>
+        <td><code>animationTimeline</code></td>
+        <td><code>animation-timeline</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Background
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>background, bg</code></td>
+        <td><code>background</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundAttachment, bgAttachment</code></td>
+        <td><code>background-attachment</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundBlendMode</code></td>
+        <td><code>background-blend-mode</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundClip, bgClip</code></td>
+        <td><code>background-clip</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundColor, bgColor</code></td>
+        <td><code>background-color</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundImage, bgImage</code></td>
+        <td><code>background-image</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundOrigin, bgOrigin</code></td>
+        <td><code>background-origin</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundPosition, bgPosition</code></td>
+        <td><code>background-position</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundPositionX, bgPositionX</code></td>
+        <td><code>background-position-x</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundPositionY, bgPositionY</code></td>
+        <td><code>background-position-y</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundRepeat, bgRepeat</code></td>
+        <td><code>background-repeat</code></td>
+    </tr>
+    <tr>
+        <td><code>backgroundSize, bgSize</code></td>
+        <td><code>background-size</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Blending
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>backgroundBlendMode</code></td>
+        <td><code>background-blend-mode</code></td>
+    </tr>
+    <tr>
+        <td><code>isolation</code></td>
+        <td><code>isolation</code></td>
+    </tr>
+    <tr>
+        <td><code>mixBlendMode</code></td>
+        <td><code>mix-blend-mode</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Border
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>border</code></td>
+        <td><code>border</code></td>
+    </tr>
+    <tr>
+        <td><code>borderBottom</code></td>
+        <td><code>border-bottom</code></td>
+    </tr>
+    <tr>
+        <td><code>borderBottomColor</code></td>
+        <td><code>border-bottom-color</code></td>
+    </tr>
+    <tr>
+        <td><code>borderBottomLeftRadius</code></td>
+        <td><code>border-bottom-left-radius</code></td>
+    </tr>
+    <tr>
+        <td><code>borderBottomRightRadius</code></td>
+        <td><code>border-bottom-right-radius</code></td>
+    </tr>
+    <tr>
+        <td><code>borderBottomStyle</code></td>
+        <td><code>border-bottom-style</code></td>
+    </tr>
+    <tr>
+        <td><code>borderBottomWidth</code></td>
+        <td><code>border-bottom-width</code></td>
+    </tr>
+    <tr>
+        <td><code>borderCollapse</code></td>
+        <td><code>border-collapse</code></td>
+    </tr>
+    <tr>
+        <td><code>borderColor</code></td>
+        <td><code>border-color</code></td>
+    </tr>
+    <tr>
+        <td><code>borderImage</code></td>
+        <td><code>border-image</code></td>
+    </tr>
+    <tr>
+        <td><code>borderImageOutset</code></td>
+        <td><code>border-image-outset</code></td>
+    </tr>
+    <tr>
+        <td><code>borderImageRepeat</code></td>
+        <td><code>border-image-repeat</code></td>
+    </tr>
+    <tr>
+        <td><code>borderImageSlice</code></td>
+        <td><code>border-image-slice</code></td>
+    </tr>
+    <tr>
+        <td><code>borderImageSource</code></td>
+        <td><code>border-image-source</code></td>
+    </tr>
+    <tr>
+        <td><code>borderImageWidth</code></td>
+        <td><code>border-image-width</code></td>
+    </tr>
+    <tr>
+        <td><code>borderLeft</code></td>
+        <td><code>border-left</code></td>
+    </tr>
+    <tr>
+        <td><code>borderLeftColor</code></td>
+        <td><code>border-left-color</code></td>
+    </tr>
+    <tr>
+        <td><code>borderLeftStyle</code></td>
+        <td><code>border-left-style</code></td>
+    </tr>
+    <tr>
+        <td><code>borderLeftWidth</code></td>
+        <td><code>border-left-width</code></td>
+    </tr>
+    <tr>
+        <td><code>borderRadius</code></td>
+        <td><code>border-radius</code></td>
+    </tr>
+    <tr>
+        <td><code>borderRight</code></td>
+        <td><code>border-right</code></td>
+    </tr>
+    <tr>
+        <td><code>borderRightColor</code></td>
+        <td><code>border-right-color</code></td>
+    </tr>
+    <tr>
+        <td><code>borderRightStyle</code></td>
+        <td><code>border-right-style</code></td>
+    </tr>
+    <tr>
+        <td><code>borderRightWidth</code></td>
+        <td><code>border-right-width</code></td>
+    </tr>
+    <tr>
+        <td><code>borderStyle</code></td>
+        <td><code>border-style</code></td>
+    </tr>
+    <tr>
+        <td><code>borderTop</code></td>
+        <td><code>border-top</code></td>
+    </tr>
+    <tr>
+        <td><code>borderTopColor</code></td>
+        <td><code>border-top-color</code></td>
+    </tr>
+    <tr>
+        <td><code>borderTopLeftRadius</code></td>
+        <td><code>border-top-left-radius</code></td>
+    </tr>
+    <tr>
+        <td><code>borderTopRightRadius</code></td>
+        <td><code>border-top-right-radius</code></td>
+    </tr>
+    <tr>
+        <td><code>borderTopStyle</code></td>
+        <td><code>border-top-style</code></td>
+    </tr>
+    <tr>
+        <td><code>borderTopWidth</code></td>
+        <td><code>border-top-width</code></td>
+    </tr>
+    <tr>
+        <td><code>borderWidth</code></td>
+        <td><code>border-width</code></td>
+    </tr>
+    <tr>
+        <td><code>boxShadow</code></td>
+        <td><code>box-shadow</code></td>
+    </tr>
+    </tbody>
+</table>
+
+
+## Box Align
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>justifyContent</code></td>
+        <td><code>justify-content</code></td>
+    </tr>
+    <tr>
+        <td><code>alignContent</code></td>
+        <td><code>align-content</code></td>
+    </tr>
+    <tr>
+        <td><code>placeContent</code></td>
+        <td><code>place-content</code></td>
+    </tr>
+    <tr>
+        <td><code>justifyItems</code></td>
+        <td><code>justify-items</code></td>
+    </tr>
+    <tr>
+        <td><code>alignItems</code></td>
+        <td><code>align-items</code></td>
+    </tr>
+    <tr>
+        <td><code>placeItems</code></td>
+        <td><code>place-items</code></td>
+    </tr>
+    <tr>
+        <td><code>justifySelf</code></td>
+        <td><code>justify-self</code></td>
+    </tr>
+    <tr>
+        <td><code>alignSelf</code></td>
+        <td><code>align-self</code></td>
+    </tr>
+    <tr>
+        <td><code>placeSelf</code></td>
+        <td><code>place-self</code></td>
+    </tr>
+    <tr>
+        <td><code>rowGap</code></td>
+        <td><code>row-gap</code></td>
+    </tr>
+    <tr>
+        <td><code>columnGap</code></td>
+        <td><code>column-gap</code></td>
+    </tr>
+    <tr>
+        <td><code>gap</code></td>
+        <td><code>gap</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Box Model
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>margin</code></td>
+        <td><code>margin</code></td>
+    </tr>
+    <tr>
+        <td><code>marginBottom</code></td>
+        <td><code>margin-bottom</code></td>
+    </tr>
+    <tr>
+        <td><code>marginLeft</code></td>
+        <td><code>margin-left</code></td>
+    </tr>
+    <tr>
+        <td><code>marginRight</code></td>
+        <td><code>margin-right</code></td>
+    </tr>
+    <tr>
+        <td><code>marginTop</code></td>
+        <td><code>margin-top</code></td>
+    </tr>
+    <tr>
+        <td><code>m</code></td>
+        <td><code>margin</code></td>
+    </tr>
+    <tr>
+        <td><code>mx</code></td>
+        <td><code>margin-left</code>, <code>margin-right</code></td>
+    </tr>
+    <tr>
+        <td><code>my</code></td>
+        <td><code>margin-top</code>, <code>margin-bottom</code></td>
+    </tr>
+    <tr>
+        <td><code>mb</code></td>
+        <td><code>margin-bottom</code></td>
+    </tr>
+    <tr>
+        <td><code>ml</code></td>
+        <td><code>margin-left</code></td>
+    </tr>
+    <tr>
+        <td><code>mr</code></td>
+        <td><code>margin-right</code></td>
+    </tr>
+    <tr>
+        <td><code>mt</code></td>
+        <td><code>margin-top</code></td>
+    </tr>
+    <tr>
+        <td><code>padding</code></td>
+        <td><code>padding</code></td>
+    </tr>
+    <tr>
+        <td><code>paddingBottom</code></td>
+        <td><code>padding-bottom</code></td>
+    </tr>
+    <tr>
+        <td><code>paddingLeft</code></td>
+        <td><code>padding-left</code></td>
+    </tr>
+    <tr>
+        <td><code>paddingRight</code></td>
+        <td><code>padding-right</code></td>
+    </tr>
+    <tr>
+        <td><code>paddingTop</code></td>
+        <td><code>padding-top</code></td>
+    </tr>
+    <tr>
+        <td><code>p</code></td>
+        <td><code>padding</code></td>
+    </tr>
+    <tr>
+        <td><code>px</code></td>
+        <td><code>padding-left</code>, <code>padding-right</code></td>
+    </tr>
+    <tr>
+        <td><code>py</code></td>
+        <td><code>padding-top</code>, <code>padding-bottom</code></td>
+    </tr>
+    <tr>
+        <td><code>pb</code></td>
+        <td><code>padding-bottom</code></td>
+    </tr>
+    <tr>
+        <td><code>pl</code></td>
+        <td><code>padding-left</code></td>
+    </tr>
+    <tr>
+        <td><code>pr</code></td>
+        <td><code>padding-right</code></td>
+    </tr>
+    <tr>
+        <td><code>pt</code></td>
+        <td><code>padding-top</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## BoxSizing
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>aspectRatio</code></td>
+        <td><code>aspect-ratio</code></td>
+    </tr>
+    <tr>
+        <td><code>boxSizing</code></td>
+        <td><code>box-sizing</code></td>
+    </tr>
+    <tr>
+        <td><code>containIntrinsicBlockSize</code></td>
+        <td><code>contain-intrinsic-block-size</code></td>
+    </tr>
+    <tr>
+        <td><code>containIntrinsicHeight</code></td>
+        <td><code>contain-intrinsic-height</code></td>
+    </tr>
+    <tr>
+        <td><code>containIntrinsicInlineSize</code></td>
+        <td><code>contain-intrinsic-inline-size</code></td>
+    </tr>
+    <tr>
+        <td><code>containIntrinsicSize</code></td>
+        <td><code>contain-intrinsic-size</code></td>
+    </tr>
+    <tr>
+        <td><code>containIntrinsicWidth</code></td>
+        <td><code>contain-intrinsic-width</code></td>
+    </tr>
+    <tr>
+        <td><code>height</code></td>
+        <td><code>height</code></td>
+    </tr>
+    <tr>
+        <td><code>maxHeight</code></td>
+        <td><code>max-height</code></td>
+    </tr>
+    <tr>
+        <td><code>maxWidth</code></td>
+        <td><code>max-width</code></td>
+    </tr>
+    <tr>
+        <td><code>minHeight</code></td>
+        <td><code>min-height</code></td>
+    </tr>
+    <tr>
+        <td><code>minWidth</code></td>
+        <td><code>min-width</code></td>
+    </tr>
+    <tr>
+        <td><code>width</code></td>
+        <td><code>width</code></td>
+    </tr>
+    <tr>
+        <td><code>h</code></td>
+        <td><code>height</code></td>
+    </tr>
+    <tr>
+        <td><code>maxH</code></td>
+        <td><code>max-height</code></td>
+    </tr>
+    <tr>
+        <td><code>maxW</code></td>
+        <td><code>max-width</code></td>
+    </tr>
+    <tr>
+        <td><code>minH</code></td>
+        <td><code>min-height</code></td>
+    </tr>
+    <tr>
+        <td><code>minW</code></td>
+        <td><code>min-width</code></td>
+    </tr>
+    <tr>
+        <td><code>w</code></td>
+        <td><code>width</code></td>
+    </tr>
+    <tr>
+        <td><code>boxSize</code></td>
+        <td><code>width</code>, <code>height</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Color
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>colorScheme</code></td>
+        <td><code>color-scheme</code></td>
+    </tr>
+    <tr>
+        <td><code>forcedColorAdjust</code></td>
+        <td><code>forced-color-adjust</code></td>
+    </tr>
+    <tr>
+        <td><code>printColorAdjust</code></td>
+        <td><code>print-color-adjust</code></td>
+    </tr>
+    <tr>
+        <td><code>color</code></td>
+        <td><code>color</code></td>
+    </tr>
+    <tr>
+        <td><code>opacity</code></td>
+        <td><code>opacity</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Display
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>display</code></td>
+        <td><code>display</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## FilterEffect
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>backdropFilter</code></td>
+        <td><code>backdrop-filter</code></td>
+    </tr>
+    <tr>
+        <td><code>filter</code></td>
+        <td><code>filter</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Flex
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>flex</code></td>
+        <td><code>flex</code></td>
+    </tr>
+    <tr>
+        <td><code>flexBasis</code></td>
+        <td><code>flex-basis</code></td>
+    </tr>
+    <tr>
+        <td><code>flexDirection</code></td>
+        <td><code>flex-direction</code></td>
+    </tr>
+    <tr>
+        <td><code>flexFlow</code></td>
+        <td><code>flex-flow</code></td>
+    </tr>
+    <tr>
+        <td><code>flexGrow</code></td>
+        <td><code>flex-grow</code></td>
+    </tr>
+    <tr>
+        <td><code>flexShrink</code></td>
+        <td><code>flex-shrink</code></td>
+    </tr>
+    <tr>
+        <td><code>flexWrap</code></td>
+        <td><code>flex-wrap</code></td>
+    </tr>
+    <tr>
+        <td><code>order</code></td>
+        <td><code>order</code></td>
+    </tr>
+    <tr>
+        <td><code>flexDir</code></td>
+        <td><code>flex-direction</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Font
+
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>font</code></td>
+        <td><code>font</code></td>
+    </tr>
+    <tr>
+        <td><code>fontFamily</code></td>
+        <td><code>font-family</code></td>
+    </tr>
+    <tr>
+        <td><code>fontFeatureSettings</code></td>
+        <td><code>font-feature-settings</code></td>
+    </tr>
+    <tr>
+        <td><code>fontKerning</code></td>
+        <td><code>font-kerning</code></td>
+    </tr>
+    <tr>
+        <td><code>fontLanguageOverride</code></td>
+        <td><code>font-language-override</code></td>
+    </tr>
+    <tr>
+        <td><code>fontOpticalSizing</code></td>
+        <td><code>font-optical-sizing</code></td>
+    </tr>
+    <tr>
+        <td><code>fontSize</code></td>
+        <td><code>font-size</code></td>
+    </tr>
+    <tr>
+        <td><code>fontSizeAdjust</code></td>
+        <td><code>font-size-adjust</code></td>
+    </tr>
+    <tr>
+        <td><code>fontStretch</code></td>
+        <td><code>font-stretch</code></td>
+    </tr>
+    <tr>
+        <td><code>fontStyle</code></td>
+        <td><code>font-style</code></td>
+    </tr>
+    <tr>
+        <td><code>fontSynthesis</code></td>
+        <td><code>font-synthesis</code></td>
+    </tr>
+    <tr>
+        <td><code>fontVariant</code></td>
+        <td><code>font-variant</code></td>
+    </tr>
+    <tr>
+        <td><code>fontVariantAlternates</code></td>
+        <td><code>font-variant-alternates</code></td>
+    </tr>
+    <tr>
+        <td><code>fontVariantCaps</code></td>
+        <td><code>font-variant-caps</code></td>
+    </tr>
+    <tr>
+        <td><code>fontVariantEastAsian</code></td>
+        <td><code>font-variant-east-asian</code></td>
+    </tr>
+    <tr>
+        <td><code>fontVariantLigatures</code></td>
+        <td><code>font-variant-ligatures</code></td>
+    </tr>
+    <tr>
+        <td><code>fontVariantNumeric</code></td>
+        <td><code>font-variant-numeric</code></td>
+    </tr>
+    <tr>
+        <td><code>fontVariantPosition</code></td>
+        <td><code>font-variant-position</code></td>
+    </tr>
+    <tr>
+        <td><code>fontVariationSettings</code></td>
+        <td><code>font-variation-settings</code></td>
+    </tr>
+    <tr>
+        <td><code>fontWeight</code></td>
+        <td><code>font-weight</code></td>
+    </tr>
+    <tr>
+        <td><code>lineHeight</code></td>
+        <td><code>line-height</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Grid
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>gridTemplateColumns</code></td>
+        <td><code>grid-template-columns</code></td>
+    </tr>
+    <tr>
+        <td><code>gridTemplateRows</code></td>
+        <td><code>grid-template-rows</code></td>
+    </tr>
+    <tr>
+        <td><code>gridTemplateAreas</code></td>
+        <td><code>grid-template-areas</code></td>
+    </tr>
+    <tr>
+        <td><code>gridTemplate</code></td>
+        <td><code>grid-template</code></td>
+    </tr>
+    <tr>
+        <td><code>gridAutoColumns</code></td>
+        <td><code>grid-auto-columns</code></td>
+    </tr>
+    <tr>
+        <td><code>gridAutoRows</code></td>
+        <td><code>grid-auto-rows</code></td>
+    </tr>
+    <tr>
+        <td><code>gridAutoFlow</code></td>
+        <td><code>grid-auto-flow</code></td>
+    </tr>
+    <tr>
+        <td><code>grid</code></td>
+        <td><code>grid</code></td>
+    </tr>
+    <tr>
+        <td><code>gridRowStart</code></td>
+        <td><code>grid-row-start</code></td>
+    </tr>
+    <tr>
+        <td><code>gridColumnStart</code></td>
+        <td><code>grid-column-start</code></td>
+    </tr>
+    <tr>
+        <td><code>gridRowEnd</code></td>
+        <td><code>grid-row-end</code></td>
+    </tr>
+    <tr>
+        <td><code>gridColumnEnd</code></td>
+        <td><code>grid-column-end</code></td>
+    </tr>
+    <tr>
+        <td><code>gridRow</code></td>
+        <td><code>grid-row</code></td>
+    </tr>
+    <tr>
+        <td><code>gridColumn</code></td>
+        <td><code>grid-column</code></td>
+    </tr>
+    <tr>
+        <td><code>gridArea</code></td>
+        <td><code>grid-area</code></td>
+    </tr>
+    <tr>
+        <td><code>gridRowGap</code></td>
+        <td><code>grid-row-gap</code></td>
+    </tr>
+    <tr>
+        <td><code>gridColumnGap</code></td>
+        <td><code>grid-column-gap</code></td>
+    </tr>
+    <tr>
+        <td><code>gridGap</code></td>
+        <td><code>grid-gap</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Image
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>imageOrientation</code></td>
+        <td><code>image-orientation</code></td>
+    </tr>
+    <tr>
+        <td><code>imageRendering</code></td>
+        <td><code>image-rendering</code></td>
+    </tr>
+    <tr>
+        <td><code>imageResolution</code></td>
+        <td><code>image-resolution</code></td>
+    </tr>
+    <tr>
+        <td><code>objectFit</code></td>
+        <td><code>object-fit</code></td>
+    </tr>
+    <tr>
+        <td><code>objectPosition</code></td>
+        <td><code>object-position</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Inline
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>alignmentBaseline</code></td>
+        <td><code>alignment-baseline</code></td>
+    </tr>
+    <tr>
+        <td><code>dominantBaseline</code></td>
+        <td><code>dominant-baseline</code></td>
+    </tr>
+    <tr>
+        <td><code>initialLetter</code></td>
+        <td><code>initial-letter</code></td>
+    </tr>
+    <tr>
+        <td><code>lineHeight</code></td>
+        <td><code>line-height</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## List
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>listStyleImage</code></td>
+        <td><code>list-style-image</code></td>
+    </tr>
+    <tr>
+        <td><code>listStyleType</code></td>
+        <td><code>list-style-type</code></td>
+    </tr>
+    <tr>
+        <td><code>listStylePosition</code></td>
+        <td><code>list-style-position</code></td>
+    </tr>
+    <tr>
+        <td><code>listStyle</code></td>
+        <td><code>list-style</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Masking
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>clipPath</code></td>
+        <td><code>clip-path</code></td>
+    </tr>
+    <tr>
+        <td><code>clipRule</code></td>
+        <td><code>clip-rule</code></td>
+    </tr>
+    <tr>
+        <td><code>mask</code></td>
+        <td><code>mask</code></td>
+    </tr>
+    <tr>
+        <td><code>maskBorder</code></td>
+        <td><code>mask-border</code></td>
+    </tr>
+    <tr>
+        <td><code>maskBorderMode</code></td>
+        <td><code>mask-border-mode</code></td>
+    </tr>
+    <tr>
+        <td><code>maskBorderOutset</code></td>
+        <td><code>mask-border-outset</code></td>
+    </tr>
+    <tr>
+        <td><code>maskBorderRepeat</code></td>
+        <td><code>mask-border-repeat</code></td>
+    </tr>
+    <tr>
+        <td><code>maskBorderSlice</code></td>
+        <td><code>mask-border-slice</code></td>
+    </tr>
+    <tr>
+        <td><code>maskBorderSource</code></td>
+        <td><code>mask-border-source</code></td>
+    </tr>
+    <tr>
+        <td><code>maskBorderWidth</code></td>
+        <td><code>mask-border-width</code></td>
+    </tr>
+    <tr>
+        <td><code>maskClip</code></td>
+        <td><code>mask-clip</code></td>
+    </tr>
+    <tr>
+        <td><code>maskComposite</code></td>
+        <td><code>mask-composite</code></td>
+    </tr>
+    <tr>
+        <td><code>maskImage</code></td>
+        <td><code>mask-image</code></td>
+    </tr>
+    <tr>
+        <td><code>maskMode</code></td>
+        <td><code>mask-mode</code></td>
+    </tr>
+    <tr>
+        <td><code>maskOrigin</code></td>
+        <td><code>mask-origin</code></td>
+    </tr>
+    <tr>
+        <td><code>maskPosition</code></td>
+        <td><code>mask-position</code></td>
+    </tr>
+    <tr>
+        <td><code>maskRepeat</code></td>
+        <td><code>mask-repeat</code></td>
+    </tr>
+    <tr>
+        <td><code>maskSize</code></td>
+        <td><code>mask-size</code></td>
+    </tr>
+    <tr>
+        <td><code>maskType</code></td>
+        <td><code>mask-type</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Motion Path
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>offset</code></td>
+        <td><code>offset</code></td>
+    </tr>
+    <tr>
+        <td><code>offsetAnchor</code></td>
+        <td><code>offset-anchor</code></td>
+    </tr>
+    <tr>
+        <td><code>offsetDistance</code></td>
+        <td><code>offset-distance</code></td>
+    </tr>
+    <tr>
+        <td><code>offsetPath</code></td>
+        <td><code>offset-path</code></td>
+    </tr>
+    <tr>
+        <td><code>offsetPosition</code></td>
+        <td><code>offset-position</code></td>
+    </tr>
+    <tr>
+        <td><code>offsetRotate</code></td>
+        <td><code>offset-rotate</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Overflow
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>overflow</code></td>
+        <td><code>overflow</code></td>
+    </tr>
+    <tr>
+        <td><code>overflowBlock</code></td>
+        <td><code>overflow-block</code></td>
+    </tr>
+    <tr>
+        <td><code>overflowClipMargin</code></td>
+        <td><code>overflow-clip-margin</code></td>
+    </tr>
+    <tr>
+        <td><code>overflowInline</code></td>
+        <td><code>overflow-inline</code></td>
+    </tr>
+    <tr>
+        <td><code>overflowX</code></td>
+        <td><code>overflow-x</code></td>
+    </tr>
+    <tr>
+        <td><code>overflowY</code></td>
+        <td><code>overflow-y</code></td>
+    </tr>
+    <tr>
+        <td><code>scrollBehavior</code></td>
+        <td><code>scroll-behavior</code></td>
+    </tr>
+    <tr>
+        <td><code>scrollbarGutter</code></td>
+        <td><code>scrollbar-gutter</code></td>
+    </tr>
+    <tr>
+        <td><code>textOverflow</code></td>
+        <td><code>text-overflow</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## OverflowBehavior
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>overscrollBehavior</code></td>
+        <td><code>overscroll-behavior</code></td>
+    </tr>
+    <tr>
+        <td><code>overscrollBehaviorBlock</code></td>
+        <td><code>overscroll-behavior-block</code></td>
+    </tr>
+    <tr>
+        <td><code>overscrollBehaviorInline</code></td>
+        <td><code>overscroll-behavior-inline</code></td>
+    </tr>
+    <tr>
+        <td><code>overscrollBehaviorX</code></td>
+        <td><code>overscroll-behavior-x</code></td>
+    </tr>
+    <tr>
+        <td><code>overscrollBehaviorY</code></td>
+        <td><code>overscroll-behavior-y</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Position
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>top</code></td>
+        <td><code>top</code></td>
+    </tr>
+    <tr>
+        <td><code>right</code></td>
+        <td><code>right</code></td>
+    </tr>
+    <tr>
+        <td><code>bottom</code></td>
+        <td><code>bottom</code></td>
+    </tr>
+    <tr>
+        <td><code>left</code></td>
+        <td><code>left</code></td>
+    </tr>
+    <tr>
+        <td><code>inset</code></td>
+        <td><code>inset</code></td>
+    </tr>
+    <tr>
+        <td><code>insetInline</code></td>
+        <td><code>inset-inline</code></td>
+    </tr>
+    <tr>
+        <td><code>insetInlineStart</code></td>
+        <td><code>inset-inline-start</code></td>
+    </tr>
+    <tr>
+        <td><code>insetInlineEnd</code></td>
+        <td><code>inset-inline-end</code></td>
+    </tr>
+    <tr>
+        <td><code>insetBlock</code></td>
+        <td><code>inset-block</code></td>
+    </tr>
+    <tr>
+        <td><code>insetBlockStart</code></td>
+        <td><code>inset-block-start</code></td>
+    </tr>
+    <tr>
+        <td><code>insetBlockEnd</code></td>
+        <td><code>inset-block-end</code></td>
+    </tr>
+    <tr>
+        <td><code>float</code></td>
+        <td><code>float</code></td>
+    </tr>
+    <tr>
+        <td><code>clear</code></td>
+        <td><code>clear</code></td>
+    </tr>
+    <tr>
+        <td><code>position</code></td>
+        <td><code>position</code></td>
+    </tr>
+    <tr>
+        <td><code>pos</code></td>
+        <td><code>position</code></td>
+    </tr>
+    <tr>
+        <td><code>zIndex</code></td>
+        <td><code>z-index</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Scrollbar
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>scrollbarWidth</code></td>
+        <td><code>scrollbar-width</code></td>
+    </tr>
+    <tr>
+        <td><code>scrollbarColor</code></td>
+        <td><code>scrollbar-color</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Shape
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>shapeOutside</code></td>
+        <td><code>shape-outside</code></td>
+    </tr>
+    <tr>
+        <td><code>shapeMargin</code></td>
+        <td><code>shape-margin</code></td>
+    </tr>
+    <tr>
+        <td><code>shapeImageThreshold</code></td>
+        <td><code>shape-image-threshold</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Table
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>borderCollapse</code></td>
+        <td><code>border-collapse</code></td>
+    </tr>
+    <tr>
+        <td><code>borderSpacing</code></td>
+        <td><code>border-spacing</code></td>
+    </tr>
+    <tr>
+        <td><code>captionSide</code></td>
+        <td><code>caption-side</code></td>
+    </tr>
+    <tr>
+        <td><code>emptyCells</code></td>
+        <td><code>empty-cells</code></td>
+    </tr>
+    <tr>
+        <td><code>tableLayout</code></td>
+        <td><code>table-layout</code></td>
+    </tr>
+    <tr>
+        <td><code>verticalAlign</code></td>
+        <td><code>vertical-align</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Text
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>hangingPunctuation</code></td>
+        <td><code>hanging-punctuation</code></td>
+    </tr>
+    <tr>
+        <td><code>hyphenateLimitChars</code></td>
+        <td><code>hyphenate-limit-chars</code></td>
+    </tr>
+    <tr>
+        <td><code>hyphens</code></td>
+        <td><code>hyphens</code></td>
+    </tr>
+    <tr>
+        <td><code>lineBreak</code></td>
+        <td><code>line-break</code></td>
+    </tr>
+    <tr>
+        <td><code>overflowWrap</code></td>
+        <td><code>overflow-wrap</code></td>
+    </tr>
+    <tr>
+        <td><code>tabSize</code></td>
+        <td><code>tab-size</code></td>
+    </tr>
+    <tr>
+        <td><code>textAlignLast</code></td>
+        <td><code>text-align-last</code></td>
+    </tr>
+    <tr>
+        <td><code>textJustify</code></td>
+        <td><code>text-justify</code></td>
+    </tr>
+    <tr>
+        <td><code>textSizeAdjust</code></td>
+        <td><code>text-size-adjust</code></td>
+    </tr>
+    <tr>
+        <td><code>textWrap</code></td>
+        <td><code>text-wrap</code></td>
+    </tr>
+    <tr>
+        <td><code>whiteSpaceCollapse</code></td>
+        <td><code>white-space-collapse</code></td>
+    </tr>
+    <tr>
+        <td><code>wordBreak</code></td>
+        <td><code>word-break</code></td>
+    </tr>
+    <tr>
+        <td><code>letterSpacing</code></td>
+        <td><code>letter-spacing</code></td>
+    </tr>
+    <tr>
+        <td><code>textAlign</code></td>
+        <td><code>text-align</code></td>
+    </tr>
+    <tr>
+        <td><code>textDecoration</code></td>
+        <td><code>text-decoration</code></td>
+    </tr>
+    <tr>
+        <td><code>textDecorationColor</code></td>
+        <td><code>text-decoration-color</code></td>
+    </tr>
+    <tr>
+        <td><code>textDecorationLine</code></td>
+        <td><code>text-decoration-line</code></td>
+    </tr>
+    <tr>
+        <td><code>textDecorationStyle</code></td>
+        <td><code>text-decoration-style</code></td>
+    </tr>
+    <tr>
+        <td><code>textEmphasis</code></td>
+        <td><code>text-emphasis</code></td>
+    </tr>
+    <tr>
+        <td><code>textEmphasisColor</code></td>
+        <td><code>text-emphasis-color</code></td>
+    </tr>
+    <tr>
+        <td><code>textEmphasisPosition</code></td>
+        <td><code>text-emphasis-position</code></td>
+    </tr>
+    <tr>
+        <td><code>textEmphasisStyle</code></td>
+        <td><code>text-emphasis-style</code></td>
+    </tr>
+    <tr>
+        <td><code>textIndent</code></td>
+        <td><code>text-indent</code></td>
+    </tr>
+    <tr>
+        <td><code>textRendering</code></td>
+        <td><code>text-rendering</code></td>
+    </tr>
+    <tr>
+        <td><code>textShadow</code></td>
+        <td><code>text-shadow</code></td>
+    </tr>
+    <tr>
+        <td><code>textTransform</code></td>
+        <td><code>text-transform</code></td>
+    </tr>
+    <tr>
+        <td><code>whiteSpace</code></td>
+        <td><code>white-space</code></td>
+    </tr>
+    <tr>
+        <td><code>wordSpacing</code></td>
+        <td><code>word-spacing</code></td>
+    </tr>
+    <tr>
+        <td><code>content</code></td>
+        <td><code>content</code></td>
+    </tr>
+    <tr>
+        <td><code>typography</code></td>
+        <td>Theme</td>
+    </tr>
+    </tbody>
+</table>
+
+## Transform
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>backfaceVisibility</code></td>
+        <td><code>backface-visibility</code></td>
+    </tr>
+    <tr>
+        <td><code>perspective</code></td>
+        <td><code>perspective</code></td>
+    </tr>
+    <tr>
+        <td><code>perspectiveOrigin</code></td>
+        <td><code>perspective-origin</code></td>
+    </tr>
+    <tr>
+        <td><code>rotate</code></td>
+        <td><code>rotate</code></td>
+    </tr>
+    <tr>
+        <td><code>scale</code></td>
+        <td><code>scale</code></td>
+    </tr>
+    <tr>
+        <td><code>transform</code></td>
+        <td><code>transform</code></td>
+    </tr>
+    <tr>
+        <td><code>transformBox</code></td>
+        <td><code>transform-box</code></td>
+    </tr>
+    <tr>
+        <td><code>transformOrigin</code></td>
+        <td><code>transform-origin</code></td>
+    </tr>
+    <tr>
+        <td><code>transformStyle</code></td>
+        <td><code>transform-style</code></td>
+    </tr>
+    <tr>
+        <td><code>translate</code></td>
+        <td><code>translate</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## Transition
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>transition</code></td>
+        <td><code>transition</code></td>
+    </tr>
+    <tr>
+        <td><code>transitionDelay</code></td>
+        <td><code>transition-delay</code></td>
+    </tr>
+    <tr>
+        <td><code>transitionDuration</code></td>
+        <td><code>transition-duration</code></td>
+    </tr>
+    <tr>
+        <td><code>transitionProperty</code></td>
+        <td><code>transition-property</code></td>
+    </tr>
+    <tr>
+        <td><code>transitionTimingFunction</code></td>
+        <td><code>transition-timing-function</code></td>
+    </tr>
+    </tbody>
+</table>
+
+
+## Ui
+
+<table>
+    <thead>
+    <tr>
+        <th>Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>accentColor</code></td>
+        <td><code>accent-color</code></td>
+    </tr>
+    <tr>
+        <td><code>appearance</code></td>
+        <td><code>appearance</code></td>
+    </tr>
+    <tr>
+        <td><code>caret</code></td>
+        <td><code>caret</code></td>
+    </tr>
+    <tr>
+        <td><code>caretColor</code></td>
+        <td><code>caret-color</code></td>
+    </tr>
+    <tr>
+        <td><code>caretShape</code></td>
+        <td><code>caret-shape</code></td>
+    </tr>
+    <tr>
+        <td><code>cursor</code></td>
+        <td><code>cursor</code></td>
+    </tr>
+    <tr>
+        <td><code>outline</code></td>
+        <td><code>outline</code></td>
+    </tr>
+    <tr>
+        <td><code>outlineColor</code></td>
+        <td><code>outline-color</code></td>
+    </tr>
+    <tr>
+        <td><code>outlineStyle</code></td>
+        <td><code>outline-style</code></td>
+    </tr>
+    <tr>
+        <td><code>outlineWidth</code></td>
+        <td><code>outline-width</code></td>
+    </tr>
+    <tr>
+        <td><code>outlineOffset</code></td>
+        <td><code>outline-offset</code></td>
+    </tr>
+    <tr>
+        <td><code>pointerEvents</code></td>
+        <td><code>pointer-events</code></td>
+    </tr>
+    <tr>
+        <td><code>resize</code></td>
+        <td><code>resize</code></td>
+    </tr>
+    <tr>
+        <td><code>userSelect</code></td>
+        <td><code>user-select</code></td>
+    </tr>
+    </tbody>
+</table>
+
+## ViewTransition
+
+<table>
+    <thead>
+    <tr>
+        <th> Props</th>
+        <th>Style Property</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>viewTransitionName</code></td>
+        <td><code>view-transition-name</code></td>
+    </tr>
+    </tbody>
+</table>
diff --git a/apps/landing/src/app/(detail)/docs/features/page.mdx b/apps/landing/src/app/(detail)/docs/features/page.mdx
index ead02231..09e00c30 100644
--- a/apps/landing/src/app/(detail)/docs/features/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/features/page.mdx
@@ -1 +1,84 @@
 # Features
+
+Many css in js solutions are designed to be used with JavaScript, but Devup UI is designed to be used without JavaScript.
+
+Devup UI is a CSS in JS preprocessor that does not require runtime.
+
+Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
+
+We develop a preprocessor that considers all grammatical cases.
+
+
+## How it works
+
+```jsx
+<Box bg={"red"}/>
+
+<Box className={"d0"}/>
+```
+
+## Responsive
+
+Devup UI supports responsive design.
+
+```jsx
+<Box bg={["red", "blue"]}/>
+
+<Box className={"d0 d1"}/>
+```
+
+## Variables
+
+Devup UI supports variables.
+
+```jsx
+<Box bg={colorVariable}/>
+<Box className={"d0"} style={{
+    "--d0": colorVariable
+}}/>
+```
+
+## Theme
+
+Devup UI supports theme.
+
+```json
+{
+  "theme": {
+    "colors": {
+      "default": {
+        "text": "#000"
+      },
+      "dark": {
+        "text": "white"
+      }
+    }
+  }
+}
+```
+
+```jsx
+<Text color="$text"/>
+```
+
+## Expressions
+
+Devup UI supports expressions.
+
+```jsx
+<Box bg={a > b ? "yellow" : variable}/>
+<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
+    "--d2": variable
+}}/>
+```
+
+## Pseudo Selector
+
+Devup UI supports pseudo selector.
+
+```jsx
+<Box _hover={{ bg: "red" }}/>
+
+<Box className={"d0"} />
+```
+
diff --git a/apps/landing/src/app/(detail)/docs/installation/page.mdx b/apps/landing/src/app/(detail)/docs/installation/page.mdx
index 935fcb2f..35df0c4f 100644
--- a/apps/landing/src/app/(detail)/docs/installation/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/installation/page.mdx
@@ -1,6 +1,69 @@
 # Installation
 
 
+## Install @devup-ui/react
+
+Install the package in your project directory with npm.
+
 ```bash
 npm install @deuvp-ui/react
 ```
+
+### Using Devup UI with Next.js
+
+If you are using Next.js, you can install the Next.js plugin.
+
+```bash
+npm install @devup-ui/next-plugin
+```
+
+After installing the plugin, you can use the plugin in your Next.js project.
+
+```js
+// next.config.js
+
+import { DevupUI } from '@devup-ui/next-plugin'
+
+export default DevupUI({})
+````
+
+### Using Devup UI with Vite
+
+If you are using Vite, you can install the Vite plugin.
+
+```bash
+npm install @devup-ui/vite-plugin
+```
+
+After installing the plugin, you can use the plugin in your Vite project.
+
+```ts
+import { DevupUI } from '@devup-ui/vite-plugin'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react(), DevupUI()],
+})
+```
+
+If you have developed a UI library using Devup UI, you can use the library mode.
+
+```ts
+import { DevupUI } from '@devup-ui/vite-plugin'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react(), DevupUI({
+    // no extract css
+    extractCss: false,
+})],
+})
+```
+
+## Project Examples
+
+- [Next.js Example](https://github.com/dev-five-git/devup-ui/tree/main/apps/next)
+- [Vite Example](https://github.com/dev-five-git/devup-ui/tree/main/apps/vite)
+- [Library with Vite Example](https://github.com/dev-five-git/devup-ui/tree/main/apps/vite-lib)
diff --git a/apps/landing/src/app/(detail)/docs/layout.tsx b/apps/landing/src/app/(detail)/docs/layout.tsx
index b2d0fb94..a2d660ff 100644
--- a/apps/landing/src/app/(detail)/docs/layout.tsx
+++ b/apps/landing/src/app/(detail)/docs/layout.tsx
@@ -11,7 +11,9 @@ export default function DetailLayout({
   return (
     <>
       <Flex maxW="1440px" mx="auto">
-        <LeftMenu />
+        <Box p="20px 16px" w="220px">
+          <LeftMenu />
+        </Box>
         <Box flex={1} px="60px" py="40px">
           {children}
         </Box>
diff --git a/apps/landing/src/app/(detail)/docs/overview/page.mdx b/apps/landing/src/app/(detail)/docs/overview/page.mdx
index 40415f35..3bb1ced4 100644
--- a/apps/landing/src/app/(detail)/docs/overview/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/overview/page.mdx
@@ -1,14 +1,8 @@
 ## What is Devup UI?
-a
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
-## What is Devup UI?
+
+Devup UI is a CSS in JS preprocessor that does not require runtime.
+
+Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.
+
+We develop a preprocessor that considers all grammatical cases.
+
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index 15f6b4a9..899740be 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import './markdown.css'
 import 'sanitize.css'
 
 import { css, ThemeScript } from '@devup-ui/react'
@@ -28,6 +29,7 @@ export default function RootLayout({
       <body
         className={css({
           bg: '$containerBackground',
+          color: '$text',
         })}
       >
         <Header />
diff --git a/apps/landing/src/app/markdown.css b/apps/landing/src/app/markdown.css
new file mode 100644
index 00000000..0ea90bba
--- /dev/null
+++ b/apps/landing/src/app/markdown.css
@@ -0,0 +1,13 @@
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    border: 1px solid var(--text);
+}
+
+th, td {
+    border: 1px solid var(--text);
+    padding: 6px 13px;
+}
+
+
diff --git a/apps/landing/src/components/Code.tsx b/apps/landing/src/components/Code.tsx
new file mode 100644
index 00000000..8e00191f
--- /dev/null
+++ b/apps/landing/src/components/Code.tsx
@@ -0,0 +1,16 @@
+import SyntaxHighlighter from 'react-syntax-highlighter'
+import Light from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark-reasonable'
+
+export const Code = ({
+  language,
+  value,
+}: {
+  language: string
+  value: string
+}) => {
+  return (
+    <SyntaxHighlighter language={language} style={Light}>
+      {value}
+    </SyntaxHighlighter>
+  )
+}
diff --git a/apps/landing/src/components/CodeBoard.tsx b/apps/landing/src/components/CodeBoard.tsx
index 529f3c1e..62ee2689 100644
--- a/apps/landing/src/components/CodeBoard.tsx
+++ b/apps/landing/src/components/CodeBoard.tsx
@@ -1,6 +1,6 @@
 import { Flex, Text, VStack } from '@devup-ui/react'
 import SyntaxHighlighter from 'react-syntax-highlighter'
-import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs'
+import Light from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark-reasonable'
 
 const CODE = `import { css, Flex, Center } from "@devup-ui/react";
 function App() {
@@ -35,7 +35,7 @@ export function CodeBoard() {
                 width: '100%',
               }}
               language="javascript"
-              style={docco}
+              style={Light}
             >
               {CODE}
             </SyntaxHighlighter>
diff --git a/apps/landing/src/components/Header/Discord.tsx b/apps/landing/src/components/Header/Discord.tsx
new file mode 100644
index 00000000..4d6150d6
--- /dev/null
+++ b/apps/landing/src/components/Header/Discord.tsx
@@ -0,0 +1,30 @@
+import { css } from '@devup-ui/react'
+import Link from 'next/link'
+
+export function Discord() {
+  return (
+    <Link
+      className={css({
+        textDecoration: 'none',
+      })}
+      href="https://discord.gg/BtNffusw"
+      target="_blank"
+    >
+      <svg
+        className={css({
+          color: '$text',
+        })}
+        fill="none"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M19.2701 5.33C17.9401 4.71 16.5001 4.26 15.0001 4C14.9737 4.00038 14.9486 4.01116 14.9301 4.03C14.7501 4.36 14.5401 4.79 14.4001 5.12C12.8091 4.88015 11.1911 4.88015 9.60012 5.12C9.46012 4.78 9.25012 4.36 9.06012 4.03C9.05012 4.01 9.02012 4 8.99012 4C7.49012 4.26 6.06012 4.71 4.72012 5.33C4.71012 5.33 4.70012 5.34 4.69012 5.35C1.97012 9.42 1.22012 13.38 1.59012 17.3C1.59012 17.32 1.60012 17.34 1.62012 17.35C3.42012 18.67 5.15012 19.47 6.86012 20C6.89012 20.01 6.92012 20 6.93012 19.98C7.33012 19.43 7.69012 18.85 8.00012 18.24C8.02012 18.2 8.00012 18.16 7.96012 18.15C7.39012 17.93 6.85012 17.67 6.32012 17.37C6.28012 17.35 6.28012 17.29 6.31012 17.26C6.42012 17.18 6.53012 17.09 6.64012 17.01C6.66012 16.99 6.69012 16.99 6.71012 17C10.1501 18.57 13.8601 18.57 17.2601 17C17.2801 16.99 17.3101 16.99 17.3301 17.01C17.4401 17.1 17.5501 17.18 17.6601 17.27C17.7001 17.3 17.7001 17.36 17.6501 17.38C17.1301 17.69 16.5801 17.94 16.0101 18.16C15.9701 18.17 15.9601 18.22 15.9701 18.25C16.2901 18.86 16.6501 19.44 17.0401 19.99C17.0701 20 17.1001 20.01 17.1301 20C18.8501 19.47 20.5801 18.67 22.3801 17.35C22.4001 17.34 22.4101 17.32 22.4101 17.3C22.8501 12.77 21.6801 8.84 19.3101 5.35C19.3001 5.34 19.2901 5.33 19.2701 5.33ZM8.52012 14.91C7.49012 14.91 6.63012 13.96 6.63012 12.79C6.63012 11.62 7.47012 10.67 8.52012 10.67C9.58012 10.67 10.4201 11.63 10.4101 12.79C10.4101 13.96 9.57012 14.91 8.52012 14.91ZM15.4901 14.91C14.4601 14.91 13.6001 13.96 13.6001 12.79C13.6001 11.62 14.4401 10.67 15.4901 10.67C16.5501 10.67 17.3901 11.63 17.3801 12.79C17.3801 13.96 16.5501 14.91 15.4901 14.91Z"
+          fill="currentColor"
+        />
+      </svg>
+    </Link>
+  )
+}
diff --git a/apps/landing/src/components/Header/Github.tsx b/apps/landing/src/components/Header/Github.tsx
new file mode 100644
index 00000000..3012d37a
--- /dev/null
+++ b/apps/landing/src/components/Header/Github.tsx
@@ -0,0 +1,30 @@
+import { css } from '@devup-ui/react'
+import Link from 'next/link'
+
+export function Github() {
+  return (
+    <Link
+      className={css({
+        textDecoration: 'none',
+      })}
+      href="https://github.com/dev-five-git/devup-ui"
+      target="_blank"
+    >
+      <svg
+        className={css({
+          color: '$text',
+        })}
+        fill="none"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
+          fill="currentColor"
+        />
+      </svg>
+    </Link>
+  )
+}
diff --git a/apps/landing/src/components/Header/HeaderInput.tsx b/apps/landing/src/components/Header/HeaderInput.tsx
index 221e0527..3a8130ed 100644
--- a/apps/landing/src/components/Header/HeaderInput.tsx
+++ b/apps/landing/src/components/Header/HeaderInput.tsx
@@ -10,7 +10,7 @@ export function HeaderInput() {
       borderRadius="8px"
       gap="10px"
       p="8px 8px 6px"
-      w="240px"
+      w="100%"
     >
       <Image boxSize="24px" src={URL_PREFIX + '/search.svg'} />
       <Input
diff --git a/apps/landing/src/components/Header/HeaderWrap.tsx b/apps/landing/src/components/Header/HeaderWrap.tsx
index 0ccbe22d..c14ee62b 100644
--- a/apps/landing/src/components/Header/HeaderWrap.tsx
+++ b/apps/landing/src/components/Header/HeaderWrap.tsx
@@ -1,11 +1,12 @@
 'use client'
 
 import { Box, Flex } from '@devup-ui/react'
-import { usePathname } from 'next/navigation'
+import { usePathname, useSearchParams } from 'next/navigation'
 
 export function HeaderWrap({ children }: { children: React.ReactNode }) {
   const path = usePathname()
   const isRoot = path === '/'
+  const menu = useSearchParams().get('menu') === '1'
   return (
     <Box
       pos={isRoot ? 'fixed' : 'sticky'}
@@ -25,7 +26,7 @@ export function HeaderWrap({ children }: { children: React.ReactNode }) {
         justifyContent="space-between"
         maxW={isRoot ? '1440px' : '100%'}
         mx="auto"
-        pl={[4, 5, '40px']}
+        pl={[menu ? null : 4, 5, '40px']}
         pr={[null, 5, '40px']}
       >
         {children}
diff --git a/apps/landing/src/components/Header/MobMenu.tsx b/apps/landing/src/components/Header/MobMenu.tsx
new file mode 100644
index 00000000..e1ecb0d4
--- /dev/null
+++ b/apps/landing/src/components/Header/MobMenu.tsx
@@ -0,0 +1,44 @@
+import { Box, css, Flex, Text } from '@devup-ui/react'
+import Link from 'next/link'
+
+import { LeftMenu } from '../../app/(detail)/docs/LeftMenu'
+import { URL_PREFIX } from '../../constants'
+import { HeaderInput } from './HeaderInput'
+import { MobMenuWrap } from './MobMenuWrap'
+
+export function MobMenu() {
+  return (
+    <MobMenuWrap>
+      <Box px={4} py={2.5}>
+        <HeaderInput />
+      </Box>
+      <Box overflowY="auto" px={4}>
+        <Link
+          className={css({
+            textDecoration: 'none',
+          })}
+          href={URL_PREFIX + '/docs/overview'}
+        >
+          <Flex alignItems="center" gap="10px" py="4px">
+            <Text color="$title" textAlign="right" typography="buttonM">
+              Docs
+            </Text>
+          </Flex>
+        </Link>
+        <LeftMenu />
+        <Link
+          className={css({
+            textDecoration: 'none',
+          })}
+          href={URL_PREFIX + '/team'}
+        >
+          <Flex alignItems="center" gap="10px" py="4px">
+            <Text color="$title" textAlign="right" typography="buttonM">
+              Docs
+            </Text>
+          </Flex>
+        </Link>
+      </Box>
+    </MobMenuWrap>
+  )
+}
diff --git a/apps/landing/src/components/Header/MobMenuButton.tsx b/apps/landing/src/components/Header/MobMenuButton.tsx
new file mode 100644
index 00000000..f509af61
--- /dev/null
+++ b/apps/landing/src/components/Header/MobMenuButton.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { css } from '@devup-ui/react'
+import { useRouter, useSearchParams } from 'next/navigation'
+
+interface MobMenuButtonProps {
+  children: React.ReactNode
+}
+
+export function MobMenuButton({ children }: MobMenuButtonProps) {
+  const { replace } = useRouter()
+  const menu = useSearchParams().get('menu') === '1'
+  return (
+    <>
+      <svg
+        className={css({
+          color: '$text',
+        })}
+        fill="none"
+        height="32"
+        onClick={() => {
+          replace(`?menu=${menu ? '0' : '1'}`)
+        }}
+        viewBox="0 0 32 32"
+        width="32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clipRule="evenodd"
+          d="M5.33325 9.33333C5.33325 8.59695 5.93021 8 6.66659 8H25.3333C26.0696 8 26.6666 8.59695 26.6666 9.33333C26.6666 10.0697 26.0696 10.6667 25.3333 10.6667H6.66659C5.93021 10.6667 5.33325 10.0697 5.33325 9.33333ZM5.33325 16C5.33325 15.2636 5.93021 14.6667 6.66659 14.6667H25.3333C26.0696 14.6667 26.6666 15.2636 26.6666 16C26.6666 16.7364 26.0696 17.3333 25.3333 17.3333H6.66659C5.93021 17.3333 5.33325 16.7364 5.33325 16ZM6.66659 21.3333C5.93021 21.3333 5.33325 21.9303 5.33325 22.6667C5.33325 23.403 5.93021 24 6.66659 24H25.3333C26.0696 24 26.6666 23.403 26.6666 22.6667C26.6666 21.9303 26.0696 21.3333 25.3333 21.3333H6.66659Z"
+          fill="currentColor"
+          fillRule="evenodd"
+        />
+      </svg>
+      {menu && children}
+    </>
+  )
+}
diff --git a/apps/landing/src/components/Header/MobMenuWrap.tsx b/apps/landing/src/components/Header/MobMenuWrap.tsx
new file mode 100644
index 00000000..3180e8fe
--- /dev/null
+++ b/apps/landing/src/components/Header/MobMenuWrap.tsx
@@ -0,0 +1,32 @@
+'use client'
+import { VStack } from '@devup-ui/react'
+import * as bodyScrollLock from 'body-scroll-lock'
+
+interface MobMenuWrapProps {
+  children?: React.ReactNode
+}
+
+export function MobMenuWrap({ children }: MobMenuWrapProps) {
+  return (
+    <VStack
+      ref={(ref) => {
+        bodyScrollLock.disableBodyScroll(ref!)
+        return () => {
+          bodyScrollLock.enableBodyScroll(ref!)
+        }
+      }}
+      bg="$containerBackground"
+      borderTop="1px solid var(--border, #E0E0E0)"
+      h="100%"
+      left={0}
+      maxH="calc(100vh - 50px)"
+      overflowY="auto"
+      pos="fixed"
+      top="50px"
+      w="100%"
+      zIndex={100}
+    >
+      {children}
+    </VStack>
+  )
+}
diff --git a/apps/landing/src/components/Header/MobMenuWrapper.tsx b/apps/landing/src/components/Header/MobMenuWrapper.tsx
new file mode 100644
index 00000000..7266f59a
--- /dev/null
+++ b/apps/landing/src/components/Header/MobMenuWrapper.tsx
@@ -0,0 +1,15 @@
+'use client'
+import { useSearchParams } from 'next/navigation'
+
+interface MobMenuWrapperProps {
+  openChildren?: React.ReactNode
+  children: React.ReactNode
+}
+
+export function MobMenuWrapper({
+  children,
+  openChildren,
+}: MobMenuWrapperProps) {
+  const menu = useSearchParams().get('menu') === '1'
+  return menu ? openChildren : children
+}
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
index a79a53ae..0573478f 100644
--- a/apps/landing/src/components/Header/index.tsx
+++ b/apps/landing/src/components/Header/index.tsx
@@ -3,24 +3,44 @@ import Link from 'next/link'
 
 import { URL_PREFIX } from '../../constants'
 import { Logo } from '../Logo'
+import { Discord } from './Discord'
+import { Github } from './Github'
 import { HeaderInput } from './HeaderInput'
 import { HeaderInputWrap } from './HeaderInputWrap'
 import { HeaderWrap } from './HeaderWrap'
 import { Menu } from './Menu'
+import { MobMenu } from './MobMenu'
+import { MobMenuButton } from './MobMenuButton'
+import { MobMenuWrapper } from './MobMenuWrapper'
 import { ThemeSwitch } from './ThemeSwitch'
 
 export function Header() {
+  const top = (
+    <Flex alignItems="center">
+      <Flex alignItems="center" px="10px">
+        <Github />
+      </Flex>
+      <Flex alignItems="center" px="10px">
+        <Discord />
+      </Flex>
+      <Flex alignItems="center" px="10px">
+        <ThemeSwitch />
+      </Flex>
+    </Flex>
+  )
   return (
     <HeaderWrap>
       <Flex alignItems="center" gap="16px">
-        <Link
-          className={css({
-            textDecoration: 'none',
-          })}
-          href={URL_PREFIX + '/'}
-        >
-          <Logo />
-        </Link>
+        <MobMenuWrapper openChildren={top}>
+          <Link
+            className={css({
+              textDecoration: 'none',
+            })}
+            href={URL_PREFIX + '/'}
+          >
+            <Logo />
+          </Link>
+        </MobMenuWrapper>
       </Flex>
       <Flex alignItems="center" display={['none', null, 'flex']} gap="10px">
         <Flex alignItems="center" px="24px">
@@ -46,61 +66,7 @@ export function Header() {
         <HeaderInputWrap>
           <HeaderInput />
         </HeaderInputWrap>
-        <Flex alignItems="center">
-          <Flex alignItems="center" px="10px">
-            <Link
-              className={css({
-                textDecoration: 'none',
-              })}
-              href="https://github.com/dev-five-git/devup-ui"
-              target="_blank"
-            >
-              <svg
-                className={css({
-                  color: '$text',
-                })}
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2C10.6868 2 9.38642 2.25866 8.17317 2.7612C6.95991 3.26375 5.85752 4.00035 4.92893 4.92893C3.05357 6.8043 2 9.34784 2 12C2 16.42 4.87 20.17 8.84 21.5C9.34 21.58 9.5 21.27 9.5 21V19.31C6.73 19.91 6.14 17.97 6.14 17.97C5.68 16.81 5.03 16.5 5.03 16.5C4.12 15.88 5.1 15.9 5.1 15.9C6.1 15.97 6.63 16.93 6.63 16.93C7.5 18.45 8.97 18 9.54 17.76C9.63 17.11 9.89 16.67 10.17 16.42C7.95 16.17 5.62 15.31 5.62 11.5C5.62 10.39 6 9.5 6.65 8.79C6.55 8.54 6.2 7.5 6.75 6.15C6.75 6.15 7.59 5.88 9.5 7.17C10.29 6.95 11.15 6.84 12 6.84C12.85 6.84 13.71 6.95 14.5 7.17C16.41 5.88 17.25 6.15 17.25 6.15C17.8 7.5 17.45 8.54 17.35 8.79C18 9.5 18.38 10.39 18.38 11.5C18.38 15.32 16.04 16.16 13.81 16.41C14.17 16.72 14.5 17.33 14.5 18.26V21C14.5 21.27 14.66 21.59 15.17 21.5C19.14 20.16 22 16.42 22 12C22 10.6868 21.7413 9.38642 21.2388 8.17317C20.7362 6.95991 19.9997 5.85752 19.0711 4.92893C18.1425 4.00035 17.0401 3.26375 15.8268 2.7612C14.6136 2.25866 13.3132 2 12 2Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </Link>
-          </Flex>
-          <Flex alignItems="center" px="10px">
-            <Link
-              className={css({
-                textDecoration: 'none',
-              })}
-              href="https://discord.gg/BtNffusw"
-              target="_blank"
-            >
-              <svg
-                className={css({
-                  color: '$text',
-                })}
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M19.2701 5.33C17.9401 4.71 16.5001 4.26 15.0001 4C14.9737 4.00038 14.9486 4.01116 14.9301 4.03C14.7501 4.36 14.5401 4.79 14.4001 5.12C12.8091 4.88015 11.1911 4.88015 9.60012 5.12C9.46012 4.78 9.25012 4.36 9.06012 4.03C9.05012 4.01 9.02012 4 8.99012 4C7.49012 4.26 6.06012 4.71 4.72012 5.33C4.71012 5.33 4.70012 5.34 4.69012 5.35C1.97012 9.42 1.22012 13.38 1.59012 17.3C1.59012 17.32 1.60012 17.34 1.62012 17.35C3.42012 18.67 5.15012 19.47 6.86012 20C6.89012 20.01 6.92012 20 6.93012 19.98C7.33012 19.43 7.69012 18.85 8.00012 18.24C8.02012 18.2 8.00012 18.16 7.96012 18.15C7.39012 17.93 6.85012 17.67 6.32012 17.37C6.28012 17.35 6.28012 17.29 6.31012 17.26C6.42012 17.18 6.53012 17.09 6.64012 17.01C6.66012 16.99 6.69012 16.99 6.71012 17C10.1501 18.57 13.8601 18.57 17.2601 17C17.2801 16.99 17.3101 16.99 17.3301 17.01C17.4401 17.1 17.5501 17.18 17.6601 17.27C17.7001 17.3 17.7001 17.36 17.6501 17.38C17.1301 17.69 16.5801 17.94 16.0101 18.16C15.9701 18.17 15.9601 18.22 15.9701 18.25C16.2901 18.86 16.6501 19.44 17.0401 19.99C17.0701 20 17.1001 20.01 17.1301 20C18.8501 19.47 20.5801 18.67 22.3801 17.35C22.4001 17.34 22.4101 17.32 22.4101 17.3C22.8501 12.77 21.6801 8.84 19.3101 5.35C19.3001 5.34 19.2901 5.33 19.2701 5.33ZM8.52012 14.91C7.49012 14.91 6.63012 13.96 6.63012 12.79C6.63012 11.62 7.47012 10.67 8.52012 10.67C9.58012 10.67 10.4201 11.63 10.4101 12.79C10.4101 13.96 9.57012 14.91 8.52012 14.91ZM15.4901 14.91C14.4601 14.91 13.6001 13.96 13.6001 12.79C13.6001 11.62 14.4401 10.67 15.4901 10.67C16.5501 10.67 17.3901 11.63 17.3801 12.79C17.3801 13.96 16.5501 14.91 15.4901 14.91Z"
-                  fill="currentColor"
-                />
-              </svg>
-            </Link>
-          </Flex>
-          <Flex alignItems="center" px="10px">
-            <ThemeSwitch />
-          </Flex>
-        </Flex>
+        {top}
       </Flex>
       <Flex
         alignItems="center"
@@ -109,20 +75,9 @@ export function Header() {
         gap="10px"
         p="10px"
       >
-        <svg
-          fill="none"
-          height="32"
-          viewBox="0 0 32 32"
-          width="32"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clipRule="evenodd"
-            d="M5.33325 9.33333C5.33325 8.59695 5.93021 8 6.66659 8H25.3333C26.0696 8 26.6666 8.59695 26.6666 9.33333C26.6666 10.0697 26.0696 10.6667 25.3333 10.6667H6.66659C5.93021 10.6667 5.33325 10.0697 5.33325 9.33333ZM5.33325 16C5.33325 15.2636 5.93021 14.6667 6.66659 14.6667H25.3333C26.0696 14.6667 26.6666 15.2636 26.6666 16C26.6666 16.7364 26.0696 17.3333 25.3333 17.3333H6.66659C5.93021 17.3333 5.33325 16.7364 5.33325 16ZM6.66659 21.3333C5.93021 21.3333 5.33325 21.9303 5.33325 22.6667C5.33325 23.403 5.93021 24 6.66659 24H25.3333C26.0696 24 26.6666 23.403 26.6666 22.6667C26.6666 21.9303 26.0696 21.3333 25.3333 21.3333H6.66659Z"
-            fill="#2F2F2F"
-            fillRule="evenodd"
-          />
-        </svg>
+        <MobMenuButton>
+          <MobMenu />
+        </MobMenuButton>
       </Flex>
     </HeaderWrap>
   )
diff --git a/apps/landing/src/mdx-components.tsx b/apps/landing/src/mdx-components.tsx
index 8ed99fb9..04e1fc0e 100644
--- a/apps/landing/src/mdx-components.tsx
+++ b/apps/landing/src/mdx-components.tsx
@@ -1,7 +1,27 @@
 import type { MDXComponents } from 'mdx/types'
 
+import { Code } from './components/Code'
+
+const _components = {
+  code({ node, inline, className, children, ...props }: any) {
+    const match = /language-(\w+)/.exec(className || '')
+    return !inline && match ? (
+      <Code
+        language={match[1]}
+        value={String(children).replace(/\n$/, '')}
+        {...props}
+      />
+    ) : (
+      <code className={className} {...props}>
+        {children}
+      </code>
+    )
+  },
+}
+
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     ...components,
+    ..._components,
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fddaccbf..4b050e07 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       '@types/mdx':
         specifier: ^2.0.13
         version: 2.0.13
+      body-scroll-lock:
+        specifier: 3.1.5
+        version: 3.1.5
       next:
         specifier: ^15.1.6
         version: 15.1.6(@babel/core@7.26.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -72,6 +75,9 @@ importers:
       '@devup-ui/next-plugin':
         specifier: workspace:*
         version: link:../../packages/next-plugin
+      '@types/body-scroll-lock':
+        specifier: ^3.1.2
+        version: 3.1.2
       '@types/node':
         specifier: ^22
         version: 22.10.10
@@ -335,25 +341,6 @@ importers:
         specifier: ^3.0.4
         version: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(happy-dom@16.7.2)(terser@5.37.0)
 
-  packages/sheet:
-    dependencies:
-      '@devup-ui/wasm':
-        specifier: workspace:*
-        version: link:../../bindings/devup-ui-wasm
-    devDependencies:
-      typescript:
-        specifier: ^5.7.3
-        version: 5.7.3
-      vite:
-        specifier: ^6
-        version: 6.0.11(@types/node@22.10.10)(terser@5.37.0)
-      vite-plugin-dts:
-        specifier: ^4.5.0
-        version: 4.5.0(@types/node@22.10.10)(rollup@4.31.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.10.10)(terser@5.37.0))
-      vitest:
-        specifier: ^3.0.4
-        version: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(happy-dom@16.7.2)(terser@5.37.0)
-
   packages/vite-plugin:
     dependencies:
       '@devup-ui/wasm':
@@ -1897,6 +1884,9 @@ packages:
   '@types/babel__traverse@7.20.6':
     resolution: {integrity: sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==}
 
+  '@types/body-scroll-lock@3.1.2':
+    resolution: {integrity: sha512-ELhtuphE/YbhEcpBf/rIV9Tl3/O0A0gpCVD+oYFSS8bWstHFJUgA4nNw1ZakVlRC38XaQEIsBogUZKWIPBvpfQ==}
+
   '@types/debug@4.1.12':
     resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
 
@@ -2513,6 +2503,9 @@ packages:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
     engines: {node: '>=4'}
 
+  body-scroll-lock@3.1.5:
+    resolution: {integrity: sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg==}
+
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -6433,6 +6426,8 @@ snapshots:
     dependencies:
       '@babel/types': 7.26.5
 
+  '@types/body-scroll-lock@3.1.2': {}
+
   '@types/debug@4.1.12':
     dependencies:
       '@types/ms': 2.1.0
@@ -7431,6 +7426,8 @@ snapshots:
     dependencies:
       is-windows: 1.0.2
 
+  body-scroll-lock@3.1.5: {}
+
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2