Quick Start
Get up and running with Devup UI in 5 minutes.
1. Install Packages
1# Install core library 2npm install @devup-ui/react 3 4# Install plugin for your framework 5npm install @devup-ui/vite-plugin # for Vite 6npm install @devup-ui/next-plugin # for Next.js 7npm install @devup-ui/rsbuild-plugin # for Rsbuild1# Install core library 2npm install @devup-ui/react 3 4# Install plugin for your framework 5npm install @devup-ui/vite-plugin # for Vite 6npm install @devup-ui/next-plugin # for Next.js 7npm install @devup-ui/rsbuild-plugin # for Rsbuild
2. Configure Your Build Tool
Vite
1// vite.config.ts 2import { DevupUI } from '@devup-ui/vite-plugin' 3import react from '@vitejs/plugin-react' 4import { defineConfig } from 'vite' 5 6export default defineConfig({ 7 plugins: [react(), DevupUI()], 8})1// vite.config.ts 2import { DevupUI } from '@devup-ui/vite-plugin' 3import react from '@vitejs/plugin-react' 4import { defineConfig } from 'vite' 5 6export default defineConfig({ 7 plugins: [react(), DevupUI()], 8})
Next.js
1// next.config.js 2const { DevupUI } = require('@devup-ui/next-plugin') 3 4module.exports = DevupUI({ 5 // your Next.js config 6})1// next.config.js 2const { DevupUI } = require('@devup-ui/next-plugin') 3 4module.exports = DevupUI({ 5 // your Next.js config 6})
Rsbuild
1// rsbuild.config.mjs 2import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin' 3import { defineConfig } from '@rsbuild/core' 4import { pluginReact } from '@rsbuild/plugin-react' 5 6export default defineConfig({ 7 plugins: [pluginReact(), DevupUIRsbuildPlugin()], 8})1// rsbuild.config.mjs 2import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin' 3import { defineConfig } from '@rsbuild/core' 4import { pluginReact } from '@rsbuild/plugin-react' 5 6export default defineConfig({ 7 plugins: [pluginReact(), DevupUIRsbuildPlugin()], 8})
3. Create Your First Component
1import { Box, Text } from '@devup-ui/react'
2
3function Card() {
4 return (
5 <Box
6 bg="white"
7 borderRadius="8px"
8 boxShadow="0 2px 8px rgba(0,0,0,0.1)"
9 p={4}
10 >
11 <Text fontSize="20px" fontWeight={700}>
12 Hello Devup UI!
13 </Text>
14 <Text color="#666" mt={2}>
15 Zero runtime CSS-in-JS
16 </Text>
17 </Box>
18 )
19}
1import { Box, Text } from '@devup-ui/react'
2
3function Card() {
4 return (
5 <Box
6 bg="white"
7 borderRadius="8px"
8 boxShadow="0 2px 8px rgba(0,0,0,0.1)"
9 p={4}
10 >
11 <Text fontSize="20px" fontWeight={700}>
12 Hello Devup UI!
13 </Text>
14 <Text color="#666" mt={2}>
15 Zero runtime CSS-in-JS
16 </Text>
17 </Box>
18 )
19}
That's it! Run your dev server and see the result.
4. Add Theme (Optional)
Create devup.json at your project root:
1{ 2 "theme": { 3 "colors": { 4 "default": { 5 "primary": "#0070f3", 6 "text": "#000", 7 "textMuted": "#666", 8 "background": "#fff" 9 }, 10 "dark": { 11 "primary": "#3291ff", 12 "text": "#fff", 13 "textMuted": "#888", 14 "background": "#000" 15 } 16 } 17 } 18}1{ 2 "theme": { 3 "colors": { 4 "default": { 5 "primary": "#0070f3", 6 "text": "#000", 7 "textMuted": "#666", 8 "background": "#fff" 9 }, 10 "dark": { 11 "primary": "#3291ff", 12 "text": "#fff", 13 "textMuted": "#888", 14 "background": "#000" 15 } 16 } 17 } 18}
Now use theme tokens in your components:
1<Box bg="$background" p={4}> 2 <Text color="$text">Themed text</Text> 3 <Text color="$textMuted">Muted text</Text> 4 <Box bg="$primary" mt={2} p={2}> 5 <Text color="white">Primary background</Text> 6 </Box> 7</Box>1<Box bg="$background" p={4}> 2 <Text color="$text">Themed text</Text> 3 <Text color="$textMuted">Muted text</Text> 4 <Box bg="$primary" mt={2} p={2}> 5 <Text color="white">Primary background</Text> 6 </Box> 7</Box>
Understanding the Basics
Style Props
All components accept style props directly:
1<Box 2 bg="red" // background-color 3 borderRadius="8px" // border-radius 4 color="white" // color 5 h="200px" // height 6 m={2} // margin (2 * 4 = 8px) 7 p={4} // padding (4 * 4 = 16px) 8 w="100%" // width 9/>1<Box 2 bg="red" // background-color 3 borderRadius="8px" // border-radius 4 color="white" // color 5 h="200px" // height 6 m={2} // margin (2 * 4 = 8px) 7 p={4} // padding (4 * 4 = 16px) 8 w="100%" // width 9/>
Note: Numeric values for spacing props (
p,m,gap, etc.) are multiplied by 4. Sop={4}equalspadding: 16px.
Pseudo Selectors
Use underscore prefix for pseudo selectors:
1<Box 2 _active={{ bg: 'darkblue' }} 3 _hover={{ bg: 'blue', color: 'white' }} 4 bg="white" 5> 6 Hover me 7</Box>1<Box 2 _active={{ bg: 'darkblue' }} 3 _hover={{ bg: 'blue', color: 'white' }} 4 bg="white" 5> 6 Hover me 7</Box>
Responsive Design
Use arrays for responsive values:
1<Box 2 fontSize={['14px', null, '16px']} 3 p={[2, null, 4]} // 8px on mobile, 16px on tablet+ 4 w={['100%', null, '50%']} // 100% on mobile, 50% on tablet+ 5> 6 Responsive box 7</Box>1<Box 2 fontSize={['14px', null, '16px']} 3 p={[2, null, 4]} // 8px on mobile, 16px on tablet+ 4 w={['100%', null, '50%']} // 100% on mobile, 50% on tablet+ 5> 6 Responsive box 7</Box>
styled() API
Create reusable styled components:
1import { styled } from '@devup-ui/react'
2
3const Button = styled('button', {
4 bg: '$primary',
5 color: 'white',
6 px: 4,
7 py: 2,
8 borderRadius: '4px',
9 border: 'none',
10 cursor: 'pointer',
11 _hover: { opacity: 0.9 },
12})
13
14// Usage
15const buttonExample = <Button>Click me</Button>
1import { styled } from '@devup-ui/react'
2
3const Button = styled('button', {
4 bg: '$primary',
5 color: 'white',
6 px: 4,
7 py: 2,
8 borderRadius: '4px',
9 border: 'none',
10 cursor: 'pointer',
11 _hover: { opacity: 0.9 },
12})
13
14// Usage
15const buttonExample = <Button>Click me</Button>
Next Steps
- Features - Learn all available features
- Components API - Explore component props
- Colors - Set up your color system
- Typography - Configure typography
- Breakpoints - Responsive design guide
Contents
Edit this page