antd

Layout

Provides a set of components to create a layout structure for your application, including headers, footers, sidebars, and content areas.

import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

ReactDOM.render(
  <Layout>
    <Header>Header</Header>
    <Layout>
      <Sider>Sider</Sider>
      <Content>Content</Content>
    </Layout>
    <Footer>Footer</Footer>
  </Layout>,
  document.getElementById('container')
);

Data Display

Includes components like tables, lists, and cards to display data in a structured format.

import { Table } from 'antd';

const dataSource = [
  { key: '1', name: 'John Doe', age: 32, address: 'Some Street' },
  { key: '2', name: 'Jane Doe', age: 42, address: 'Another Street' }
];

const columns = [
  { title: 'Name', dataIndex: 'name', key: 'name' },
  { title: 'Age', dataIndex: 'age', key: 'age' },
  { title: 'Address', dataIndex: 'address', key: 'address' }
];

ReactDOM.render(<Table dataSource={dataSource} columns={columns} />, document.getElementById('container'));

Form Controls

Provides form components like input fields, checkboxes, radio buttons, and forms with validation.

import { Form, Input, Button } from 'antd';

const FormComponent = () => (
  <Form>
    <Form.Item label='Username' name='username'>
      <Input />
    </Form.Item>
    <Form.Item label='Password' name='password'>
      <Input.Password />
    </Form.Item>
    <Form.Item>
      <Button type='primary' htmlType='submit'>Submit</Button>
    </Form.Item>
  </Form>
);

ReactDOM.render(<FormComponent />, document.getElementById('container'));

Feedback

Offers feedback components such as alerts, modals, notifications, and messages to interact with users.

import { message } from 'antd';

function success() {
  message.success('This is a success message');
}

ReactDOM.render(<button onClick={success}>Show success message</button>, document.getElementById('container'));

Navigation

Includes navigation components like menus, tabs, breadcrumbs, and paginations to guide users through the application.

import { Menu } from 'antd';

const { SubMenu } = Menu;

ReactDOM.render(
  <Menu mode='horizontal'>
    <Menu.Item key='mail'>Navigation One</Menu.Item>
    <SubMenu title='Navigation Two'>
      <Menu.Item key='submenu-item-1'>Option 1</Menu.Item>
      <Menu.Item key='submenu-item-2'>Option 2</Menu.Item>
    </SubMenu>
  </Menu>,
  document.getElementById('container')
);