What is Devup UI?

Devup UI is not just another CSS-in-JS library — it's the future of CSS-in-JS itself.

Devup UI is a zero-runtime CSS-in-JS preprocessor powered by Rust and WebAssembly. It transforms all your styles at build time, completely eliminating runtime overhead while providing full CSS-in-JS syntax coverage.

The Problem with Traditional CSS-in-JS

Traditional CSS-in-JS solutions force you to choose between:

• Developer Experience: Intuitive APIs, co-located styles, dynamic theming
• Performance: No runtime overhead, fast page loads, optimal Core Web Vitals

Libraries like styled-components and Emotion offer great DX but execute JavaScript at runtime to generate styles. Zero-runtime alternatives like Vanilla Extract sacrifice some flexibility for performance.

The Devup UI Solution

Devup UI eliminates this trade-off entirely. Our Rust-powered preprocessor analyzes your code at build time and handles every CSS-in-JS pattern:

• Variables — Dynamic values become CSS custom properties
• Conditionals — Ternary expressions are statically analyzed
• Responsive Arrays — Breakpoint-based styles are pre-generated
• Pseudo Selectors — _hover, _focus, _active work seamlessly
• Themes — Type-safe theme tokens with zero-cost switching

Key Advantages

How It Works

1// You write familiar CSS-in-JS syntax
2const example = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
3
4// Devup UI transforms it at build time
5const generated = <div className="a b c" />
6
7// With optimized atomic CSS
8// .a { background-color: red; }
9// .b { padding: 16px; }  /* 4 * 4 = 16px */
10// .c:hover { background-color: blue; }
1// You write familiar CSS-in-JS syntax
2const example = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />
3
4// Devup UI transforms it at build time
5const generated = <div className="a b c" />
6
7// With optimized atomic CSS
8// .a { background-color: red; }
9// .b { padding: 16px; }  /* 4 * 4 = 16px */
10// .c:hover { background-color: blue; }

Numeric values are multiplied by 4. p={4} becomes padding: 16px.

Class names use compact base-37 encoding (a, b, ... z, _, aa, ab, ...) for minimal CSS output.

Familiar API

If you've used styled-components or Emotion, you'll feel right at home:

1import { styled } from '@devup-ui/react'
2
3const Card = styled('div', {
4  bg: 'white',
5  p: 4, // 4 * 4 = 16px
6  borderRadius: '8px',
7  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
8  _hover: {
9    boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',
10  },
11})
1import { styled } from '@devup-ui/react'
2
3const Card = styled('div', {
4  bg: 'white',
5  p: 4, // 4 * 4 = 16px
6  borderRadius: '8px',
7  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
8  _hover: {
9    boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',
10  },
11})

Proven Performance

Latest Next.js 16.3.3 cold-build results from GitHub Actions run 33254030962 on ubuntu-latest. Devup rows use @devup-ui/react 1.0.40 and @devup-ui/next-plugin 1.0.83. All Next.js builds use the native TypeScript 7 CLI for type checking.

Webpack values are one cold build:

Turbopack values are medians of six cold builds in alternating order. Build size is the output from the same commit's representative run:

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

Get Started

Ready to experience the future of CSS-in-JS? Head to the Installation guide to get started in minutes.