Features

Many css in js solutions are designed to be used with JavaScript, but Devup UI is designed to be used without JavaScript.

Devup UI is a CSS in JS preprocessor that does not require runtime.

Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor.

We develop a preprocessor that considers all grammatical cases.

How it works

1const before = <Box bg="red" />
2
3const after = <div className="d0" />
1const before = <Box bg="red" />
2
3const after = <div className="d0" />

Responsive

Devup UI supports responsive design.

1const before = <Box bg={['red', 'blue']} />
2
3const after = <div className="d0 d1" />
1const before = <Box bg={['red', 'blue']} />
2
3const after = <div className="d0 d1" />

Variables

Devup UI supports variables.

1const before = <Box bg={colorVariable} />
2
3const after = (
4  <div
5    className="d0"
6    style={{
7      '--d0': colorVariable,
8    }}
9  />
10)
1const before = <Box bg={colorVariable} />
2
3const after = (
4  <div
5    className="d0"
6    style={{
7      '--d0': colorVariable,
8    }}
9  />
10)

Theme

Devup UI supports theme.

1{
2  "theme": {
3    "colors": {
4      "default": {
5        "text": "#000"
6      },
7      "dark": {
8        "text": "white"
9      }
10    }
11  }
12}
1{
2  "theme": {
3    "colors": {
4      "default": {
5        "text": "#000"
6      },
7      "dark": {
8        "text": "white"
9      }
10    }
11  }
12}

1<Text color="$text" />
1<Text color="$text" />

Expressions

Devup UI supports expressions.

1const before = <Box bg={a > b ? 'yellow' : variable} />
2
3const after = (
4  <Box
5    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
6    style={{
7      '--d2': variable,
8    }}
9  />
10)
1const before = <Box bg={a > b ? 'yellow' : variable} />
2
3const after = (
4  <Box
5    className={`d0 d1 ${a > b ? 'd2' : 'd3'}`}
6    style={{
7      '--d2': variable,
8    }}
9  />
10)

Pseudo Selector

Devup UI supports pseudo selector.

1const before = <Box _hover={{ bg: 'red' }} />
2
3const after = <Box className="d0" />
1const before = <Box _hover={{ bg: 'red' }} />
2
3const after = <Box className="d0" />