Framework

All Frameworks
bootstrap tailwind chakra

Theme

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