Kairoz
.kairoz-list

List

Tight vertical stack with hover highlight and a left-edge accent on the selected item.

.kairoz-list.kairoz-list-item.is-selected

Default

  • main.ts
  • index.tsx
  • layout.tsx
  • README.md
  • package.json
<ul class="kairoz-list" style="list-style:none;padding:0;margin:0;width:280px;border:1px solid var(--border-default);border-radius:6px">
  <li class="kairoz-list-item is-selected">main.ts</li>
  <li class="kairoz-list-item">index.tsx</li>
  <li class="kairoz-list-item">layout.tsx</li>
  <li class="kairoz-list-item">README.md</li>
  <li class="kairoz-list-item">package.json</li>
</ul>

With status dots and timestamps

  • kairoz-core2m ago
  • kairoz-edge5m ago
  • kairoz-api12m ago
<ul class="kairoz-list" style="list-style:none;padding:0;margin:0;width:320px;border:1px solid var(--border-default);border-radius:6px">
  <li class="kairoz-list-item" style="display:flex;align-items:center;justify-content:space-between"><span style="display:flex;align-items:center;gap:8px"><span class="kairoz-dot kairoz-dot-success"></span>kairoz-core</span><span style="color:var(--text-tertiary);font-family:var(--font-mono);font-size:11px">2m ago</span></li>
  <li class="kairoz-list-item" style="display:flex;align-items:center;justify-content:space-between"><span style="display:flex;align-items:center;gap:8px"><span class="kairoz-dot kairoz-dot-warning"></span>kairoz-edge</span><span style="color:var(--text-tertiary);font-family:var(--font-mono);font-size:11px">5m ago</span></li>
  <li class="kairoz-list-item" style="display:flex;align-items:center;justify-content:space-between"><span style="display:flex;align-items:center;gap:8px"><span class="kairoz-dot kairoz-dot-error"></span>kairoz-api</span><span style="color:var(--text-tertiary);font-family:var(--font-mono);font-size:11px">12m ago</span></li>
</ul>