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

Benchmarks on Next.js (GitHub Actions - ubuntu-latest):

Get Started

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