Zero Config · Zero FOUC · Zero Runtime · Complete CSS-in-JS Syntax Coverage
English | 한국어
Devup UI isn't just another CSS-in-JS library — it's the next evolution.
Traditional 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.
- Complete Syntax Coverage: Every CSS-in-JS pattern you know — variables, conditionals, responsive arrays, pseudo-selectors — all fully supported
- Familiar API:
styled()API compatible with styled-components and Emotion patterns - True Zero Runtime: No JavaScript execution for styling at runtime. Period.
- Smallest Bundle Size: Optimized class names (
a,b, ...aa,ab) minimize CSS output - Fastest Build Times: Rust + WebAssembly delivers unmatched preprocessing speed
npm install @devup-ui/react # on next.js npm install @devup-ui/next-plugin # on vite npm install @devup-ui/vite-plugin # on rsbuild npm install @devup-ui/rsbuild-plugin # on webpack npm install @devup-ui/webpack-plugin
- Preprocessor — All CSS extraction happens at build time
- Zero Config — Works out of the box with sensible defaults
- Zero FOUC — No flash of unstyled content, no Provider required
- Zero Runtime — No client-side JavaScript for styling
- RSC Support — Full React Server Components compatibility
- Library Mode — Build component libraries with extracted styles
- Dynamic Themes — Zero-cost theme switching via CSS variables
- Type-Safe Themes — Full TypeScript support for theme tokens
- Smallest & Fastest — Proven by benchmarks
Next.js Build Time and Build Size (github action - ubuntu-latest)
| Library | Version | Build Time | Build Size |
|---|---|---|---|
| tailwindcss | 4.1.13 | 19.31s | 59,521,539 bytes |
| styleX | 0.15.4 | 41.78s | 86,869,452 bytes |
| vanilla-extract | 1.17.4 | 19.50s | 61,494,033 bytes |
| kuma-ui | 1.5.9 | 20.93s | 69,924,179 bytes |
| panda-css | 1.3.1 | 20.64s | 64,573,260 bytes |
| chakra-ui | 3.27.0 | 28.81s | 222,435,802 bytes |
| mui | 7.3.2 | 20.86s | 97,964,458 bytes |
| devup-ui(per-file css) | 1.0.18 | 16.90s | 59,540,459 bytes |
| devup-ui(single css) | 1.0.18 | 17.05s | 59,520,196 bytes |
| tailwindcss(turbopack) | 4.1.13 | 6.72s | 5,355,082 bytes |
| devup-ui(single css+turbopack) | 1.0.18 | 10.34s | 4,772,050 bytes |
Devup UI transforms your components at build time. Class names are generated using a compact base-37 encoding for minimal CSS size.
Basic transformation:
// You write: const variable = <Box _hover={{ bg: 'blue' }} bg="red" p={4} /> // Devup UI generates: const variable = <div className="a b c" /> // With CSS: // .a { background-color: red; } // .b { padding: 1rem; } // .c:hover { background-color: blue; }
Dynamic values become CSS variables:
// You write: const example = <Box bg={colorVariable} /> // Devup UI generates: const example = <div className="a" style={{ '--a': colorVariable }} /> // With CSS: // .a { background-color: var(--a); }
Complex expressions and responsive arrays — fully supported:
// You write: const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} /> // Devup UI generates: const example = ( <div className={`a b ${isActive ? 'c' : 'd'}`} style={{ '--d': dynamicColor }} /> ) // With responsive CSS for each breakpoint
Type-safe theming:
devup.json
{
"theme": {
"colors": {
"default": {
"primary": "#0070f3",
"text": "#000"
},
"dark": {
"primary": "#3291ff",
"text": "#fff"
}
},
"typography": {
"heading": {
"fontFamily": "Pretendard",
"fontSize": "24px",
"fontWeight": 700,
"lineHeight": 1.3
}
}
}
}// Type-safe theme tokens const textExample = <Text color="$primary" /> const boxExample = <Box typography="$heading" />
Responsive + Pseudo selectors together:
// Responsive with pseudo selector const example = <Box _hover={{ bg: ['red', 'blue'] }} /> // Equivalent syntax const example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
styled-components / Emotion compatible styled() API:
import { styled } from '@devup-ui/react' // Familiar syntax for styled-components and Emotion users const Card = styled('div', { bg: 'white', p: 4, // 4 * 4 = 16px borderRadius: '8px', boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)', _hover: { boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)', }, }) const Button = styled('button', { px: 4, // 4 * 4 = 16px py: 2, // 2 * 4 = 8px borderRadius: '4px', cursor: 'pointer', }) // Usage const cardExample = <Card>Content</Card> const buttonExample = <Button>Click me</Button>
- Styled System
- Chakra UI
- Theme UI
- Vanilla Extract
- Rainbow Sprinkles
- Kuma UI
To set up the development environment, install the following packages:
bun install bun run build cargo install cargo-tarpaulin cargo install wasm-pack
After installation, run bun run test to ensure everything works correctly.