antd

Detection Signals

• antd in package.json
• @ant-design/icons dependency
• ConfigProvider at app root
• @ant-design/pro-components (ProTable, ProForm) in larger projects
• dayjs for date components (antd v5 dropped moment.js)

MCP Setup

Ant Design has an official MCP server with real-time documentation, code examples, and API references.

Add to .claude/settings.json:

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["-y", "@ant-design/mcp@latest"]
    }
  }
}

If auto-configuration fails, ask the user to add the entry manually in their CLI's MCP settings (Claude Code → Settings → MCP Servers, the mcp block of opencode.json, or Codex CLI's MCP config), or run npm install -g @ant-design/cli and use antd mcp as the command.

Core Concepts

Concept	Detail
ConfigProvider	Global config: locale, theme tokens, component defaults
Design tokens	Theme via theme.token and theme.components in ConfigProvider
Form + useForm	Built-in validation, async rules, field state management
Table	Column definitions, dataSource, rowKey, pagination, sort, filter
ProComponents	@ant-design/pro-components — high-level ProTable, ProForm for CRUD
Tree-shaking	Import from individual paths or use with a bundler that supports it

Component Patterns

// ConfigProvider is mandatory — without it, some labels default to Chinese
import { ConfigProvider } from 'antd'
import enUS from 'antd/locale/en_US'

<ConfigProvider locale={enUS} theme={{ token: { colorPrimary: '#1677ff' } }}>
  <App />
</ConfigProvider>

// Form — always use Form.useForm(); never manage field state manually
const [form] = Form.useForm()
<Form form={form} onFinish={handleSubmit} layout="vertical">
  <Form.Item name="email" rules={[{ required: true, type: 'email' }]}>
    <Input />
  </Form.Item>
  <Button htmlType="submit">Submit</Button>
</Form>

// Table — define columns separately for readability
const columns = [
  { title: 'Name', dataIndex: 'name', sorter: true },
  { title: 'Status', dataIndex: 'status', filters: [...] },
]
<Table columns={columns} dataSource={data} rowKey="id" />

Critical Rules

• ConfigProvider at root — without locale config, date pickers and some labels render in Chinese
• Always use Form.useForm() — never build form state manually alongside antd Form; the two fight each other
• Use dayjs, not moment — antd v5 migrated; importing moment causes peer dep warnings and bundle bloat
• Import selectively — import { Button } from 'antd' is fine with tree-shaking; avoid importing everything
• ProComponents for complex CRUD — if @ant-design/pro-components is present, prefer ProTable/ProForm over building custom table+form combos
• Theme via tokens — customize through ConfigProvider's theme prop, not CSS overrides; token changes cascade automatically