Installation

Install @devup-ui/react

Install the package in your project directory with npm.

1npm install @devup-ui/react
1npm install @devup-ui/react

Using Devup UI with Next.js

If you are using Next.js, you can install the Next.js plugin.

1npm install @devup-ui/next-plugin
1npm install @devup-ui/next-plugin

After installing the plugin, you can use the plugin in your Next.js project.

1// next.config.js
2
3import { DevupUI } from '@devup-ui/next-plugin'
4
5export default DevupUI({})
1// next.config.js
2
3import { DevupUI } from '@devup-ui/next-plugin'
4
5export default DevupUI({})

Using Devup UI with Vite

If you are using Vite, you can install the Vite plugin.

1npm install @devup-ui/vite-plugin
1npm install @devup-ui/vite-plugin

After installing the plugin, you can use the plugin in your Vite project.

1import { DevupUI } from '@devup-ui/vite-plugin'
2import react from '@vitejs/plugin-react'
3import { defineConfig } from 'vite'
4
5export default defineConfig({
6  plugins: [react(), DevupUI()],
7})
1import { DevupUI } from '@devup-ui/vite-plugin'
2import react from '@vitejs/plugin-react'
3import { defineConfig } from 'vite'
4
5export default defineConfig({
6  plugins: [react(), DevupUI()],
7})

If you have developed a UI library using Devup UI, you can use the library mode.

1import { DevupUI } from '@devup-ui/vite-plugin'
2import react from '@vitejs/plugin-react'
3import { defineConfig } from 'vite'
4
5export default defineConfig({
6  plugins: [
7    react(),
8    DevupUI({
9      // no extract css
10      extractCss: false,
11    }),
12  ],
13})
1import { DevupUI } from '@devup-ui/vite-plugin'
2import react from '@vitejs/plugin-react'
3import { defineConfig } from 'vite'
4
5export default defineConfig({
6  plugins: [
7    react(),
8    DevupUI({
9      // no extract css
10      extractCss: false,
11    }),
12  ],
13})

Using Devup UI with Rsbuild

If you are using rsbuild, you can install the rsbuild plugin.

1npm install @devup-ui/rsbuild-plugin
1npm install @devup-ui/rsbuild-plugin

After installing the plugin, you can use the plugin in your rsbuild project.

1// rsbuild.config.mjs
2
3import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'
4import { defineConfig } from '@rsbuild/core'
5import { pluginReact } from '@rsbuild/plugin-react'
6
7export default defineConfig({
8  plugins: [pluginReact(), DevupUIRsbuildPlugin()],
9})
1// rsbuild.config.mjs
2
3import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'
4import { defineConfig } from '@rsbuild/core'
5import { pluginReact } from '@rsbuild/plugin-react'
6
7export default defineConfig({
8  plugins: [pluginReact(), DevupUIRsbuildPlugin()],
9})

Using Devup UI with Webpack

If you are using Webpack directly, you can install the Webpack plugin.

1npm install @devup-ui/webpack-plugin
1npm install @devup-ui/webpack-plugin

Add the plugin to your Webpack configuration.

1// webpack.config.js
2
3import { DevupUIWebpackPlugin } from '@devup-ui/webpack-plugin'
4
5export default {
6  plugins: [new DevupUIWebpackPlugin()],
7}
1// webpack.config.js
2
3import { DevupUIWebpackPlugin } from '@devup-ui/webpack-plugin'
4
5export default {
6  plugins: [new DevupUIWebpackPlugin()],
7}

Using Devup UI with Bun

If you are using Bun as the bundler, install the Bun plugin with Devup UI.

1bun add @devup-ui/react @devup-ui/bun-plugin
1bun add @devup-ui/react @devup-ui/bun-plugin

Import the plugin before running your Bun build so it can register itself with Bun.

1// build.ts
2
3import '@devup-ui/bun-plugin'
4
5await Bun.build({
6  entrypoints: ['./src/index.tsx'],
7  outdir: './dist',
8})
1// build.ts
2
3import '@devup-ui/bun-plugin'
4
5await Bun.build({
6  entrypoints: ['./src/index.tsx'],
7  outdir: './dist',
8})