Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Soft UI Dashboard AdminKit Soft UI Design System Soft UI Dashboard Tailwind Asteria Dashboard Chakra UI Dashboard Motion Landing Library React Motion Landing Library Argon Dashboard Riva Dashboard Tailwind
All 88
Charts 2
Tables 10
Cards 18
Navbars 6
Headers 2
Components 9
Forms 2
Sidebars 6
Charts Section 1
Cards Section 7
Tables Section 3
Projects Section 4
Teams Section 3
Typography 8
Profiles Section 3
Contacts Section 3

Argon Dashboard Components

Discover 88 components available in Argon Dashboard

Sidebar Simple

Argon Dashboard View Theme 
<div class="navbar-inner">
  <div class="collapse navbar-collapse" id="sidenav-collapse-main">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="javascript:">
          <i class="fa fa-desktop text-primary"></i>
          <span class="nav-link-text">Dashboard</span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="javascript:">
          <i class="fa fa-lock text-danger"></i>
          <span class="nav-link-text">Login</span>
        </a>
      </li>
    </ul>
  </div>
</div>

Table Dark

Argon Dashboard View Theme 
<div class="card bg-default shadow draggable">
  <div class="card-header bg-transparent border-0">
    <h3 class="text-white mb-0">Dark table</h3>
  </div>
  <div class="table-responsive">
    <table class="table align-items-center table-dark table-flush">
      <thead class="thead-dark">
        <tr>
          <th scope="col" class="sort" data-sort="name">Project</th>
          <th scope="col" class="sort" data-sort="budget">Budget</th>
          <th scope="col" class="sort" data-sort="status">Status</th>
          <th scope="col">Users</th>
          <th scope="col" class="sort" data-sort="completion">Completion</th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody class="list">
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/bootstrap.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">Argon Design System</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $2500 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-warning"></i>
              <span class="status">pending</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">60%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/angular.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">Angular Now UI Kit PRO</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $1800 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-success"></i>
              <span class="status">completed</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">100%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/sketch.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">Black Dashboard</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $3150 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-danger"></i>
              <span class="status">delayed</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">72%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="72" aria-valuemin="0" aria-valuemax="100" style="width: 72%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/react.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">React Material Dashboard</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $4400 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-info"></i>
              <span class="status">on schedule</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">90%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-info" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <div class="media align-items-center">
              <a href="#" class="avatar rounded-circle mr-3">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/vue.jpg">
              </a>
              <div class="media-body">
                <span class="name mb-0 text-sm">Vue Paper UI Kit PRO</span>
              </div>
            </div>
          </th>
          <td class="budget">
            $2200 USD
          </td>
          <td>
            <span class="badge badge-dot mr-4">
              <i class="bg-success"></i>
              <span class="status">completed</span>
            </span>
          </td>
          <td>
            <div class="avatar-group">
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Ryan Tompson">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Romina Hadid">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-2.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Alexander Smith">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg">
              </a>
              <a href="#" class="avatar avatar-sm rounded-circle" data-toggle="tooltip" data-original-title="Jessica Doe">
                <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
              </a>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <span class="completion mr-2">100%</span>
              <div>
                <div class="progress">
                  <div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                </div>
              </div>
            </div>
          </td>
          <td class="text-right">
            <div class="dropdown">
              <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-ellipsis-v"></i>
              </a>
              <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Navbar Simple

Argon Dashboard View Theme 
<div class="container">
  <a class="text-white" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar-primary">
    <div class="navbar-collapse-header">
      <div class="row">
        <div class="col-6 collapse-brand">
          <a href="javascript:void(0)">
            <img src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/brand/blue.png">
          </a>
        </div>
        <div class="col-6 collapse-close">
          <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-primary" aria-controls="navbar-primary" aria-expanded="false" aria-label="Toggle navigation">
            <span></span>
            <span></span>
          </button>
        </div>
      </div>
    </div>
    <ul class="navbar-nav ml-lg-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Discover <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" href="#" id="navbar-primary_dropdown_1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Settings</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-primary_dropdown_1">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</div>

Card Testimonials

Argon Dashboard View Theme

Card Payment

Argon Dashboard View Theme

Table Toggle

Argon Dashboard View Theme

Section Contact Horizontal

Argon Dashboard View Theme

Header Ecommerce

Argon Dashboard View Theme