Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor

---

---

English | 한국어

Install

npm install @devup-ui/react

# on next.js
npm install @devup-ui/next-plugin

# on vite
npm install @devup-ui/vite-plugin

Features

• Preprocessor
• Zero Config
• Zero FOUC
• Zero Runtime
• RSC Support
• Must not use JavaScript, client-side logic, or hybrid solutions
• Support Library mode
• Zero Cost Dynamic Theme Support based on CSS Variables
• Theme with Typing
• Smallest size, fastest speed

Inspirations

• Styled System
• Chakra UI
• Theme UI
• Vanilla Extract
• Rainbow Sprinkles
• Kuma UI

Comparison Benchmarks

Next.js Build Time and Build Size (github action - ubuntu-latest)

Library	Version	Build Time	Build Size
kuma-ui	1.5.9	20.589s	63,256,341b
chakra-ui	3.22.0	28.988s	193,241,174b
mui	7.2.0	21.209s	88,146,983b
devup-ui	1.0.10	17.130s	53,861,412b

How it works

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.

const before = <Box bg={"red"}/>

const after = <div className="d0"/>

Variables are fully supported.

const before = <Box bg={colorVariable}/>

const after = <div className="d0" style={{
    "--d0": colorVariable
}}/>

Various expressions and responsiveness are also fully supported.

const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>

const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
    "--d2": variable
}}/>

Support Theme with Typing

devup.json

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

// Type Safe
<Text color="$text"/>

Support Responsive And Pseudo Selector

You can use responsive and pseudo selector.

// Responsive with Selector
const box = <Box _hover={{bg: ["red", "blue"]}}/>

// Same
const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>