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

<Box bg={"red"}/>

<Box className={"d0"}/>

Responsive

Devup UI supports responsive design.

<Box bg={["red", "blue"]}/>

<Box className={"d0 d1"}/>

Variables

Devup UI supports variables.

<Box bg={colorVariable}/>
<Box className={"d0"} style={{
    "--d0": colorVariable
}}/>

Theme

Devup UI supports theme.

{
  "theme": {
    "colors": {
      "default": {
        "text": "#000"
      },
      "dark": {
        "text": "white"
      }
    }
  }
}

<Text color="$text"/>

Expressions

Devup UI supports expressions.

<Box bg={a > b ? "yellow" : variable}/>
<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
    "--d2": variable
}}/>

Pseudo Selector

Devup UI supports pseudo selector.

<Box _hover={{ bg: "red" }}/>

<Box className={"d0"} />