Features

Devup UI provides complete CSS-in-JS syntax coverage with zero runtime overhead. Every pattern you know from styled-components and Emotion works seamlessly — but without the performance cost.

Complete Syntax Coverage

Unlike other zero-runtime solutions that limit what you can do, Devup UI handles every CSS-in-JS pattern at build time.

How It Works

Devup UI transforms your components at build time. Class names are generated using compact base-37 encoding for minimal CSS output.

1// You write:
2const example = <Box bg="red" p={4} />
3
4// Devup UI generates:
5const generated = <div className="a b" />
6
7// CSS output:
8// .a { background-color: red; }
9// .b { padding: 16px; }  /* 4 * 4 = 16px */
1// You write:
2const example = <Box bg="red" p={4} />
3
4// Devup UI generates:
5const generated = <div className="a b" />
6
7// CSS output:
8// .a { background-color: red; }
9// .b { padding: 16px; }  /* 4 * 4 = 16px */

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

Class name sequence: a, b, ... z, _, aa, ab, ... az, a0, ... a9, a_, ba, ...

Responsive Design

Full responsive support with array syntax. Each index corresponds to a breakpoint.

1// You write:
2const example = <Box bg={['red', 'blue', 'green']} />
3
4// Devup UI generates:
5const generated = <div className="a b c" />
6
7// CSS output with media queries for each breakpoint
1// You write:
2const example = <Box bg={['red', 'blue', 'green']} />
3
4// Devup UI generates:
5const generated = <div className="a b c" />
6
7// CSS output with media queries for each breakpoint

Dynamic Values

Variables are automatically converted to CSS custom properties.

1// You write:
2const example = <Box bg={colorVariable} />
3
4// Devup UI generates:
5const generated = <div className="a" style={{ '--a': colorVariable }} />
6
7// CSS output:
8// .a { background-color: var(--a); }
1// You write:
2const example = <Box bg={colorVariable} />
3
4// Devup UI generates:
5const generated = <div className="a" style={{ '--a': colorVariable }} />
6
7// CSS output:
8// .a { background-color: var(--a); }

Conditional Expressions

Ternary operators and logical expressions are statically analyzed.

1// You write:
2const example = <Box bg={isActive ? 'blue' : dynamicColor} />
3
4// Devup UI generates:
5const generated = (
6  <div className={isActive ? 'a' : 'b'} style={{ '--b': dynamicColor }} />
7)
1// You write:
2const example = <Box bg={isActive ? 'blue' : dynamicColor} />
3
4// Devup UI generates:
5const generated = (
6  <div className={isActive ? 'a' : 'b'} style={{ '--b': dynamicColor }} />
7)

Complex Expressions

Combine responsive arrays with conditionals — Devup UI handles it all.

1// You write:
2const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
3
4// Devup UI generates:
5const generated = (
6  <div
7    className={`a b ${isActive ? 'c' : 'd'}`}
8    style={{ '--d': dynamicColor }}
9  />
10)
1// You write:
2const example = <Box bg={['red', 'blue', isActive ? 'green' : dynamicColor]} />
3
4// Devup UI generates:
5const generated = (
6  <div
7    className={`a b ${isActive ? 'c' : 'd'}`}
8    style={{ '--d': dynamicColor }}
9  />
10)

Pseudo Selectors

Use underscore prefix for pseudo selectors: _hover, _focus, _active, _disabled, and more.

1// You write:
2const example = (
3  <Box
4    _active={{ bg: 'red' }}
5    _focus={{ bg: 'green' }}
6    _hover={{ bg: 'blue' }}
7    bg="white"
8  />
9)
10
11// Devup UI generates:
12const generated = <div className="a b c d" />
13
14// CSS output:
15// .a { background-color: white; }
16// .b:hover { background-color: blue; }
17// .c:focus { background-color: green; }
18// .d:active { background-color: red; }
1// You write:
2const example = (
3  <Box
4    _active={{ bg: 'red' }}
5    _focus={{ bg: 'green' }}
6    _hover={{ bg: 'blue' }}
7    bg="white"
8  />
9)
10
11// Devup UI generates:
12const generated = <div className="a b c d" />
13
14// CSS output:
15// .a { background-color: white; }
16// .b:hover { background-color: blue; }
17// .c:focus { background-color: green; }
18// .d:active { background-color: red; }

