Home

Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Soft UI Dashboard Soft UI Design System Asteria Dashboard Riva Dashboard Tailwind Chakra UI Dashboard Motion Landing Library Argon Dashboard AdminKit Soft UI 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

Chart Bar

Argon Dashboard View Theme 
<div class="card draggable">
  <div class="card-header bg-transparent">
    <h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
    <h5 class="h3 mb-0">Total orders</h5>
  </div>
  <div class="card-body">
    <div class="chart">
      <canvas id="chart-bars" class="chart-bar chart-canvas"></canvas>
    </div>
  </div>
</div>

Table Sell

Argon Dashboard View Theme

Table Authors

Argon Dashboard View Theme

Card List Group

Argon Dashboard View Theme

Card Balance

Argon Dashboard View Theme

Table Watchlist

Argon Dashboard View Theme

Navbar Complex

Argon Dashboard View Theme 
<div class="container-fluid">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form class="navbar-search navbar-search-light form-inline mr-sm-3 mb-0" id="navbar-search-main">
      <div class="form-group mb-0">
        <div class="input-group input-group-alternative input-group-merge">
          <div class="input-group-prepend">
            <span class="input-group-text"><i class="fas fa-search"></i></span>
          </div>
          <input class="form-control" placeholder="Search" type="text">
        </div>
      </div>
      <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
        <span aria-hidden="true">×</span>
      </button>
  </form>
    <ul class="navbar-nav align-items-center  ml-md-auto ">
      <li class="nav-item d-xl-none">
        <div class="pr-3 sidenav-toggler sidenav-toggler-dark active" data-action="sidenav-pin" data-target="#sidenav-main">
          <div class="sidenav-toggler-inner">
            <i class="sidenav-toggler-line"></i>
            <i class="sidenav-toggler-line"></i>
            <i class="sidenav-toggler-line"></i>
          </div>
        </div>
      </li>
      <li class="nav-item d-sm-none">
        <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
          <i class="ni ni-zoom-split-in"></i>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-bell"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-xl  dropdown-menu-right  py-0 overflow-hidden">
          <div class="px-3 py-3">
            <h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6>
          </div>
          <div class="list-group list-group-flush">
            <a href="#!" class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg" class="avatar rounded-circle">
                </div>
                <div class="col ml--2">
                  <div class="d-flex justify-content-between align-items-center">
                    <div>
                      <h4 class="mb-0 text-sm">John Snow</h4>
                    </div>
                    <div class="text-right text-muted">
                      <small>2 hrs ago</small>
                    </div>
                  </div>
                  <p class="text-sm mb-0">Lets meet at Starbucks at 11:30. Wdyt?</p>
                </div>
              </div>
            </a>
            <a href="#!" class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets/img/theme/team-2.jpg" class="avatar rounded-circle">
                </div>
                <div class="col ml--2">
                  <div class="d-flex justify-content-between align-items-center">
                    <div>
                      <h4 class="mb-0 text-sm">John Snow</h4>
                    </div>
                    <div class="text-right text-muted">
                      <small>3 hrs ago</small>
                    </div>
                  </div>
                  <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
                </div>
              </div>
            </a>
            <a href="#!" class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg" class="avatar rounded-circle">
                </div>
                <div class="col ml--2">
                  <div class="d-flex justify-content-between align-items-center">
                    <div>
                      <h4 class="mb-0 text-sm">John Snow</h4>
                    </div>
                    <div class="text-right text-muted">
                      <small>5 hrs ago</small>
                    </div>
                  </div>
                  <p class="text-sm mb-0">Your posts have been liked a lot.</p>
                </div>
              </div>
            </a>
            <a href="#!" class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets/img/theme/team-4.jpg" class="avatar rounded-circle">
                </div>
                <div class="col ml--2">
                  <div class="d-flex justify-content-between align-items-center">
                    <div>
                      <h4 class="mb-0 text-sm">John Snow</h4>
                    </div>
                    <div class="text-right text-muted">
                      <small>2 hrs ago</small>
                    </div>
                  </div>
                  <p class="text-sm mb-0">Lets meet at Starbucks at 11:30. Wdyt?</p>
                </div>
              </div>
            </a>
            <a href="#!" class="list-group-item list-group-item-action">
              <div class="row align-items-center">
                <div class="col-auto">
                  <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-5.jpg" class="avatar rounded-circle">
                </div>
                <div class="col ml--2">
                  <div class="d-flex justify-content-between align-items-center">
                    <div>
                      <h4 class="mb-0 text-sm">John Snow</h4>
                    </div>
                    <div class="text-right text-muted">
                      <small>3 hrs ago</small>
                    </div>
                  </div>
                  <p class="text-sm mb-0">A new issue has been reported for Argon.</p>
                </div>
              </div>
            </a>
          </div>
          <a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-layer-group"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default  dropdown-menu-right ">
          <div class="row shortcuts px-4">
            <a href="#!" class="col-4 shortcut-item text-center">
              <span class="shortcut-media avatar rounded-circle bg-gradient-red">
                <i class="fa fa-calendar"></i>
              </span>
              <small class="text-white">Calendar</small>
            </a>
            <a href="#!" class="col-4 shortcut-item text-center">
              <span class="shortcut-media avatar rounded-circle bg-gradient-orange">
                <i class="fa fa-envelope"></i>
              </span>
              <small class="text-white">Email</small>
            </a>
            <a href="#!" class="col-4 shortcut-item text-center">
              <span class="shortcut-media avatar rounded-circle bg-gradient-info">
                <i class="fa fa-credit-card"></i>
              </span>
              <small class="text-white">Payments</small>
            </a>
            <a href="#!" class="col-4 shortcut-item text-center">
              <span class="shortcut-media avatar rounded-circle bg-gradient-green">
                <i class="fa fa-book"></i>
              </span>
              <small class="text-white">Reports</small>
            </a>
            <a href="#!" class="col-4 shortcut-item text-center">
              <span class="shortcut-media avatar rounded-circle bg-gradient-purple">
                <i class="fa fa-map"></i>
              </span>
              <small class="text-white">Maps</small>
            </a>
            <a href="#!" class="col-4 shortcut-item text-center">
              <span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
                <i class="fa fa-store"></i>
              </span>
              <small class="text-white">Shop</small>
            </a>
          </div>
        </div>
      </li>
    </ul>
    <ul class="navbar-nav align-items-center  ml-auto ml-md-0 ">
      <li class="nav-item dropdown">
        <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <div class="media align-items-center">
            <span class="avatar avatar-sm rounded-circle">
              <img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
            </span>
            <div class="media-body  ml-2  d-none d-lg-block">
              <span class="mb-0 text-sm  font-weight-bold">John Snow</span>
            </div>
          </div>
        </a>
        <div class="dropdown-menu  dropdown-menu-right ">
          <div class="dropdown-header noti-title">
            <h6 class="text-overflow m-0">Welcome!</h6>
          </div>
          <a href="#!" class="dropdown-item">
            <i class="fa fa-user"></i>
            <span>My profile</span>
          </a>
          <a href="#!" class="dropdown-item">
            <i class="fa fa-tools"></i>
            <span>Settings</span>
          </a>
          <a href="#!" class="dropdown-item">
            <i class="far fa-calendar"></i>
            <span>Activity</span>
          </a>
          <a href="#!" class="dropdown-item">
            <i class="fa fa-phone"></i>
            <span>Support</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#!" class="dropdown-item">
            <i class="fa fa-sign-out-alt"></i>
            <span>Logout</span>
          </a>
        </div>
      </li>
    </ul>
  </div>
