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

Changelog

1.12.1

Bug fixes

• DatePicker / DateRangePicker — Today's date is now highlighted in the calendar (primary ring + bold text), and stays distinguishable when selected or at a range start/end.

1.12.0

New features

• AsyncSelect — New emptyText, loadErrorText and retryText props to override the built-in "No results found", "Failed to load" and "Tap to retry" strings. Defaults stay English.

1.11.0

New features

• ProTable — Search form now uses pro-ui DatePicker (date / dateRange) and NumberField (number / money); Select fields can be cleared back to "All"; pressing Enter in any field submits.
• ProTable — Search form collapses to one row when there are more than 3 fields, with an Expand/Collapse toggle. search now accepts boolean | SearchConfig (defaultCollapsed, collapsedRows, collapseThreshold, visibleFields, searchText, resetText, expandText, collapseText).
• ProTable — New valueType: 'option' for action columns: hidden from the search form and the Columns toggle, not sortable, rendered without renderValue.
• ProTable — New texts prop (ProTableTexts) to override built-in strings (search, toolbar, pagination, empty/loading states, bulk actions). Defaults stay English. emptyText still takes precedence over texts.noData.

Behavior changes

• ProTable — number / money search fields now emit a number instead of a string.
• ProTable — The Columns toggle button's aria-label changed from Toggle columns to Columns.

1.10.0

New features

• ProForm — 6 new field components: ProFormDateRangePicker, ProFormCheckboxGroup, ProFormSlider, ProFormTokenField, ProFormList (repeatable field groups), ProFormDependency (conditional rendering based on watched fields).
• ProForm — formRef for programmatic access (reset(), submit(), getValues(), setValue()), submitter prop for custom submit/reset rendering, onValuesChange callback, async defaultValues support.
• ProForm — schema prop is now optional (omit for no validation).
• ProTable — actionRef for programmatic control (reload(), reloadAndReset(), reset(), clearSelected()), defaultSort/onSortChange for initial and controlled sorting, emptyText for custom empty state.
• ProTable — Controlled row selection via rowSelection.selectedRowKeys + preserveSelectedRowKeys to persist selection across pages.
• ProTable — Column ellipsis (text truncation with native tooltip), tooltip (header tooltip).
• MCP components-data.ts updated to match actual dist types (17 ProForm fields documented, ProColumnType details, ProTable actionRef).
• Showcase demos for ProTable actionRef reload, sort, filter, ProForm async edit, new fields, ProFormList, ProFormDependency.
• Storybook stories for ProTable and ProForm.

Breaking changes

• Peer dependency @tanstack/react-table is now ^8.21.0 (was >=8).

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