@dangbt/pro-ui

AI-native React UI library — 30+ accessible components built for Claude Code & Cursor

Docs → · Live Showcase → · npm · MCP Server · Pro Template → · Sponsor ☕

---

What is pro-ui?

Production-ready React components built on React Aria Components (accessibility-first) and Tailwind CSS v4. Includes power components like ProTable and ProForm that handle complex patterns out of the box.

The only React UI library with a built-in MCP server — letting Claude Code, Cursor, and Windsurf scaffold pages using your exact component API with zero hallucinations.

---

Why pro-ui?

Feature	pro-ui	shadcn/ui	MUI	Chakra
🤖 MCP Server (AI-native)	✅	❌	❌	❌
🎨 Tailwind CSS v4	✅	✅	❌	❌
♿ React Aria (accessible)	✅	❌	partial	partial
📊 ProTable (server-side)	✅	❌	❌	❌
📝 ProForm (schema-driven)	✅	❌	❌	❌
🏗️ CLI scaffold	✅	❌	❌	❌
🌙 Dark mode (CSS vars)	✅	✅	✅	✅
📦 Zero runtime CSS-in-JS	✅	✅	❌	❌

---

Quick Start

npm install @dangbt/pro-ui

// main.tsx
import '@dangbt/pro-ui/tailwind.css'
import '@dangbt/pro-ui/theme.css'
import { ThemeProvider, ToastProvider } from '@dangbt/pro-ui'

root.render(
  <ThemeProvider defaultTheme="system">
    <ToastProvider />
    <App />
  </ThemeProvider>
)

Or scaffold a full project in 30 seconds:

npx create-pro-ui-app my-app

---

🤖 AI Integration (MCP Server)

Let Claude Code, Cursor, or Windsurf build pages using the correct component APIs — zero hallucinated props.

Claude Code

{
  "mcpServers": {
    "pro-ui": { "command": "npx", "args": ["mcp-pro-ui"] }
  }
}

Cursor / Windsurf

// .cursor/mcp.json  or  ~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "pro-ui": { "command": "npx", "args": ["mcp-pro-ui"] }
  }
}

Then ask: "scaffold me an admin dashboard page using pro-ui" ✨

MCP tools: list_components · get_component_api · get_component_example · search_components · scaffold_page

---

Components

🏗️ Pro Components

Component	Description
ProTable	Server-side data table — search, filter, sort, pagination, row selection, bulk actions
ProForm	Schema-driven form with Zod — 10+ field types, grid layout, validation
Layout	App shell — Sider (collapsible sidebar) or TopNav (pill/line/bold variants + sub-nav)

📋 Form

Button · Input · Select · ComboBox · DatePicker · Checkbox · Switch · RadioGroup · Slider · TagField · FileUpload · DropZone · Autocomplete

🪟 Overlay

Modal · Drawer · Popover · Tooltip · DropdownMenu

📊 Display

Badge · Alert · Card · Avatar · Statistic · Empty · Steps · Progress · Skeleton · Divider · ColorPicker

🔧 Utilities

ThemeProvider · useTheme · ToastProvider · toast

---

ProTable Example

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

interface User { id: string; name: string; status: 'active' | 'inactive' }

const columns: ProColumnType<User>[] = [
  { title: 'Name',   dataIndex: 'name',   sortable: true },
  { title: 'Status', dataIndex: 'status', valueType: 'select',
    valueEnum: { active: { text: 'Active', color: 'success' }, inactive: 'Inactive' } },
]

<ProTable<User>
  columns={columns}
  rowKey="id"
  request={async ({ current, pageSize }) => {
    const res = await fetch(`/api/users?page=${current}&limit=${pageSize}`)
    const data = await res.json()
    return { data: data.items, total: data.total, success: true }
  }}
  toolBarRender={() => [<Button key="add" variant="primary">+ Add</Button>]}
  rowSelection={{ onChange: (keys) => console.log(keys) }}
/>

---

🚀 Pro Admin Template

Complete admin dashboard — 8 pages, Recharts charts, auth flow, dark mode.

→ Live Demo  |  → Get Template ($79)

Dashboard · Analytics · Users · Settings · Login · Register · Forgot Password · 404

---

AI Docs

• /llms.txt — Summary for AI agents
• /llms-full.txt — Full API reference

---

Roadmap & Pro Tier

Pro components (RichTextEditor, KanbanBoard, GanttChart, AdvancedFilters, DataGrid…) are planned for v2.0.

View full roadmap →

---

Sponsors

pro-ui is MIT-licensed and free forever. If it saves you time, please consider sponsoring:

Tier	Price	Benefits
☕ Coffee	$5/mo	Name in SPONSORS.md
🚀 Pro Supporter	$15/mo	Early access to Pro components
🏢 Team	$50/mo	Logo on README + priority support

Become a sponsor →

---

License

MIT © Dâng Bùi Tấn · SPONSORS.md

_{If pro-ui saves you time, consider sponsoring ☕}