Ant Design Components

Button

import { Button } from 'antd';

<Button type="primary">Primary</Button>
<Button>Default</Button>
<Button type="dashed">Dashed</Button>
<Button type="text">Text</Button>
<Button type="link">Link</Button>
<Button danger>Danger</Button>
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>

Form

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

function MyForm() {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  return (
    <Form form={form} onFinish={onFinish} layout="vertical">
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input username!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="email"
        label="Email"
        rules={[{ type: 'email', message: 'Invalid email!' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

Table

import { Table } from 'antd';

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

const data = [
  { key: '1', name: 'John', age: 32 },
  { key: '2', name: 'Jane', age: 28 },
];

<Table columns={columns} dataSource={data} />

Modal

import { Modal, Button } from 'antd';
import { useState } from 'react';

function MyModal() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>

      <Modal
        title="Modal Title"
        open={open}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
      >
        <p>Modal content</p>
      </Modal>
    </>
  );
}

Message

import { message, Button } from 'antd';

const showMessage = () => {
  message.success('Success message');
  message.error('Error message');
  message.warning('Warning message');
  message.info('Info message');
  message.loading('Loading...');
};

<Button onClick={showMessage}>Show Message</Button>

Drawer

import { Drawer, Button } from 'antd';
import { useState } from 'react';

function MyDrawer() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Drawer</Button>

      <Drawer
        title="Drawer Title"
        placement="right"
        onClose={() => setOpen(false)}
        open={open}
      >
        <p>Drawer content</p>
      </Drawer>
    </>
  );
}

Select

import { Select } from 'antd';

<Select
  style={{ width: 200 }}
  placeholder="Select option"
  options={[
    { value: '1', label: 'Option 1' },
    { value: '2', label: 'Option 2' },
  ]}
  onChange={(value) => console.log(value)}
/>

DatePicker

import { DatePicker } from 'antd';
import dayjs from 'dayjs';

<DatePicker 
  onChange={(date, dateString) => console.log(dateString)}
  defaultValue={dayjs()}
/>

Resource

Check the official docs for all components!