Learn ANT-DESIGN with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
1
Ant Design Counter Example
import React, { useState } from 'react';
import { Button, Typography, Space, ConfigProvider, theme } from 'antd';
const { Title } = Typography;
const Counter = () => {
const [count, setCount] = useState(0);
const [isDark, setIsDark] = useState(false);
return (
<ConfigProvider theme={{ token: { colorPrimary: isDark ? '#1f1f1f' : '#1890ff' }, algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<Title level={2}>Counter: {count}</Title>
<Space>
<Button type='primary' onClick={() => setCount(count + 1)}>+</Button>
<Button type='primary' danger onClick={() => setCount(count - 1)}>-</Button>
<Button onClick={() => setCount(0)}>Reset</Button>
</Space>
<br /><br />
<Button type='default' onClick={() => setIsDark(!isDark)}>Switch Theme</Button>
</div>
</ConfigProvider>
);
};
export default Counter;
Demonstrates a simple counter layout using Ant Design components and React for interactivity.
2
Ant Design Button Example
import React from 'react';
import { Button, Space } from 'antd';
const ButtonExample = () => (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<Space>
<Button type='primary'>Primary</Button>
<Button type='default'>Default</Button>
<Button type='dashed'>Dashed</Button>
<Button type='link'>Link</Button>
<Button type='text'>Text</Button>
</Space>
</div>
);
export default ButtonExample;
Shows different button types and sizes using Ant Design.
3
Ant Design Card Example
import React from 'react';
import { Card, Button } from 'antd';
const { Meta } = Card;
const CardExample = () => (
<div style={{ display: 'flex', justifyContent: 'center', marginTop: '50px' }}>
<Card style={{ width: 300 }} actions={[<Button>Learn More</Button>]}>
<Meta title='Card Title' description='This is an Ant Design card example.' />
</Card>
</div>
);
export default CardExample;
Displays a simple card component with title, content, and actions.
4
Ant Design Modal Example
import React, { useState } from 'react';
import { Button, Modal } from 'antd';
const ModalExample = () => {
const [visible, setVisible] = useState(false);
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<Button type='primary' onClick={() => setVisible(true)}>Open Modal</Button>
<Modal title='Modal Title' open={visible} onOk={() => setVisible(false)} onCancel={() => setVisible(false)}>
<p>This is a simple Ant Design modal.</p>
</Modal>
</div>
);
};
export default ModalExample;
Demonstrates opening and closing a modal dialog with Ant Design.
5
Ant Design Tabs Example
import React from 'react';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
const TabsExample = () => (
<div style={{ margin: '50px' }}>
<Tabs defaultActiveKey='1'>
<TabPane tab='Tab 1' key='1'>Content of Tab 1</TabPane>
<TabPane tab='Tab 2' key='2'>Content of Tab 2</TabPane>
<TabPane tab='Tab 3' key='3'>Content of Tab 3</TabPane>
</Tabs>
</div>
);
export default TabsExample;
Shows a tabbed interface using Ant Design Tabs component.
6
Ant Design Form Example
import React from 'react';
import { Form, Input, Button } from 'antd';
const FormExample = () => {
const onFinish = values => console.log('Form values:', values);
return (
<div style={{ maxWidth: 400, margin: '50px auto' }}>
<Form onFinish={onFinish} layout='vertical'>
<Form.Item label='Name' name='name' rules={[{ required: true, message: 'Please enter your name' }]}>
<Input />
</Form.Item>
<Form.Item label='Email' name='email' rules={[{ required: true, type: 'email', message: 'Please enter a valid email' }]}>
<Input />
</Form.Item>
<Form.Item>
<Button type='primary' htmlType='submit'>Submit</Button>
</Form.Item>
</Form>
</div>
);
};
export default FormExample;
Shows a basic form with input fields and submit button using Ant Design.
7
Ant Design Alert / Notification Example
import React from 'react';
import { Alert } from 'antd';
const AlertExample = () => (
<div style={{ margin: '50px' }}>
<Alert message='Success Text' type='success' showIcon />
<Alert message='Info Text' type='info' showIcon />
<Alert message='Warning Text' type='warning' showIcon />
<Alert message='Error Text' type='error' showIcon />
</div>
);
export default AlertExample;
Shows an alert notification using Ant Design Alert component.
8
Ant Design Progress Example
import React, { useState, useEffect } from 'react';
import { Progress } from 'antd';
const ProgressExample = () => {
const [percent, setPercent] = useState(0);
useEffect(() => { const interval = setInterval(() => setPercent(p => (p >= 100 ? 0 : p + 10)), 1000); return () => clearInterval(interval); }, []);
return <div style={{ margin: '50px' }}><Progress percent={percent} /></div>;
};
export default ProgressExample;
Displays a linear progress bar using Ant Design Progress component.
9
Ant Design Accordion / Collapse Example
import React from 'react';
import { Collapse } from 'antd';
const { Panel } = Collapse;
const CollapseExample = () => (
<div style={{ margin: '50px' }}>
<Collapse defaultActiveKey={['1']}>
<Panel header='Panel 1' key='1'>Content of Panel 1</Panel>
<Panel header='Panel 2' key='2'>Content of Panel 2</Panel>
<Panel header='Panel 3' key='3'>Content of Panel 3</Panel>
</Collapse>
</div>
);
export default CollapseExample;
Demonstrates collapsible panels using Ant Design Collapse component.
10
Ant Design Tooltip Example
import React from 'react';
import { Button, Tooltip } from 'antd';
const TooltipExample = () => (
<div style={{ textAlign: 'center', margin: '50px' }}>
<Tooltip title='Click me!'>
<Button type='primary'>Hover me</Button>
</Tooltip>
</div>
);
export default TooltipExample;
Shows a button with a tooltip using Ant Design Tooltip component.