Data — Interplanetary UI

Table

Data tables with headers, rows, and optional status badges.

Name	Status	Role
John Doe	Active	Administrator
Jane Smith	Pending	Editor
Bob Wilson	Inactive	Viewer

Code

<table class="ip-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td><span class="ip-badge ip-badge-success">Active</span></td>
      <td>Administrator</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td><span class="ip-badge ip-badge-warning">Pending</span></td>
      <td>Editor</td>
    </tr>
  </tbody>
</table>

Terminal List

Lists with terminal-style $ bullet markers.

System initialized successfully
Loading configuration files
Connecting to database
Server ready on port 8080

Code

<ul class="ip-terminal-list">
  <li>System initialized successfully</li>
  <li>Loading configuration files</li>
  <li>Connecting to database</li>
  <li>Server ready on port 8080</li>
</ul>

Stat

Metric display with value, label, and optional trend indicator.

1,234

Total Users

89%

Uptime

↑ 2.5%

47ms

Latency

↓ 12ms

Code

<div class="ip-stat">
  <div class="ip-stat-value">1,234</div>
  <div class="ip-stat-label">Total Users</div>
</div>

<!-- With trend indicator -->
<div class="ip-stat">
  <div class="ip-stat-value">89%</div>
  <div class="ip-stat-label">Uptime</div>
  <div class="ip-stat-trend ip-stat-trend-up">↑ 2.5%</div>
</div>

<div class="ip-stat">
  <div class="ip-stat-value">47ms</div>
  <div class="ip-stat-label">Latency</div>
  <div class="ip-stat-trend ip-stat-trend-down">↓ 12ms</div>
</div>

List Item

Flexible list row with optional icon, content, and trailing action.

Document.pdf

2.4 MB • Updated 2 hours ago

JD

John Doe commented on your post

5 minutes ago

Simple item without icon

Just content and meta

Code

<div class="ip-list-item">
  <div class="ip-list-item-icon">
    <svg>...</svg>
  </div>
  <div class="ip-list-item-content">
    <div class="ip-list-item-title">Document.pdf</div>
    <div class="ip-list-item-meta">2.4 MB • Updated 2 hours ago</div>
  </div>
  <div class="ip-list-item-action">
    <button class="ip-btn">Download</button>
  </div>
</div>

<!-- With avatar -->
<div class="ip-list-item">
  <div class="ip-list-item-icon">
    <div class="ip-avatar ip-avatar-sm">JD</div>
  </div>
  <div class="ip-list-item-content">
    <div class="ip-list-item-title">John Doe commented</div>
    <div class="ip-list-item-meta">5 minutes ago</div>
  </div>
</div>