+[null,null,null,null,{"text":"## What is Devup UI?eeeeeeeeeeee\r\n\r\n**Devup UI is not just another CSS-in-JS library — it's the future of CSS-in-JS itself.**\r\n\r\nDevup UI is a zero-runtime CSS-in-JS preprocessor powered by Rust and WebAssembly. It transforms all your styles at build time, completely eliminating runtime overhead while providing full CSS-in-JS syntax coverage.\r\n\r\n### The Problem with Traditional CSS-in-JS\r\n\r\nTraditional CSS-in-JS solutions force you to choose between:\r\n\r\n- **Developer Experience**: Intuitive APIs, co-located styles, dynamic theming\r\n- **Performance**: No runtime overhead, fast page loads, optimal Core Web Vitals\r\n\r\nLibraries like styled-components and Emotion offer great DX but execute JavaScript at runtime to generate styles. Zero-runtime alternatives like Vanilla Extract sacrifice some flexibility for performance.\r\n\r\n### The Devup UI Solution\r\n\r\nDevup UI eliminates this trade-off entirely. Our Rust-powered preprocessor analyzes your code at build time and handles every CSS-in-JS pattern:\r\n\r\n- **Variables** — Dynamic values become CSS custom properties\r\n- **Conditionals** — Ternary expressions are statically analyzed\r\n- **Responsive Arrays** — Breakpoint-based styles are pre-generated\r\n- **Pseudo Selectors** — `_hover`, `_focus`, `_active` work seamlessly\r\n- **Themes** — Type-safe theme tokens with zero-cost switching\r\n\r\n### Key Advantages\r\n\r\n<Table>\r\n <TableHead>\r\n <TableRow>\r\n <TableHeaderCell>Feature</TableHeaderCell>\r\n <TableHeaderCell>Devup UI</TableHeaderCell>\r\n <TableHeaderCell>styled-components</TableHeaderCell>\r\n <TableHeaderCell>Emotion</TableHeaderCell>\r\n <TableHeaderCell>Vanilla Extract</TableHeaderCell>\r\n </TableRow>\r\n </TableHead>\r\n <TableBody>\r\n <TableRow>\r\n <TableCell>Zero Runtime</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>No</TableCell>\r\n <TableCell>No</TableCell>\r\n <TableCell>Yes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>Dynamic Values</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Limited</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>Full Syntax Coverage</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>No</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>Type-Safe Themes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Limited</TableCell>\r\n <TableCell>Limited</TableCell>\r\n <TableCell>Yes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>Build Performance</TableCell>\r\n <TableCell>Fastest</TableCell>\r\n <TableCell>N/A</TableCell>\r\n <TableCell>N/A</TableCell>\r\n <TableCell>Fast</TableCell>\r\n </TableRow>\r\n </TableBody>\r\n</Table>\r\n\r\n### How It Works\r\n\r\n```tsx\r\n// You write familiar CSS-in-JS syntax\r\nconst example = <Box _hover={{ bg: 'blue' }} bg=\"red\" p={4} />\r\n\r\n// Devup UI transforms it at build time\r\nconst generated = <div className=\"a b c\" />\r\n\r\n// With optimized atomic CSS\r\n// .a { background-color: red; }\r\n// .b { padding: 16px; } /* 4 * 4 = 16px */\r\n// .c:hover { background-color: blue; }\r\n```\r\n\r\n> Numeric values are multiplied by 4. `p={4}` becomes `padding: 16px`.\r\n\r\nClass names use compact base-37 encoding (`a`, `b`, ... `z`, `_`, `aa`, `ab`, ...) for minimal CSS output.\r\n\r\n### Familiar API\r\n\r\nIf you've used styled-components or Emotion, you'll feel right at home:\r\n\r\n```tsx\r\nimport { styled } from '@devup-ui/react'\r\n\r\nconst Card = styled('div', {\r\n bg: 'white',\r\n p: 4, // 4 * 4 = 16px\r\n borderRadius: '8px',\r\n boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',\r\n _hover: {\r\n boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',\r\n },\r\n})\r\n```\r\n\r\n### Proven Performance\r\n\r\nBenchmarks on Next.js (GitHub Actions - ubuntu-latest):\r\n\r\n<Table>\r\n <TableHead>\r\n <TableRow>\r\n <TableHeaderCell>Library</TableHeaderCell>\r\n <TableHeaderCell>Version</TableHeaderCell>\r\n <TableHeaderCell>Build Time</TableHeaderCell>\r\n <TableHeaderCell>Build Size</TableHeaderCell>\r\n </TableRow>\r\n </TableHead>\r\n <TableBody>\r\n <TableRow>\r\n <TableCell>tailwindcss</TableCell>\r\n <TableCell>4.1.13</TableCell>\r\n <TableCell>19.31s</TableCell>\r\n <TableCell>59,521,539 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>styleX</TableCell>\r\n <TableCell>0.15.4</TableCell>\r\n <TableCell>41.78s</TableCell>\r\n <TableCell>86,869,452 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>vanilla-extract</TableCell>\r\n <TableCell>1.17.4</TableCell>\r\n <TableCell>19.50s</TableCell>\r\n <TableCell>61,494,033 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>kuma-ui</TableCell>\r\n <TableCell>1.5.9</TableCell>\r\n <TableCell>20.93s</TableCell>\r\n <TableCell>69,924,179 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>panda-css</TableCell>\r\n <TableCell>1.3.1</TableCell>\r\n <TableCell>20.64s</TableCell>\r\n <TableCell>64,573,260 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>chakra-ui</TableCell>\r\n <TableCell>3.27.0</TableCell>\r\n <TableCell>28.81s</TableCell>\r\n <TableCell>222,435,802 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>mui</TableCell>\r\n <TableCell>7.3.2</TableCell>\r\n <TableCell>20.86s</TableCell>\r\n <TableCell>97,964,458 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>**devup-ui (per-file css)**</TableCell>\r\n <TableCell>**1.0.18**</TableCell>\r\n <TableCell>**16.90s**</TableCell>\r\n <TableCell>59,540,459 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>**devup-ui (single css)**</TableCell>\r\n <TableCell>**1.0.18**</TableCell>\r\n <TableCell>**17.05s**</TableCell>\r\n <TableCell>**59,520,196 bytes**</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>tailwindcss (turbopack)</TableCell>\r\n <TableCell>4.1.13</TableCell>\r\n <TableCell>6.72s</TableCell>\r\n <TableCell>5,355,082 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>**devup-ui (single css + turbopack)**</TableCell>\r\n <TableCell>**1.0.18**</TableCell>\r\n <TableCell>10.34s</TableCell>\r\n <TableCell>**4,772,050 bytes**</TableCell>\r\n </TableRow>\r\n </TableBody>\r\n</Table>\r\n\r\n### Get Started\r\n\r\nReady to experience the future of CSS-in-JS? Head to the [Installation](/docs/installation) guide to get started in minutes.\r\n","title":"What is Devup UI?eeeeeeeeeeee","url":"/documentation/concept/concept-1"},null,null,null,null,null,{"text":"## What is Devup UI?\r\n\r\n**Devup UI is not just another CSS-in-JS library — it's the future of CSS-in-JS itself.**\r\n\r\nDevup UI is a zero-runtime CSS-in-JS preprocessor powered by Rust and WebAssembly. It transforms all your styles at build time, completely eliminating runtime overhead while providing full CSS-in-JS syntax coverage.\r\n\r\n### The Problem with Traditional CSS-in-JS\r\n\r\nTraditional CSS-in-JS solutions force you to choose between:\r\n\r\n- **Developer Experience**: Intuitive APIs, co-located styles, dynamic theming\r\n- **Performance**: No runtime overhead, fast page loads, optimal Core Web Vitals\r\n\r\nLibraries like styled-components and Emotion offer great DX but execute JavaScript at runtime to generate styles. Zero-runtime alternatives like Vanilla Extract sacrifice some flexibility for performance.\r\n\r\n### The Devup UI Solution\r\n\r\nDevup UI eliminates this trade-off entirely. Our Rust-powered preprocessor analyzes your code at build time and handles every CSS-in-JS pattern:\r\n\r\n- **Variables** — Dynamic values become CSS custom properties\r\n- **Conditionals** — Ternary expressions are statically analyzed\r\n- **Responsive Arrays** — Breakpoint-based styles are pre-generated\r\n- **Pseudo Selectors** — `_hover`, `_focus`, `_active` work seamlessly\r\n- **Themes** — Type-safe theme tokens with zero-cost switching\r\n\r\n### Key Advantages\r\n\r\n<Table>\r\n <TableHead>\r\n <TableRow>\r\n <TableHeaderCell>Feature</TableHeaderCell>\r\n <TableHeaderCell>Devup UI</TableHeaderCell>\r\n <TableHeaderCell>styled-components</TableHeaderCell>\r\n <TableHeaderCell>Emotion</TableHeaderCell>\r\n <TableHeaderCell>Vanilla Extract</TableHeaderCell>\r\n </TableRow>\r\n </TableHead>\r\n <TableBody>\r\n <TableRow>\r\n <TableCell>Zero Runtime</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>No</TableCell>\r\n <TableCell>No</TableCell>\r\n <TableCell>Yes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>Dynamic Values</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Limited</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>Full Syntax Coverage</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>No</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>Type-Safe Themes</TableCell>\r\n <TableCell>Yes</TableCell>\r\n <TableCell>Limited</TableCell>\r\n <TableCell>Limited</TableCell>\r\n <TableCell>Yes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>Build Performance</TableCell>\r\n <TableCell>Fastest</TableCell>\r\n <TableCell>N/A</TableCell>\r\n <TableCell>N/A</TableCell>\r\n <TableCell>Fast</TableCell>\r\n </TableRow>\r\n </TableBody>\r\n</Table>\r\n\r\n### How It Works\r\n\r\n```tsx\r\n// You write familiar CSS-in-JS syntax\r\nconst example = <Box _hover={{ bg: 'blue' }} bg=\"red\" p={4} />\r\n\r\n// Devup UI transforms it at build time\r\nconst generated = <div className=\"a b c\" />\r\n\r\n// With optimized atomic CSS\r\n// .a { background-color: red; }\r\n// .b { padding: 16px; } /* 4 * 4 = 16px */\r\n// .c:hover { background-color: blue; }\r\n```\r\n\r\n> Numeric values are multiplied by 4. `p={4}` becomes `padding: 16px`.\r\n\r\nClass names use compact base-37 encoding (`a`, `b`, ... `z`, `_`, `aa`, `ab`, ...) for minimal CSS output.\r\n\r\n### Familiar API\r\n\r\nIf you've used styled-components or Emotion, you'll feel right at home:\r\n\r\n```tsx\r\nimport { styled } from '@devup-ui/react'\r\n\r\nconst Card = styled('div', {\r\n bg: 'white',\r\n p: 4, // 4 * 4 = 16px\r\n borderRadius: '8px',\r\n boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',\r\n _hover: {\r\n boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',\r\n },\r\n})\r\n```\r\n\r\n### Proven Performance\r\n\r\nBenchmarks on Next.js (GitHub Actions - ubuntu-latest):\r\n\r\n<Table>\r\n <TableHead>\r\n <TableRow>\r\n <TableHeaderCell>Library</TableHeaderCell>\r\n <TableHeaderCell>Version</TableHeaderCell>\r\n <TableHeaderCell>Build Time</TableHeaderCell>\r\n <TableHeaderCell>Build Size</TableHeaderCell>\r\n </TableRow>\r\n </TableHead>\r\n <TableBody>\r\n <TableRow>\r\n <TableCell>tailwindcss</TableCell>\r\n <TableCell>4.1.13</TableCell>\r\n <TableCell>19.31s</TableCell>\r\n <TableCell>59,521,539 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>styleX</TableCell>\r\n <TableCell>0.15.4</TableCell>\r\n <TableCell>41.78s</TableCell>\r\n <TableCell>86,869,452 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>vanilla-extract</TableCell>\r\n <TableCell>1.17.4</TableCell>\r\n <TableCell>19.50s</TableCell>\r\n <TableCell>61,494,033 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>kuma-ui</TableCell>\r\n <TableCell>1.5.9</TableCell>\r\n <TableCell>20.93s</TableCell>\r\n <TableCell>69,924,179 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>panda-css</TableCell>\r\n <TableCell>1.3.1</TableCell>\r\n <TableCell>20.64s</TableCell>\r\n <TableCell>64,573,260 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>chakra-ui</TableCell>\r\n <TableCell>3.27.0</TableCell>\r\n <TableCell>28.81s</TableCell>\r\n <TableCell>222,435,802 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>mui</TableCell>\r\n <TableCell>7.3.2</TableCell>\r\n <TableCell>20.86s</TableCell>\r\n <TableCell>97,964,458 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>**devup-ui (per-file css)**</TableCell>\r\n <TableCell>**1.0.18**</TableCell>\r\n <TableCell>**16.90s**</TableCell>\r\n <TableCell>59,540,459 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>**devup-ui (single css)**</TableCell>\r\n <TableCell>**1.0.18**</TableCell>\r\n <TableCell>**17.05s**</TableCell>\r\n <TableCell>**59,520,196 bytes**</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>tailwindcss (turbopack)</TableCell>\r\n <TableCell>4.1.13</TableCell>\r\n <TableCell>6.72s</TableCell>\r\n <TableCell>5,355,082 bytes</TableCell>\r\n </TableRow>\r\n <TableRow>\r\n <TableCell>**devup-ui (single css + turbopack)**</TableCell>\r\n <TableCell>**1.0.18**</TableCell>\r\n <TableCell>10.34s</TableCell>\r\n <TableCell>**4,772,050 bytes**</TableCell>\r\n </TableRow>\r\n </TableBody>\r\n</Table>\r\n\r\n### Get Started\r\n\r\nReady to experience the future of CSS-in-JS? Head to the [Installation](/docs/installation) guide to get started in minutes.\r\n","title":"What is Devup UI?","url":"/documentation/overview"},null,null,null]
0 commit comments