Learn ANT-DESIGN with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.