Responsive + Pseudo Selectors

Combine responsive arrays with pseudo selectors for powerful responsive interactions.

1// You write:
2const example = <Box _hover={{ bg: ['red', 'blue'] }} />
3
4// Equivalent syntax:
5const example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
1// You write:
2const example = <Box _hover={{ bg: ['red', 'blue'] }} />
3
4// Equivalent syntax:
5const example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />

Type-Safe Theming

Define themes in devup.json with full TypeScript support.

1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3",
6        "text": "#000"
7      },
8      "dark": {
9        "primary": "#3291ff",
10        "text": "#fff"
11      }
12    },
13    "typography": {
14      "heading": {
15        "fontFamily": "Pretendard",
16        "fontSize": "24px",
17        "fontWeight": 700,
18        "lineHeight": 1.3
19      }
20    }
21  }
22}
1{
2  "theme": {
3    "colors": {
4      "default": {
5        "primary": "#0070f3",
6        "text": "#000"
7      },
8      "dark": {
9        "primary": "#3291ff",
10        "text": "#fff"
11      }
12    },
13    "typography": {
14      "heading": {
15        "fontFamily": "Pretendard",
16        "fontSize": "24px",
17        "fontWeight": 700,
18        "lineHeight": 1.3
19      }
20    }
21  }
22}

1// Type-safe theme tokens with autocomplete
2const textExample = <Text color="$primary" />
3const boxExample = <Box typography="$heading" />
1// Type-safe theme tokens with autocomplete
2const textExample = <Text color="$primary" />
3const boxExample = <Box typography="$heading" />

Theme switching happens via CSS variables — zero JavaScript execution required.

styled() API

Familiar API for styled-components and Emotion users.

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})
12
13const Button = styled('button', {
14  bg: 'blue',
15  color: 'white',
16  px: 4, // 4 * 4 = 16px
17  py: 2, // 2 * 4 = 8px
18  borderRadius: '4px',
19  cursor: 'pointer',
20  _hover: { bg: 'darkblue' },
21  _active: { bg: 'navy' },
22})
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})
12
13const Button = styled('button', {
14  bg: 'blue',
15  color: 'white',
16  px: 4, // 4 * 4 = 16px
17  py: 2, // 2 * 4 = 8px
18  borderRadius: '4px',
19  cursor: 'pointer',
20  _hover: { bg: 'darkblue' },
21  _active: { bg: 'navy' },
22})

css() API

Create reusable style objects.

1import { css } from '@devup-ui/react'
2
3const cardStyles = css({
4  bg: 'white',
5  p: 4, // 4 * 4 = 16px
6  borderRadius: '8px',
7})
8
9const example = <Box {...cardStyles} />
1import { css } from '@devup-ui/react'
2
3const cardStyles = css({
4  bg: 'white',
5  p: 4, // 4 * 4 = 16px
6  borderRadius: '8px',
7})
8
9const example = <Box {...cardStyles} />

globalCss() API

Define global styles that are extracted at build time.

1import { globalCss } from '@devup-ui/react'
2
3globalCss({
4  body: { margin: 0, fontFamily: 'Pretendard' },
5  '*': { boxSizing: 'border-box' },
6})
1import { globalCss } from '@devup-ui/react'
2
3globalCss({
4  body: { margin: 0, fontFamily: 'Pretendard' },
5  '*': { boxSizing: 'border-box' },
6})

keyframes() API

Define CSS animations.

1import { keyframes } from '@devup-ui/react'
2
3const spin = keyframes({
4  from: { transform: 'rotate(0deg)' },
5  to: { transform: 'rotate(360deg)' },
6})
7
8const example = <Box animation={`${spin} 1s linear infinite`} />
1import { keyframes } from '@devup-ui/react'
2
3const spin = keyframes({
4  from: { transform: 'rotate(0deg)' },
5  to: { transform: 'rotate(360deg)' },
6})
7
8const example = <Box animation={`${spin} 1s linear infinite`} />