| name | devup-ui |
| description | [devup-ui] Routing-first front door for Devup UI โ a zero-runtime CSS-in-JS library whose Rust + WebAssembly preprocessor extracts every style at build time, so no styling JavaScript ships at runtime. Use to adopt/integrate Devup UI, wire the build-time plugin into Next.js/Vite/Rsbuild/Webpack/Bun, write styles with Box/css props or the styled-components-compatible styled() API, set up type-safe theming with devup.json, or migrate off styled-components/Emotion/Tailwind/Panda/vanilla-extract to zero runtime. |
| allowed-tools | Read Write Edit Bash Grep Glob WebFetch |
| aliases | /devup-ui /devup |
| compatibility | Requires Node.js (LTS) and a supported bundler. Build-time extraction runs through one of @devup-ui/next-plugin, @devup-ui/vite-plugin, @devup-ui/rsbuild-plugin, @devup-ui/webpack-plugin, or @devup-ui/bun-plugin. Targets React 18/19, including React Server Components (no client Provider, Zero FOUC). Works with npm, pnpm, yarn, or bun.
|
| license | Apache-2.0 |
| metadata | {"tags":"devup-ui, css-in-js, zero-runtime, build-time-extraction, styled, theming, react, nextjs, vite, rust, wasm","version":"1.0","source":"https://github.com/dev-five-git/devup-ui","docs":"https://devup-ui.com"} |
devup-ui โ routing-first zero-runtime CSS-in-JS adoption
Keyword: devup-ui ยท @devup-ui/react ยท zero runtime ยท build-time CSS extraction ยท devup.json
Devup UI processes all styles at build time with a Rust-powered preprocessor.
There is no runtime style engine: pick the matching bundler plugin first, then
write styles; the plugin is what makes everything else work.
Devup UI removes the developer-experience vs. performance trade-off of traditional
CSS-in-JS by extracting styles at compile time:
- Zero Runtime โ no JavaScript executes for styling at runtime
- Zero Config / Zero FOUC โ no client Provider, no style flash
- Complete syntax coverage โ variables, conditionals, responsive arrays, pseudo selectors
- Familiar API โ
styled() compatible with styled-components / Emotion patterns
- Smallest bundle โ base-37 class names (
a, b, โฆ aa, ab); dynamic values become CSS variables
- RSC support โ works inside React Server Components
When to use this skill
- The user wants to add Devup UI to a project and needs the right bundler plugin wired in
- The user is choosing between Next.js / Vite / Rsbuild / Webpack / Bun integration
- The user wants to write styles with
Box/css props or the styled() API and isn't sure how the shorthand props (bg, px, responsive arrays, _hover) map
- The user wants type-safe theming with
devup.json (colors, typography, dynamic theme switching via CSS variables)
- The user wants to migrate from styled-components / Emotion / Tailwind / Panda / vanilla-extract to a zero-runtime setup
- The user keeps reaching for a runtime CSS-in-JS Provider and needs to know it is unnecessary (and harmful to RSC) with Devup UI
Route out when the real need is broader than styling mechanics: token/visual-language
governance โ design-system; reusable-component API/anatomy โ design-system;
layout/breakpoint strategy โ ; accessibility โ ;
bundle/RSC/rerender performance beyond styling โ .
