{"id":34947922,"url":"https://github.com/dev-five-git/devup-ui","last_synced_at":"2026-04-07T08:02:56.987Z","repository":{"id":272028720,"uuid":"910370253","full_name":"dev-five-git/devup-ui","owner":"dev-five-git","description":"JSX Zero-Runtime UI Styling Library","archived":false,"fork":false,"pushed_at":"2026-02-11T21:22:48.000Z","size":39132,"stargazers_count":351,"open_issues_count":9,"forks_count":28,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-02-18T04:19:57.315Z","etag":null,"topics":["css","css-in-js","hacktoberfest","react","rust","zero-runtime"],"latest_commit_sha":null,"homepage":"https://devup-ui.com","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dev-five-git.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":"dev-five-git","patreon":"JeongMinOh","open_collective":"devup-ui"}},"created_at":"2024-12-31T05:15:33.000Z","updated_at":"2026-02-12T10:30:33.000Z","dependencies_parsed_at":"2025-12-16T19:02:37.534Z","dependency_job_id":null,"html_url":"https://github.com/dev-five-git/devup-ui","commit_stats":null,"previous_names":["dev-five-git/devup-ui"],"tags_count":664,"template":false,"template_full_name":null,"purl":"pkg:github/dev-five-git/devup-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-five-git%2Fdevup-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-five-git%2Fdevup-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-five-git%2Fdevup-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-five-git%2Fdevup-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-five-git","download_url":"https://codeload.github.com/dev-five-git/devup-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-five-git%2Fdevup-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29623547,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T13:04:20.082Z","status":"ssl_error","status_checked_at":"2026-02-19T13:03:33.775Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-in-js","hacktoberfest","react","rust","zero-runtime"],"created_at":"2025-12-26T20:50:56.473Z","updated_at":"2026-04-02T13:25:18.733Z","avatar_url":"https://github.com/dev-five-git.png","language":"Rust","funding_links":["https://github.com/sponsors/dev-five-git","https://patreon.com/JeongMinOh","https://opencollective.com/devup-ui"],"categories":["Rust"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/dev-five-git/devup-ui/main/media/logo.svg\" alt=\"Devup UI logo\" width=\"300\" /\u003e\n\u003c/div\u003e\n\n\u003ch3 align=\"center\"\u003e\n    The Future of CSS-in-JS — Zero Runtime, Full Power\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003cstrong\u003eZero Config · Zero FOUC · Zero Runtime · Complete CSS-in-JS Syntax Coverage\u003c/strong\u003e\n\u003c/p\u003e\n\n---\n\n\u003cdiv\u003e\n\u003cimg src='https://img.shields.io/npm/v/@devup-ui/react'\u003e\n\u003cimg src='https://img.shields.io/bundlephobia/minzip/@devup-ui/react'\u003e\n\u003cimg alt=\"Github Checks\" src=\"https://badgen.net/github/checks/dev-five-git/devup-ui\"/\u003e\n\u003cimg alt=\"Apache-2.0 License\" src=\"https://img.shields.io/github/license/dev-five-git/devup-ui\"/\u003e\n\u003ca href=\"https://www.npmjs.com/package/@devup-ui/react\"\u003e\n\u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@devup-ui/react.svg?style=flat\"/\u003e\n\u003c/a\u003e\n\u003ca href=\"https://badgen.net/github/stars/dev-five-git/devup-ui\"\u003e\n\u003cimg alt=\"Github Stars\" src=\"https://badgen.net/github/stars/dev-five-git/devup-ui\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://discord.gg/8zjcGc7cWh\"\u003e\n\u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/1321362173619994644.svg?label=\u0026logo=discord\u0026logoColor=ffffff\u0026color=7389D8\u0026labelColor=6A7EC2\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://codecov.io/gh/dev-five-git/devup-ui\" \u003e\n \u003cimg src=\"https://codecov.io/gh/dev-five-git/devup-ui/graph/badge.svg?token=8I5GMB2X5B\"/\u003e\n\u003c/a\u003e\n\u003c/div\u003e\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 \u0026 Fastest** — Proven by benchmarks\n\n## Comparison Benchmarks\n\nNext.js Build Time and Build Size (github action - ubuntu-latest)\n\n| Library                            | Version | Build Time | Build Size           |\n| ---------------------------------- | ------- | ---------- | -------------------- |\n| tailwindcss                        | 4.1.13  | 19.31s     | 59,521,539 bytes     |\n| styleX                             | 0.15.4  | 41.78s     | 86,869,452 bytes     |\n| vanilla-extract                    | 1.17.4  | 19.50s     | 61,494,033 bytes     |\n| kuma-ui                            | 1.5.9   | 20.93s     | 69,924,179 bytes     |\n| panda-css                          | 1.3.1   | 20.64s     | 64,573,260 bytes     |\n| chakra-ui                          | 3.27.0  | 28.81s     | 222,435,802 bytes    |\n| mui                                | 7.3.2   | 20.86s     | 97,964,458 bytes     |\n| **devup-ui(per-file css)**         | 1.0.18  | **16.90s** | 59,540,459 bytes     |\n| **devup-ui(single css)**           | 1.0.18  | **17.05s** | **59,520,196 bytes** |\n| tailwindcss(turbopack)             | 4.1.13  | 6.72s      | 5,355,082 bytes      |\n| **devup-ui(single css+turbopack)** | 1.0.18  | 10.34s     | **4,772,050 bytes**  |\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 = \u003cBox _hover={{ bg: 'blue' }} bg=\"red\" p={4} /\u003e\n\n// Devup UI generates:\nconst variable = \u003cdiv className=\"a b c\" /\u003e\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 = \u003cBox bg={colorVariable} /\u003e\n\n// Devup UI generates:\nconst example = \u003cdiv className=\"a\" style={{ '--a': colorVariable }} /\u003e\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 = \u003cBox bg={['red', 'blue', isActive ? 'green' : dynamicColor]} /\u003e\n\n// Devup UI generates:\nconst example = (\n  \u003cdiv\n    className={`a b ${isActive ? 'c' : 'd'}`}\n    style={{ '--d': dynamicColor }}\n  /\u003e\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 = \u003cText color=\"$primary\" /\u003e\nconst boxExample = \u003cBox typography=\"$heading\" /\u003e\n```\n\n**Responsive + Pseudo selectors together:**\n\n```tsx\n// Responsive with pseudo selector\nconst example = \u003cBox _hover={{ bg: ['red', 'blue'] }} /\u003e\n\n// Equivalent syntax\nconst example2 = \u003cBox _hover={[{ bg: 'red' }, { bg: 'blue' }]} /\u003e\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 = \u003cCard\u003eContent\u003c/Card\u003e\nconst buttonExample = \u003cButton\u003eClick me\u003c/Button\u003e\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-five-git%2Fdevup-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-five-git%2Fdevup-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-five-git%2Fdevup-ui/lists"}