Quick Start

Option 1 — CLI scaffolder (recommended)

npx create-pro-ui-app my-app

Choose from 3 templates:

Template	What you get
minimal	React + Vite + pro-ui, bare setup
admin-dashboard	Sidebar, dashboard, users table, settings, auth pages
saas-app	Login, register, onboarding, dashboard, profile

The CLI installs dependencies and opens the app ready to run.

Option 2 — Manual setup

1. Install

npm install @dangbt/pro-ui

2. Add styles

/* src/index.css */
@import "tailwindcss";
@import "@dangbt/pro-ui/styles";

3. Wrap your app

// src/main.tsx
import { ThemeProvider, ToastProvider } from '@dangbt/pro-ui'
 
createRoot(document.getElementById('root')!).render(
  <ThemeProvider>
    <ToastProvider>
      <App />
    </ToastProvider>
  </ThemeProvider>
)

4. Use components

import { Button, Modal, ProTable } from '@dangbt/pro-ui'

Recommended Vite config

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
 
export default defineConfig({
  plugins: [react(), tailwindcss()],
})

TypeScript

pro-ui ships with full TypeScript types. No extra @types packages needed.

Key generic types:

import type { ProColumnType, ProFormField } from '@dangbt/pro-ui'
 
const columns: ProColumnType<User>[] = [...]
const fields: ProFormField[] = [...]

Next steps

• MCP setup — connect Claude Code / Cursor
• Theming — dark mode and custom colors
• ProTable — data table reference
• ProForm — form builder reference