</div>

Card Image

Argon Dashboard View Theme

Header Profile

Argon Dashboard View Theme 
<div class="header d-flex align-items-center rounded-lg removable draggable" style="min-height: 500px; background-image: url(https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/profile-cover.jpg); background-size: cover; background-position: center top;">
    <!-- Mask -->
    <span class="mask bg-gradient-default rounded-lg opacity-8"></span>
    <!-- Header container -->
    <div class="container-fluid d-flex align-items-center">
        <div class="row">
            <div class="col-lg-7 col-md-10">
            <h1 class="display-2 text-white">Hello Jesse</h1>
            <p class="text-white mt-0 mb-5">This is your profile page. You can see the progress you have made with your work and manage your projects or assigned tasks</p>
            <a href="#!" class="btn btn-neutral">Edit profile</a>
            </div>
        </div>
    </div>
</div>

Pills

Argon Dashboard View Theme 
<div class="draggable">
    <div class="nav-wrapper">
        <ul class="nav nav-pills nav-pills-circle" id="tabs_2" role="tablist">
            <li class="nav-item">
                <a class="nav-link rounded-circle active" id="home-tab" data-toggle="tab" href="#tabs_2_1" role="tab" aria-controls="home" aria-selected="true">
                <span class="nav-link-icon d-block"><i class="fa fa-atom"></i></span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#tabs_2_2" role="tab" aria-controls="profile" aria-selected="false">
                <span class="nav-link-icon d-block"><i class="fa fa-chart-line"></i></span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#tabs_2_3" role="tab" aria-controls="contact" aria-selected="false">
                <span class="nav-link-icon d-block"><i class="fa fa-user"></i></span>
                </a>
            </li>
            </ul>
    </div>

    <div class="card shadow">
        <div class="card-body">
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="tabs_2_1" role="tabpanel" aria-labelledby="home-tab">
                    <p class="description">Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
                    <p class="description">Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse.</p>
                </div>
                <div class="tab-pane fade" id="tabs_2_2" role="tabpanel" aria-labelledby="profile-tab">
                    <p class="description">Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                </div>
                <div class="tab-pane fade" id="tabs_2_3" role="tabpanel" aria-labelledby="contact-tab">
                    <p class="description">Raw denim you probably haven&#39;t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
                </div>
            </div>
        </div>
    </div>
</div>