Components

<button class="psy-btn psy-btn-primary">Primary</button>
<button class="psy-btn psy-btn-secondary">Secondary</button>
<button class="psy-btn psy-btn-ghost">Ghost</button>
<button class="psy-btn psy-btn-danger">Danger</button>

<div class="psy-field">
  <label class="psy-label">Email</label>
  <input class="psy-input" type="email" placeholder="you@psyn.app">
  <span class="psy-field-help">We never share it.</span>
</div>

<div class="psy-card">
  <div class="psy-card-header">Portfolio</div>
  <div class="psy-card-body">…</div>
  <div class="psy-card-footer">…</div>
</div>

<span class="psy-badge psy-badge-green">success</span>
<div class="psy-alert psy-alert-info">Heads up…</div>

<div class="psy-tabs">
  <button class="psy-tab psy-active" data-psy-toggle="tab" data-psy-target="#t1">Overview</button>
  <button class="psy-tab" data-psy-toggle="tab" data-psy-target="#t2">Activity</button>
</div>
<div class="psy-tab-panel psy-active" id="t1">…</div>

<button data-psy-toggle="modal" data-psy-target="#m">Open</button>
<div class="psy-dropdown">
  <button data-psy-toggle="dropdown">Menu</button>
  <div class="psy-dropdown-menu">…</div>
</div>

<table class="psy-table psy-table-hover">
  <thead><tr><th>Symbol</th>…</tr></thead>
  <tbody>…</tbody>
</table>

<div class="psy-progress"><div class="psy-progress-bar" style="width:72%"></div></div>