dev-five-git · owjs3901 · Jul 17, 2025 · Jul 17, 2025
diff --git a/README.md b/README.md
@@ -70,11 +70,12 @@ npm install @devup-ui/vite-plugin
 
 Next.js Build Time and Build Size (AMD Ryzen 9 9950X, 128GB RAM, Windows 11)
 
-| Library   | Build Time | Build Size   |
-|-----------|------------|--------------|
-| kuma-ui   | 20.933s    | 57,295,073b  |
-| chakra-ui | 36.961s    | 129,527,610b |
-| devup-ui  | 15.162s    | 48,047,678b  |
+| Library      | Version  | Build Time | Build Size      |
+|--------------|----------|------------|-----------------|
+| kuma-ui      | 1.5.9    | 13.948s    | 61,910,524b     |
+| chakra-ui    | 3.22.0   | 20.557s    | 189,541,604b    |
+| mui          | 7.2.0    | 20.002s    | 218,204,592b    |
+| devup-ui     | 1.0.10   | 10.583s    | 53,111,181b     |
 
 ## How it works
 

diff --git a/benchmark.js b/benchmark.js
@@ -20,6 +20,11 @@ function clearBuildFile() {
       recursive: true,
       force: true,
     })
+  if (existsSync('./benchmark/next-mui/.next'))
+    rmSync('./benchmark/next-mui/.next', {
+      recursive: true,
+      force: true,
+    })
   if (existsSync('./benchmark/next-devup-ui/df'))
     rmSync('./benchmark/next-devup-ui/df', {
       recursive: true,
@@ -63,6 +68,13 @@ execSync('pnpm -F next-chakra-ui-benchmark build', {
 console.timeEnd('chakra-ui')
 console.info('chakra-ui', checkDirSize('./benchmark/next-chakra-ui/.next'))
 
+console.time('mui')
+execSync('pnpm -F next-mui-benchmark build', {
+  stdio: 'inherit',
+})
+console.timeEnd('mui')
+console.info('mui', checkDirSize('./benchmark/next-mui/.next'))
+
 console.time('devup-ui')
 execSync('pnpm -F next-devup-ui-benchmark build', {
   stdio: 'inherit',

diff --git a/benchmark/next-mui/.gitignore b/benchmark/next-mui/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/benchmark/next-mui/README.md b/benchmark/next-mui/README.md
@@ -0,0 +1 @@
+## Nextjs App
diff --git a/benchmark/next-mui/next.config.mjs b/benchmark/next-mui/next.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  experimental: {
+    optimizePackageImports: ['@chakra-ui/react'],
+  },
+}
diff --git a/benchmark/next-mui/package.json b/benchmark/next-mui/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "next-mui-benchmark",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build --experimental-debug-memory-usage",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "7.2.0",
+    "next": "^15.4.1",
+    "next-themes": "^0.4.6",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-icons": "^5.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "typescript": "^5"
+  }
+}
diff --git a/benchmark/next-mui/public/file.svg b/benchmark/next-mui/public/file.svg
diff --git a/benchmark/next-mui/public/globe.svg b/benchmark/next-mui/public/globe.svg
diff --git a/benchmark/next-mui/public/next.svg b/benchmark/next-mui/public/next.svg
diff --git a/benchmark/next-mui/public/vercel.svg b/benchmark/next-mui/public/vercel.svg
diff --git a/benchmark/next-mui/public/window.svg b/benchmark/next-mui/public/window.svg
diff --git a/benchmark/next-mui/src/app/favicon.ico b/benchmark/next-mui/src/app/favicon.ico
diff --git a/benchmark/next-mui/src/app/layout.tsx b/benchmark/next-mui/src/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+
+import { Provider } from '../components/ui/provider'
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <Provider>{children}</Provider>
+      </body>
+    </html>
+  )
+}
diff --git a/benchmark/next-mui/src/app/page.tsx b/benchmark/next-mui/src/app/page.tsx
@@ -0,0 +1,52 @@
+'use client'
+
+import { Box, Typography } from '@mui/material'
+import { useState } from 'react'
+
+export default function HomePage() {
+  const [color, setColor] = useState('yellow')
+  const [enabled, setEnabled] = useState(false)
+
+  return (
+    <div>
+      <p
+        style={{
+          backgroundColor: 'blue',
+        }}
+      >
+        Track & field champions:
+      </p>
+      <Box
+        component="section"
+        sx={{
+          color,
+          cursor: 'pointer',
+          dataTestId: 'box',
+          fontSize: 32,
+          position: 'relative',
+          py: '28px',
+          '&:hover': {
+            bg: 'yellow',
+            cursor: 'cell',
+          },
+        }}
+      >
+        <Box>hello</Box>
+        <Box>hello</Box>
+      </Box>
+      <Typography color="$text">text</Typography>
+      <Box color={enabled ? 'green' : 'blue'} fontSize={[32]} pr="20px">
+        hello
+      </Box>
+      <Box fontSize={[12, 32]}>hello</Box>
+      <button
+        onClick={() => {
+          setColor('blue')
+          setEnabled((prev) => !prev)
+        }}
+      >
+        Change
+      </button>
+    </div>
+  )
+}
diff --git a/benchmark/next-mui/src/components/ui/avatar.tsx b/benchmark/next-mui/src/components/ui/avatar.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import type { GroupProps, SlotRecipeProps } from '@chakra-ui/react'
+import { Avatar as ChakraAvatar, Group } from '@chakra-ui/react'
+import * as React from 'react'
+
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
+
+export interface AvatarProps extends ChakraAvatar.RootProps {
+  name?: string
+  src?: string
+  srcSet?: string
+  loading?: ImageProps['loading']
+  icon?: React.ReactElement
+  fallback?: React.ReactNode
+}
+
+export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
+  function Avatar(props, ref) {
+    const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
+      props
+    return (
+      <ChakraAvatar.Root ref={ref} {...rest}>
+        <AvatarFallback icon={icon} name={name}>
+          {fallback}
+        </AvatarFallback>
+        <ChakraAvatar.Image loading={loading} src={src} srcSet={srcSet} />
+        {children}
+      </ChakraAvatar.Root>
+    )
+  },
+)
+
+interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
+  name?: string
+  icon?: React.ReactElement
+}
+
+const AvatarFallback = React.forwardRef<HTMLDivElement, AvatarFallbackProps>(
+  function AvatarFallback(props, ref) {
+    const { name, icon, children, ...rest } = props
+    return (
+      <ChakraAvatar.Fallback ref={ref} {...rest}>
+        {children}
+        {name != null && children == null && <>{getInitials(name)}</>}
+        {name == null && children == null && (
+          <ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
+        )}
+      </ChakraAvatar.Fallback>
+    )
+  },
+)
+
+function getInitials(name: string) {
+  const names = name.trim().split(' ')
+  const firstName = names[0] != null ? names[0] : ''
+  const lastName = names.length > 1 ? names[names.length - 1] : ''
+  return firstName && lastName
+    ? `${firstName.charAt(0)}${lastName.charAt(0)}`
+    : firstName.charAt(0)
+}
+
+interface AvatarGroupProps extends GroupProps, SlotRecipeProps<'avatar'> {}
+
+export const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
+  function AvatarGroup(props, ref) {
+    const { size, variant, borderless, ...rest } = props
+    return (
+      <ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
+        <Group ref={ref} gap="0" spaceX="-3" {...rest} />
+      </ChakraAvatar.PropsProvider>
+    )
+  },
+)
diff --git a/benchmark/next-mui/src/components/ui/button.tsx b/benchmark/next-mui/src/components/ui/button.tsx
@@ -0,0 +1,40 @@
+import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react'
+import {
+  AbsoluteCenter,
+  Button as ChakraButton,
+  Span,
+  Spinner,
+} from '@chakra-ui/react'
+import * as React from 'react'
+
+interface ButtonLoadingProps {
+  loading?: boolean
+  loadingText?: React.ReactNode
+}
+
+export interface ButtonProps extends ChakraButtonProps, ButtonLoadingProps {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(props, ref) {
+    const { loading, disabled, loadingText, children, ...rest } = props
+    return (
+      <ChakraButton ref={ref} disabled={loading || disabled} {...rest}>
+        {loading && !loadingText ? (
+          <>
+            <AbsoluteCenter display="inline-flex">
+              <Spinner color="inherit" size="inherit" />
+            </AbsoluteCenter>
+            <Span opacity={0}>{children}</Span>
+          </>
+        ) : loading && loadingText ? (
+          <>
+            <Spinner color="inherit" size="inherit" />
+            {loadingText}
+          </>
+        ) : (
+          children
+        )}
+      </ChakraButton>
+    )
+  },
+)
diff --git a/benchmark/next-mui/src/components/ui/checkbox.tsx b/benchmark/next-mui/src/components/ui/checkbox.tsx
@@ -0,0 +1,25 @@
+import { Checkbox as ChakraCheckbox } from '@chakra-ui/react'
+import * as React from 'react'
+
+export interface CheckboxProps extends ChakraCheckbox.RootProps {
+  icon?: React.ReactNode
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+  rootRef?: React.Ref<HTMLLabelElement>
+}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  function Checkbox(props, ref) {
+    const { icon, children, inputProps, rootRef, ...rest } = props
+    return (
+      <ChakraCheckbox.Root ref={rootRef} {...rest}>
+        <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+        <ChakraCheckbox.Control>
+          {icon || <ChakraCheckbox.Indicator />}
+        </ChakraCheckbox.Control>
+        {children != null && (
+          <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
+        )}
+      </ChakraCheckbox.Root>
+    )
+  },
+)
diff --git a/benchmark/next-mui/src/components/ui/close-button.tsx b/benchmark/next-mui/src/components/ui/close-button.tsx
@@ -0,0 +1,17 @@
+import type { ButtonProps } from '@chakra-ui/react'
+import { IconButton as ChakraIconButton } from '@chakra-ui/react'
+import * as React from 'react'
+import { LuX } from 'react-icons/lu'
+
+export type CloseButtonProps = ButtonProps
+
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(function CloseButton(props, ref) {
+  return (
+    <ChakraIconButton ref={ref} aria-label="Close" variant="ghost" {...props}>
+      {props.children ?? <LuX />}
+    </ChakraIconButton>
+  )
+})