Organization chart

Bootstrap 5 Organization chart plugin

Responsive family tree chart built with the latest Bootstrap 5. Organize data with a branching visualization.

Note: Read the API tab to find all available options and advanced customization

Basic example

Create simple Organization Chart.

You can initialize the component with MDBOrganizationChart.

CEO

Director

Manager

Employee

Manager

Employee

Employee

Director

Manager

Employee

Employee

Manager

Employee

 
import { MDBOrganizationChart } from 'mdb-react-organization-chart';

export default function App() {
  const myData = {
    label: 'CEO',
    children: [
      {
        label: 'Director',
        children: [
          { label: 'Manager', children: [{ label: 'Employee' }] },
          { label: 'Manager', children: [{ label: 'Employee' }, { label: 'Employee' }] },
        ],
      },
      {
        label: 'Director',
        children: [
          { label: 'Manager', children: [{ label: 'Employee' }, { label: 'Employee' }] },
          { label: 'Manager', children: [{ label: 'Employee' }] },
        ],
      },
    ],
  };

  return <MDBOrganizationChart data={myData} />;
}

Advanced example

Create organization chart including avatar and name.

CIO

Walter White

Manager

Jon Snow

SE

Britney Morgan
Director

Jimmy McGill

PM

Phoebe Buffay

Operations

Kim Wexler
Development

Rachel Green
Manager

Michael Scott

SA

Pam Beasly
SP

Alex Morgan
R&D

Fran Kirby

 
import { MDBOrganizationChart } from 'mdb-react-organization-chart';

export default function App() {
  const myData = {
    name: 'Walter White',
    label: 'CIO',
    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/1.webp',
    children: [
      {
        label: 'Manager',
        name: 'Jon Snow',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/2.webp',
        children: [
          {
            label: 'SE',
            name: 'Britney Morgan',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/9.webp',
          },
        ],
      },
      {
        label: 'Director',
        name: 'Jimmy McGill',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/3.webp',
        children: [
          {
            label: 'PM',
            name: 'Phoebe Buffay',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/7.webp',
            children: [
              {
                label: 'Operations',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/4.webp',
                name: 'Kim Wexler',
              },
              {
                label: 'Development',
                name: 'Rachel Green',
                avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/6.webp',
              },
            ],
          },
        ],
      },
      {
        label: 'Manager',
        name: 'Michael Scott',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/8.webp',
        children: [
          {
            label: 'SA',
            name: 'Pam Beasly',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/5.webp',
          },
          {
            label: 'SP',
            name: 'Alex Morgan',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/14.webp',
          },
        ],
      },
      {
        label: 'R&D',
        name: 'Fran Kirby',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/10.webp',
      },
    ],
  };

  return <MDBOrganizationChart data={myData} className='my-class' />;
}
.my-class {
  .organization-card {
    border-radius: calc(0.5rem - 1px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);

    & > p {
      border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
      background-color: rgba(18, 102, 241);
      padding: 0.75rem 1.5rem;
      margin-bottom: 0;
      color: #fff;
    }

    div {
      display: flex;
      flex-direction: column-reverse;
      padding: 1.5rem;

      img {
        margin: 0.5rem auto;
      }
    }
  }
}

Mixed example

Create mixed organization chart.

CEO

Walter White

CFO

Jon Snow

Analysis

Sales
CMO

Kim Wexler

Marketing
CIO

Phoebe Buffay

Development

Chandler Bing

Analysis

Front End

Back End
QA

Rachel Green
R&D

Monica Geller

 
import { MDBOrganizationChart } from 'mdb-react-organization-chart';

export default function App() {
  const myData = {
    name: 'Walter White',
    label: 'CEO',
    avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/1.webp',
    children: [
      {
        name: 'Jon Snow',
        label: 'CFO',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/2.webp',
        children: [
          {
            label: 'Analysis',
          },
          {
            label: 'Sales',
          },
        ],
      },
      {
        label: 'CMO',
        name: 'Kim Wexler',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/9.webp',
        children: [
          {
            label: 'Marketing',
          },
        ],
      },
      {
        label: 'CIO',
        name: 'Phoebe Buffay',
        avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/5.webp',
        children: [
          {
            label: 'Development',
            name: 'Chandler Bing',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/3.webp',
            children: [
              {
                label: 'Analysis',
              },
              {
                label: 'Front End',
              },
              {
                label: 'Back End',
              },
            ],
          },
          {
            label: 'QA',
            name: 'Rachel Green',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/10.webp',
          },
          {
            label: 'R&D',
            name: 'Monica Geller',
            avatar: 'https://mdbcdn.b-cdn.net/img/new/avatars/11.webp',
          },
        ],
      },
    ],
  };

  return <MDBOrganizationChart data={myData} className='my-class' />;
}
.my-class {
  .organization-card {
    border-radius: calc(0.5rem - 1px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);

    & > p {
      border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
      background-color: rgba(18, 102, 241);
      padding: 0.75rem 1.5rem;
      margin-bottom: 0;
      color: #fff;
    }

    div {
      display: flex;
      flex-direction: column-reverse;
      padding: 1.5rem;

      img {
        margin: 0.5rem auto;
      }
    }
  }
}

Organization chart - API

Import

import { MDBOrganizationChart } from 'mdb-react-organization-chart';

Properties

MDBOrganizationChart

Name Type Default Description Example
className string '' Adds user's custom class to charts wrapping div element <MDBOrganizationChart className="class" />
data DataInterface null Data for chart construction. <MDBOrganizationChart data={myData} />
style React.CSSProperties null Set styles to charts wrapping div element <MDBOrganizationChart style={myStyles} />

Advanced types

DataInterface

interface DataInterface {
  label: string;
  name?: string;
  avatar?: string;
  children?: DataInterface[];
}