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 = <div className="d0" style={{
4    "--d0": colorVariable
5}}/>
1const before = <Box bg={colorVariable} />
2
3const after = <div className="d0" style={{
4    "--d0": colorVariable
5}}/>

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 = <Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
4    "--d2": variable
5}}/>
1const before = <Box bg={a > b ? "yellow" : variable}/>
2
3const after = <Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
4    "--d2": variable
5}}/>

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"}/>