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: [react(), DevupUI({
7    // no extract css
8    extractCss: false,
9})],
10})
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    // no extract css
8    extractCss: false,
9})],
10})

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

Project Examples

• Next.js Example
• Vite Example
• Library with Vite Example