Home
/
General
/
Panels

Panels

Panels display content in a rectangular area, usually used for organizing and grouping related controls or information.

Figma logo
Preview Panels in Figma

Standard panel

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Grid, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    panel: {
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div style={styles.panel}>
          <div style={styles.placeholder}>
            <Text>Content</Text>
          </div>
        </div>
      </div>
    </section>
  );
}

Panel edge-to-edge on mobile

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Grid, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : "0"
    },
    panel: {
      backgroundColor: token.colorBgContainer,
      borderRadius: screens.md ? token.borderRadiusLG : "0",
      padding: screens.md ? token.paddingLG : `${token.paddingLG}px ${token.padding}px`
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div style={styles.panel}>
          <div style={styles.placeholder}>
            <Text>Content</Text>
          </div>
        </div>
      </div>
    </section>
  );
}

Panel with header buttons paragraph and footer

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Button, Grid, Space, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    panel: {
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG
    },
    panelContent: {
      padding: token.paddingLG
    },
    panelFooter: {
      borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
      padding: `${token.padding}px ${token.paddingLG}px`
    },
    panelHeader: {
      borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
      display: "flex",
      flexDirection: screens.md ? "row" : "column",
      gap: token.size,
      justifyContent: "space-between",
      padding: `${token.padding}px ${token.paddingLG}px`
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    subtitle: {
      color: token.colorTextSecondary
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div>
          <div style={styles.panel}>
            <div style={styles.panelHeader}>
              <Space direction="vertical" size={token.sizeXXS}>
                <Text strong>Header</Text>
                <Text style={styles.subtitle}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit
                  interdum hendrerit ex vitae sodales.
                </Text>
              </Space>
              <Space>
                <Button>Button</Button>
                <Button type="primary">Button</Button>
              </Space>
            </div>
            <div style={styles.panelContent}>
            <div style={styles.placeholder}>
            <Text>Content</Text>
          </div>
            </div>
            <div style={styles.panelFooter}>
              <Text>Footer</Text>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Panel with dropdown in header

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Button, Dropdown, Grid, Space, theme, Typography } from "antd";

import { MoreOutlined } from "@ant-design/icons";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const items = [
    {
      label: "Action 1",
      key: "1",
      type: "primary",
    },
    {
      label: "Action 2",
      key: "2",
      type: "default",
    },
    {
      label: "Action 3",
      key: "3",
      type: "default",
    },
  ];
  const menuProps = {
    items,
  };

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md
        ? `0px ${token.paddingLG}px`
        : `0px ${token.padding}px`,
    },
    panel: {
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG,
    },
    panelContent: {
      padding: token.paddingLG,
    },
    panelFooter: {
      borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
      padding: `${token.padding}px ${token.paddingLG}px`,
    },
    panelHeader: {
      borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
      display: "flex",
      alignItems: "start",
      gap: token.size,
      justifyContent: "space-between",
      padding: `${token.padding}px ${token.paddingLG}px`,
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center",
    },
    subtitle: {
      color: token.colorTextSecondary,
    },
  };

  return (
    <section>
      <div style={styles.container}>
        <div>
          <div style={styles.panel}>
            <div style={styles.panelHeader}>
              <Space direction="vertical" size={token.sizeXXS}>
                <Text strong>Header</Text>
                <Text style={styles.subtitle}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit
                  interdum hendrerit ex vitae sodales.
                </Text>
              </Space>
              <Space>
                <Dropdown menu={menuProps} placement="bottomRight" arrow>
                  <Button type="text" icon={<MoreOutlined />} />
                </Dropdown>
              </Space>
            </div>
            <div style={styles.panelContent}>
              <div style={styles.placeholder}>
                <Text>Content</Text>
              </div>
            </div>
            <div style={styles.panelFooter}>
              <Text>Footer</Text>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Simple panel with header and footer

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Grid, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    panel: {
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG
    },
    panelContent: {
      padding: token.paddingLG
    },
    panelFooter: {
      borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
      padding: `${token.padding}px ${token.paddingLG}px`
    },
    panelHeader: {
      borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
      padding: `${token.padding}px ${token.paddingLG}px`
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div>
          <div style={styles.panel}>
            <div style={styles.panelHeader}>
              <Text strong>Header</Text>
            </div>
            <div style={styles.panelContent}>
              <div style={styles.placeholder}>
                <Text>Content</Text>
              </div>
            </div>
            <div style={styles.panelFooter}>
              <Text>Footer</Text>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Panel with header paragraph and footer

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Button, Grid, Space, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    panel: {
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG
    },
    panelContent: {
      padding: token.paddingLG
    },
    panelFooter: {
      borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
      display: "flex",
      justifyContent: "flex-end",
      padding: `${token.padding}px ${token.paddingLG}px`
    },
    panelHeader: {
      borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
      display: "flex",
      flexDirection: screens.md ? "row" : "column",
      gap: token.size,
      justifyContent: "space-between",
      padding: `${token.padding}px ${token.paddingLG}px`
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    subtitle: {
      color: token.colorTextSecondary
    }
  };

  return (
    <>
      <div style={styles.container}>
        <div>
          <div style={styles.panel}>
            <div style={styles.panelHeader}>
              <Space direction="vertical" size={token.sizeXXS}>
                <Text strong>Header</Text>
                <Text style={styles.subtitle}>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit
                  interdum hendrerit ex vitae sodales.
                </Text>
              </Space>
            </div>
            <div style={styles.panelContent}>
              <div style={styles.placeholder}>
                <Text>Content</Text>
              </div>
            </div>
            <div style={styles.panelFooter}>
              <Space wrap>
                <Button>Button</Button>
                <Button type="primary">Button</Button>
              </Space>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

Panel with shadow

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Grid, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    panel: {
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG,
      boxShadow: token.boxShadowTertiary,
      padding: token.paddingLG
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div style={styles.panel}>
          <div style={styles.placeholder}>
            <Text>Content</Text>
          </div>
        </div>
      </div>
    </section>
  );
}

Standard well

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Grid, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeXXL}px 0px`
    },
    well: {
      backgroundColor: token.colorBgLayout,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG
    }
  };

  return (
    <section style={styles.section}>
      <div style={styles.container}>
        <div style={styles.well}>
        <div style={styles.placeholder}>
            <Text>Content</Text>
          </div>
        </div>
      </div>
    </section>
  );
}

Well edge-to-edge on mobile

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Grid, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : "0"
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeXXL}px 0px`
    },
    well: {
      backgroundColor: token.colorBgLayout,
      borderRadius: screens.md ? token.borderRadiusLG : "0",
      padding: screens.md ? token.paddingLG : `${token.paddingLG}px ${token.padding}px`
    }
  };

  return (
    <section style={styles.section}>
      <div style={styles.container}>
        <div style={styles.well}>
        <div style={styles.placeholder}>
            <Text>Content</Text>
          </div>
        </div>
      </div>
    </section>
  );
}