{
  "markdown": "<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg\" alt=\"Devup UI logo\" width=\"300\" />\n</div>\n\n<h3 align=\"center\">\n    The Future of CSS-in-JS — Zero Runtime, Full Power\n</h3>\n\n<p align=\"center\">\n    <strong>Zero Config · Zero FOUC · Zero Runtime · Complete CSS-in-JS Syntax Coverage</strong>\n</p>\n\n---\n\n<div>\n<img src='https://img.shields.io/npm/v/@devup-ui/react'>\n<img src='https://img.shields.io/bundlephobia/minzip/@devup-ui/react'>\n<img alt=\"Github Checks\" src=\"https://badgen.net/github/checks/dev-five-git/devup-ui\"/>\n<img alt=\"Apache-2.0 License\" src=\"https://img.shields.io/github/license/dev-five-git/devup-ui\"/>\n<a href=\"https://www.npmjs.com/package/@devup-ui/react\">\n<img alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@devup-ui/react.svg?style=flat\"/>\n</a>\n<a href=\"https://badgen.net/github/stars/dev-five-git/devup-ui\">\n<img alt=\"Github Stars\" src=\"https://badgen.net/github/stars/dev-five-git/devup-ui\" />\n</a>\n<a href=\"https://discord.gg/8zjcGc7cWh\">\n<img alt=\"Discord\" src=\"https://img.shields.io/discord/1321362173619994644.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2\" />\n</a>\n<a href=\"https://codecov.io/gh/dev-five-git/devup-ui\" >\n <img src=\"https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B\"/>\n</a>\n</div>\n\n---\n\nEnglish | [한국어](README_ko.md)\n\n## Why Devup UI?\n\n**Devup UI isn't just another CSS-in-JS library — it's the next evolution.**\n\nTraditional CSS-in-JS solutions force you to choose between developer experience and performance. Devup UI eliminates this trade-off entirely by processing all styles at build time using a Rust-powered preprocessor.\n\n- **Complete Syntax Coverage**: Every CSS-in-JS pattern you know — variables, conditionals, responsive arrays, pseudo-selectors — all fully supported\n- **Familiar API**: `styled()` API compatible with styled-components and Emotion patterns\n- **True Zero Runtime**: No JavaScript execution for styling at runtime. Period.\n- **Smallest Bundle Size**: Optimized class names (`a`, `b`, ... `aa`, `ab`) minimize CSS output\n- **Fastest Build Times**: Rust + WebAssembly delivers unmatched preprocessing speed\n\n## Install\n\n```sh\nnpm install @devup-ui/react\n\n# on next.js\nnpm install @devup-ui/next-plugin\n\n# on vite\nnpm install @devup-ui/vite-plugin\n\n# on rsbuild\nnpm install @devup-ui/rsbuild-plugin\n\n# on webpack\nnpm install @devup-ui/webpack-plugin\n```\n\n## Features\n\n- **Preprocessor** — All CSS extraction happens at build time\n- **Zero Config** — Works out of the box with sensible defaults\n- **Zero FOUC** — No flash of unstyled content, no Provider required\n- **Zero Runtime** — No client-side JavaScript for styling\n- **RSC Support** — Full React Server Components compatibility\n- **Library Mode** — Build component libraries with extracted styles\n- **Dynamic Themes** — Zero-cost theme switching via CSS variables\n- **Type-Safe Themes** — Full TypeScript support for theme tokens\n- **Smallest & Fastest** — Proven by benchmarks\n\n## Comparison Benchmarks\n\n[Latest CI benchmark](https://github.com/dev-five-git/devup-ui/actions/runs/33254030962) on `ubuntu-latest` with Next.js 16.3.3. All Next.js builds use the native TypeScript 7 CLI for type checking.\n\nWebpack values are one cold build:\n\n| Library                     | Version | Build Time | Build Size        |\n| --------------------------- | ------- | ---------- | ----------------- |\n| tailwindcss                 | 4.3.3   | 12.81s     | 66,453,190 bytes  |\n| styleX                      | 0.19.0  | 27.61s     | 95,413,403 bytes  |\n| vanilla-extract             | 1.21.2  | 11.96s     | 67,689,923 bytes  |\n| kuma-ui                     | 1.6.4   | 13.07s     | 74,747,637 bytes  |\n| panda-css                   | 1.12.0  | 13.20s     | 70,970,208 bytes  |\n| chakra-ui                   | 3.37.0  | 19.98s     | 206,589,898 bytes |\n| mui                         | 9.4.0   | 13.78s     | 100,603,186 bytes |\n| **devup-ui (per-file CSS)** | 1.0.40  | **10.73s** | 66,535,095 bytes  |\n| **devup-ui (single CSS)**   | 1.0.40  | **10.81s** | 66,535,321 bytes  |\n\nTurbopack values are medians of six cold builds in alternating order:\n\n| Library                                | Version | Median Build Time | Build Size           |\n| -------------------------------------- | ------- | ----------------- | -------------------- |\n| tailwindcss                            | 4.3.3   | 5.52s             | 38,425,132 bytes     |\n| **devup-ui (direct APIs, single CSS)** | 1.0.40  | **5.46s**         | **36,507,782 bytes** |\n| **devup-ui (static `.css.ts`)**        | 1.0.40  | **5.41s**         | 36,586,883 bytes     |\n\nThe Turbopack ranges overlap, so the direct-API median is 0.06s (1.1%) ahead but still effectively parity with Tailwind on this fixture. The six cold samples were Tailwind `5.42, 5.56, 5.70, 5.53, 5.41, 5.52s`, direct Devup UI `5.64, 5.40, 5.42, 5.46, 5.54, 5.46s`, and static `.css.ts` `5.42, 5.38, 5.42, 5.47, 5.40, 5.38s`. The fixtures have comparable app shapes, not pixel-identical styling: Tailwind styles the leading paragraph and button more heavily, while Devup UI exercises typed component/style props. Treat these as build-pipeline results rather than a per-rule microbenchmark. The static `.css.ts` row uses the `lite` WASM fast path; dynamic `.css.ts` modules use the full Boa evaluator and are not represented by that median.\n\n## How it works\n\nDevup UI transforms your components at build time. Class names are generated using a compact base-37 encoding for minimal CSS size.\n\n**Basic transformation:**\n\n```tsx\n// You write:\nconst variable = <Box _hover={{ bg: 'blue' }} bg=\"red\" p={4} />\n\n// Devup UI generates:\nconst variable = <div className=\"a b c\" />\n\n// With CSS:\n// .a { background-color: red; }\n// .b { padding: 1rem; }\n// .c:hover { background-color: blue; }\n```\n\n**Dynamic values become CSS variables:**\n\n```tsx\n// You write:\nconst example = <Box bg={colorVariable} />\n\n// Devup UI generates:\nconst example = <div className=\"a\" style={{ '--a': colorVariable }} />\n\n// With CSS:\n// .a { background-color: var(--a); }\n```\n\n**Complex expressions and responsive arrays — fully supported:**\n\n```tsx\n// You write:\nconst example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />\n\n// Devup UI generates:\nconst example = (\n  <div\n    className={`a b ${isActive ? 'c' : 'd'}`}\n    style={{ '--d': dynamicColor }}\n  />\n)\n\n// With responsive CSS for each breakpoint\n```\n\n**Type-safe theming:**\n\n`devup.json`\n\n```json\n{\n  \"theme\": {\n    \"colors\": {\n      \"default\": {\n        \"primary\": \"#0070f3\",\n        \"text\": \"#000\"\n      },\n      \"dark\": {\n        \"primary\": \"#3291ff\",\n        \"text\": \"#fff\"\n      }\n    },\n    \"typography\": {\n      \"heading\": {\n        \"fontFamily\": \"Pretendard\",\n        \"fontSize\": \"24px\",\n        \"fontWeight\": 700,\n        \"lineHeight\": 1.3\n      }\n    }\n  }\n}\n```\n\n```tsx\n// Type-safe theme tokens\nconst textExample = <Text color=\"$primary\" />\nconst boxExample = <Box typography=\"$heading\" />\n```\n\n**Custom shorthands:**\n\nDefine reusable prop aliases in the build plugin options. Property names may\nuse camelCase or CSS kebab-case, and one shorthand can target multiple\nproperties.\n\n```ts\n// vite.config.ts\nexport default defineConfig({\n  plugins: [\n    DevupUI({\n      shorthands: {\n        insetX: ['left', 'right'],\n        scrollMarginX: ['scrollMarginLeft', 'scrollMarginRight'],\n      },\n    }),\n  ],\n})\n```\n\nThe plugin adds configured names to the generated declaration file, so they are\navailable as type-safe component props and selector properties after the plugin\nhas run. Restart the build after changing this option so `df/theme.d.ts` is\nregenerated. The same value is applied to every target property.\n\nIf your `tsconfig.json` limits `include` to `src`, also include `df/*.d.ts` (or\nthe matching custom `distDir`) so the generated augmentation is loaded.\n\n```tsx\nconst pinned = <Box insetX={0} />\nconst responsive = <Box insetX={[0, null, 'auto']} />\nconst interactive = <Box _hover={{ insetX: 4 }} />\n```\n\n**Responsive + Pseudo selectors together:**\n\n```tsx\n// Responsive with pseudo selector\nconst example = <Box _hover={{ bg: ['red', 'blue'] }} />\n\n// Equivalent syntax\nconst example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />\n```\n\n**styled-components / Emotion compatible `styled()` API:**\n\n```tsx\nimport { styled } from '@devup-ui/react'\n\n// Familiar syntax for styled-components and Emotion users\nconst Card = styled('div', {\n  bg: 'white',\n  p: 4, // 4 * 4 = 16px\n  borderRadius: '8px',\n  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',\n  _hover: {\n    boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',\n  },\n})\n\nconst Button = styled('button', {\n  px: 4, // 4 * 4 = 16px\n  py: 2, // 2 * 4 = 8px\n  borderRadius: '4px',\n  cursor: 'pointer',\n})\n\n// Usage\nconst cardExample = <Card>Content</Card>\nconst buttonExample = <Button>Click me</Button>\n```\n\n## Inspirations\n\n- Styled System\n- Chakra UI\n- Theme UI\n- Vanilla Extract\n- Rainbow Sprinkles\n- Kuma UI\n\n## How to Contribute\n\n### Requirements\n\n- [Node.js](https://nodejs.org) (LTS version recommended)\n- [Rust](https://rustup.rs) compiler\n- [Bun](https://bun.sh) package manager\n\n### Development Setup\n\nTo set up the development environment, install the following packages:\n\n```sh\nbun install\nbun run build\ncargo install cargo-tarpaulin\n\ncargo install wasm-pack\n```\n\nAfter installation, run `bun run test` to ensure everything works correctly.\n",
  "bytes": 9440,
  "sha": "a66449f315f59aea080e2ed8d15effeba2a838adb32332bc9993f2ae28bfe037",
  "repo_slug": "dev-five-git/devup-ui",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/skl_dev_five_git_devup_ui_development_devup__562b173a/readme"
}