devup-ui

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 → .