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 c84ed147..4ab39330 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,3 +1,12 @@
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeaderCell,
+ TableRow,
+} from '@/components/mdx/components/Table'
+
export const metadata = {
title: 'Group Selector',
alternates: {
@@ -26,12 +35,46 @@ Add `role="group"` to a parent element, then use `_groupHover`, `_groupFocus`, o
## Available Group Selectors
-| Selector | Triggered when |
-| ------------------- | ---------------------------------------------- |
-| `_groupHover` | Parent with `role="group"` is hovered |
-| `_groupFocus` | Parent with `role="group"` is focused |
-| `_groupActive` | Parent with `role="group"` is active (pressed) |
-| `_groupFocusWithin` | Any element inside the group receives focus |
+
+
+
+ Selector
+ Triggered when
+
+
+
+
+
+ _groupHover
+
+
+ Parent with role="group" is hovered
+
+
+
+
+ _groupFocus
+
+
+ Parent with role="group" is focused
+
+
+
+
+ _groupActive
+
+
+ Parent with role="group" is active (pressed)
+
+
+
+
+ _groupFocusWithin
+
+ Any element inside the group receives focus
+
+
+
## Interactive Card Example
diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
index 638ee397..205036bb 100644
--- a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
@@ -1,3 +1,12 @@
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeaderCell,
+ TableRow,
+} from '@/components/mdx/components/Table'
+
export const metadata = {
title: 'Breakpoints',
alternates: {
@@ -11,14 +20,66 @@ Devup UI uses a mobile-first responsive design system with 6 breakpoints. Use ar
## Breakpoint Ranges
-| Index | Breakpoint | Range | Device |
-| ----- | ---------- | --------------- | ------------------ |
-| 0 | `xs` | 0px - 479px | Mobile (portrait) |
-| 1 | `sm` | 480px - 767px | Mobile (landscape) |
-| 2 | `md` | 768px - 991px | Tablet |
-| 3 | `lg` | 992px - 1279px | Small desktop |
-| 4 | `xl` | 1280px - 1599px | Desktop |
-| 5 | `2xl` | 1600px+ | Large desktop |
+
+
+
+ Index
+ Breakpoint
+ Range
+ Device
+
+
+
+
+ 0
+
+ xs
+
+ 0px - 479px
+ Mobile (portrait)
+
+
+ 1
+
+ sm
+
+ 480px - 767px
+ Mobile (landscape)
+
+
+ 2
+
+ md
+
+ 768px - 991px
+ Tablet
+
+
+ 3
+
+ lg
+
+ 992px - 1279px
+ Small desktop
+
+
+ 4
+
+ xl
+
+ 1280px - 1599px
+ Desktop
+
+
+ 5
+
+ 2xl
+
+ 1600px+
+ Large desktop
+
+
+
## Basic Usage
diff --git a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
index dee9d86b..a356fffd 100644
--- a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
@@ -1,3 +1,12 @@
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeaderCell,
+ TableRow,
+} from '@/components/mdx/components/Table'
+
export const metadata = {
title: 'Typography',
alternates: {
@@ -61,15 +70,80 @@ const captionExample = Caption text
Each typography style can include:
-| Property | Description | Example |
-| --------------- | ------------------------------ | ------------------------ |
-| `fontFamily` | Font family name | `"Pretendard"` |
-| `fontSize` | Font size | `"16px"` |
-| `fontWeight` | Font weight (number or string) | `700` or `"bold"` |
-| `fontStyle` | Font style | `"normal"` or `"italic"` |
-| `lineHeight` | Line height (number or string) | `1.5` or `"150%"` |
-| `letterSpacing` | Letter spacing | `"-0.02em"` |
-| `textTransform` | Text transformation | `"uppercase"` |
+
+
+
+ Property
+ Description
+ Example
+
+
+
+
+
+ fontFamily
+
+ Font family name
+
+ "Pretendard"
+
+
+
+
+ fontSize
+
+ Font size
+
+ "16px"
+
+
+
+
+ fontWeight
+
+ Font weight (number or string)
+
+ 700 or "bold"
+
+
+
+
+ fontStyle
+
+ Font style
+
+ "normal" or "italic"
+
+
+
+
+ lineHeight
+
+ Line height (number or string)
+
+ 1.5 or "150%"
+
+
+
+
+ letterSpacing
+
+ Letter spacing
+
+ "-0.02em"
+
+
+
+
+ textTransform
+
+ Text transformation
+
+ "uppercase"
+
+
+
+
## Responsive Typography
diff --git a/apps/landing/src/app/(detail)/docs/overview/page.mdx b/apps/landing/src/app/(detail)/docs/overview/page.mdx
index d980f0f4..2f40a4bc 100644
--- a/apps/landing/src/app/(detail)/docs/overview/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/overview/page.mdx
@@ -1,3 +1,12 @@
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeaderCell,
+ TableRow,
+} from '@/components/mdx/components/Table'
+
export const metadata = {
title: 'What is Devup UI?',
alternates: {
@@ -32,13 +41,54 @@ Devup UI eliminates this trade-off entirely. Our Rust-powered preprocessor analy
### Key Advantages
-| Feature | Devup UI | styled-components | Emotion | Vanilla Extract |
-| -------------------- | -------- | ----------------- | ------- | --------------- |
-| Zero Runtime | Yes | No | No | Yes |
-| Dynamic Values | Yes | Yes | Yes | Limited |
-| Full Syntax Coverage | Yes | Yes | Yes | No |
-| Type-Safe Themes | Yes | Limited | Limited | Yes |
-| Build Performance | Fastest | N/A | N/A | Fast |
+
+
+
+ Feature
+ Devup UI
+ styled-components
+ Emotion
+ Vanilla Extract
+
+
+
+
+ Zero Runtime
+ Yes
+ No
+ No
+ Yes
+
+
+ Dynamic Values
+ Yes
+ Yes
+ Yes
+ Limited
+
+
+ Full Syntax Coverage
+ Yes
+ Yes
+ Yes
+ No
+
+
+ Type-Safe Themes
+ Yes
+ Limited
+ Limited
+ Yes
+
+
+ Build Performance
+ Fastest
+ N/A
+ N/A
+ Fast
+
+
+
### How It Works
@@ -81,14 +131,84 @@ const Card = styled('div', {
Benchmarks on Next.js (GitHub Actions - ubuntu-latest):
-| Library | Build Time | Build Size |
-| ------------------------- | ---------- | -------------------- |
-| tailwindcss | 19.31s | 59,521,539 bytes |
-| styleX | 41.78s | 86,869,452 bytes |
-| vanilla-extract | 19.50s | 61,494,033 bytes |
-| **devup-ui (single css)** | **17.05s** | **59,520,196 bytes** |
-
-With Turbopack, Devup UI achieves the **smallest bundle size** at just 4,772,050 bytes.
+
+
+
+ Library
+ Version
+ Build Time
+ Build Size
+
+
+
+
+ tailwindcss
+ 4.1.13
+ 19.31s
+ 59,521,539 bytes
+
+
+ styleX
+ 0.15.4
+ 41.78s
+ 86,869,452 bytes
+
+
+ vanilla-extract
+ 1.17.4
+ 19.50s
+ 61,494,033 bytes
+
+
+ kuma-ui
+ 1.5.9
+ 20.93s
+ 69,924,179 bytes
+
+
+ panda-css
+ 1.3.1
+ 20.64s
+ 64,573,260 bytes
+
+
+ chakra-ui
+ 3.27.0
+ 28.81s
+ 222,435,802 bytes
+
+
+ mui
+ 7.3.2
+ 20.86s
+ 97,964,458 bytes
+
+
+ **devup-ui (per-file css)**
+ **1.0.18**
+ **16.90s**
+ 59,540,459 bytes
+
+
+ **devup-ui (single css)**
+ **1.0.18**
+ **17.05s**
+ **59,520,196 bytes**
+
+
+ tailwindcss (turbopack)
+ 4.1.13
+ 6.72s
+ 5,355,082 bytes
+
+
+ **devup-ui (single css + turbopack)**
+ **1.0.18**
+ 10.34s
+ **4,772,050 bytes**
+
+
+
### Get Started