Ant Design Pocket Book
Design system • Layout & theming • Forms & tables • Navigation • Patterns • Performance & testing
1) What is Ant Design?
Ant Design (AntD) is a React UI library and design system with high-quality components, consistent design tokens, and enterprise-ready patterns. It ships with layout, navigation, data entry, data display, feedback, and overlay components.
# Install (React)
npm i antd @ant-design/icons
# or with Vite/CRA/Next projects2) Quick Starter
import { Button } from 'antd';
export default function App(){
return <Button type="primary">Hello AntD</Button>;
}Ensure your bundler handles CSS: import 'antd/dist/reset.css' (v5) in your root.
3) Layout System
Use Layout + Header, Sider, Content, Footer for app shells. Grid uses Row/Col with 24 columns.
import { Layout, Menu } from 'antd';
const { Header, Sider, Content } = Layout;
<Layout>
<Sider><Menu items={[{key:'1',label:'Home'}]} /></Sider>
<Layout>
<Header/>
<Content style={{padding:24}}>Main</Content>
</Layout>
</Layout>4) Theming & Tokens (v5)
Customization via design tokens and ConfigProvider. Override colors, radius, font, spacing globally or per component.
import { ConfigProvider } from 'antd';
<ConfigProvider theme={{ token:{ colorPrimary:'#1677ff', borderRadius:8 } }}>
<App />
</ConfigProvider>5) Icons
Use @ant-design/icons. Keep icon usage consistent with action semantics.
import { PlusOutlined } from '@ant-design/icons';
<Button icon={<PlusOutlined />} type="primary">New</Button>
6) Forms (Controlled)
Form + Form.Item manage layout, validation, and submission. Use rules and helpers like validateTrigger.
import { Form, Input, Button } from 'antd';
const [form] = Form.useForm();
<Form form={form} onFinish={values => console.log(values)} layout="vertical">
<Form.Item label="Email" name="email" rules={[{type:'email', required:true}]}
><Input/></Form.Item>
<Button htmlType="submit" type="primary">Submit</Button>
</Form>7) Table Basics
Tables support pagination, sorting, filtering, expandable rows, and virtual scroll. Keep columns minimal and use renderers for custom cells.
import { Table } from 'antd';
const columns = [{ title:'Name', dataIndex:'name' }, { title:'Age', dataIndex:'age' }];
const data = [{ key:1, name:'Alice', age:28 }];
<Table columns={columns} dataSource={data} pagination={{ pageSize:10 }} />8) Table Advanced
Server-side mode: control pagination, sorter, filters via onChange. Use rowSelection for selection.
<Table onChange={(p, f, s) => fetchData(p, f, s)}
rowSelection={{ onChange:(keys) => setKeys(keys) }} />9) Lists, Cards & Empty States
Use List/Card for non-tabular collections. Always show an Empty state with helpful action.
<List dataSource={items} renderItem={i => <List.Item>{i.title}</List.Item>} />10) Upload & Drag-and-Drop
Upload supports drag/drop, progress, and beforeUpload for validation. Store URLs, not files, in your form state.
<Upload.Dragger action="/api/upload" multiple>
<p>Drop files here</p>
</Upload.Dragger>
11) App Navigation
Use Menu, Breadcrumb, Tabs, and Dropdown to guide users. Keep top-level nav minimal; move details into pages/tabs.
<Breadcrumb items={[{title:'Home'},{title:'Users'}]} />12) Feedback & Messaging
Non-blocking: message.success(). Blocking actions: Modal.confirm(). Persistent: notification.open().
import { message, Modal, notification } from 'antd';
message.success('Saved');
Modal.confirm({ title:'Delete item?', onOk: handleDelete });
notification.open({ message:'Build complete', description:'Deployed to prod' });13) Drawer & Modal Patterns
Use Drawer for side panels that don’t block navigation; Modal for important confirmations/forms. Avoid nested modals.
14) Accessibility
Use semantic props (e.g., aria-*), labels for inputs, focus management on dialogs, and high-contrast token themes when needed.
15) Internationalization (i18n)
Wrap app with ConfigProvider locale; load translations for dates/strings. Keep copy outside components.
import enUS from 'antd/locale/en_US';
<ConfigProvider locale={enUS}>...</ConfigProvider>
16) Performance Tips
- Memoize heavy lists and cell renderers.
- Use
virtuallist/table for large datasets. - Prefer controlled forms with minimal re-renders.
- Defer offscreen content with lazy loading.
17) Testing
Use React Testing Library for components; assert on roles/labels. Mock network and time for stable tests.
import { render, screen } from '@testing-library/react';
render(<Button>Save</Button>);
expect(screen.getByRole('button',{name:/save/i})).toBeInTheDocument();18) Form Patterns
Use Form.List for dynamic arrays; dependencies to react to other fields; custom validators for complex rules.
<Form.List name="items">{(fields, add) => (
<>{fields.map(f => <Form.Item {...f} name={[f.name,'name']} />)}
<Button onClick={() => add()}>Add</Button></>
)}</Form.List>19) Table Patterns
Editable cells: use Form inside table rows. Sticky headers/columns for dense data. Keep actions consistent (edit, delete, view).
20) Common Pitfalls
- Overloaded tables: too many columns without grouping or summaries.
- Inconsistent spacing when overriding tokens—change tokens, not CSS ad-hoc.
- Blocking UX with excessive modals; prefer inline feedback.
21) Interview Q&A — 8 Quick Ones
1) AntD vs Material UI? AntD is opinionated with enterprise patterns; MUI is more neutral/flexible. Choose based on team familiarity and design system fit.
2) Customize theme? Use ConfigProvider tokens, per-component overrides, or CSS-in-JS classNames sparingly.
3) Responsive layout? Use Grid and responsive props (xs…xxl), hide/show content with CSS utilities.
4) Large tables? Virtualize, paginate, and push heavy filters server-side.
5) Form validation? Use rules & custom validators; show concise error text; mark required fields.
6) A11y musts? Proper labels, keyboard focus for dialogs/menus, and color contrast in themes.
7) Next.js integration? Import CSS once, avoid SSR-only APIs in client components; handle dynamic imports for heavy widgets.
8) Design consistency? Define tokens, page frame, spacing scale, and component usage guidelines early.