Framework

All Frameworks
bootstrap tailwind chakra

Theme

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

Soft UI Dashboard Components

Discover 6 components available in Soft UI Dashboard

Button

Component from Soft UI Dashboard Builder 
<button class="btn btn-primary draggable">
    Button
</button>

Input

Component from Soft UI Dashboard Builder 
<input type="text" class="form-control draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon">

Input Group

Component from Soft UI Dashboard Builder 
<div class="form-group draggable">
    <div class="input-group">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
</div>

Dropdown

Component from Soft UI Dashboard Builder 
<div class="dropdown draggable">
  <button class="btn bg-gradient-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Primary
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Progress

Component from Soft UI Dashboard Builder 
<div class="progress-wrapper draggable">
  <div class="progress-info">
    <div class="progress-percentage">
      <span class="text-sm font-weight-bold">60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>

Modal

Component from Soft UI Dashboard Builder 
<button type="button" class="btn bg-gradient-primary draggable" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn bg-gradient-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>