Blocks — Interplanetary UI

Code

Inline code and code blocks.

Use .ip-code for inline code like const x = 1.

function greet(name) {
  return `Hello, ${name}!`;
}

Code

<!-- Inline code -->
<code class="ip-code">const x = 1</code>

<!-- Code block -->
<pre class="ip-pre"><code>function greet() { ... }</code></pre>

<!-- Copyable code block -->
<pre class="ip-pre" data-copyable>
  <button class="ip-btn-icon ip-copy-btn" data-action="copy">
    <span class="ip-btn-icon-content">□</span>
  </button>
  <code>...</code>
</pre>

Avatar

User profile images in multiple sizes.

SM

MD

LG

XL

Code

<div class="ip-avatar ip-avatar-sm">SM</div>
<div class="ip-avatar">MD</div>
<div class="ip-avatar ip-avatar-lg">LG</div>
<div class="ip-avatar ip-avatar-xl">XL</div>

Link

Accent-colored link style.

This is a styled link within text content.

Code

<a href="#" class="ip-link">Link text</a>

Dividers

Visual separators for content.

Content with left accent marker

Content below the divider

Code

<!-- Left accent border -->
<div class="ip-content-marker">Highlighted content</div>

<!-- Horizontal divider -->
<hr class="ip-section-divider">

Tabs

Tabbed content panels. Requires tabs.js.

Overview content goes here.

Code

<div class="ip-tabs" data-tabs>
  <div class="ip-tab-list" role="tablist">
    <button class="ip-tab is-active" data-tab="tab1">Tab 1</button>
    <button class="ip-tab" data-tab="tab2">Tab 2</button>
  </div>
  <div class="ip-tab-panel" role="tabpanel" id="tab1">
    <p>Tab 1 content</p>
  </div>
  <div class="ip-tab-panel" role="tabpanel" id="tab2" hidden>
    <p>Tab 2 content</p>
  </div>
</div>

Tree

Hierarchical tree view. Requires tree.js.

report.pdf

notes.txt

photo.jpg

Code

<div class="ip-tree" data-tree>
  <div class="ip-tree-item">
    <button class="ip-tree-toggle">
      <span class="ip-tree-icon">▶</span>
      <span class="ip-tree-label">Folder</span>
    </button>
    <div class="ip-tree-children">
      <div class="ip-tree-item is-leaf">
        <a href="#" class="ip-tree-link">file.txt</a>
      </div>
    </div>
  </div>
</div>

Empty State

Placeholder for empty content areas with optional icon, message, and action.

No Data Found

There are no items to display. Create one to get started.

Code

<div class="ip-empty">
  <div class="ip-empty-icon">
    <svg>...</svg>
  </div>
  <div class="ip-empty-title">No Data Found</div>
  <div class="ip-empty-message">There are no items to display.</div>
  <div class="ip-empty-action">
    <button class="ip-btn-primary">Create Item</button>
  </div>
</div>

Minimal Variant

No Results

Try adjusting your search or filters.

Skeleton

Loading placeholder with shimmer animation. Ideal for htmx loading states.

Text Lines

List Item Pattern

Block

Code

<!-- Text lines -->
<div class="ip-skeleton ip-skeleton-text w-3/4"></div>
<div class="ip-skeleton ip-skeleton-text w-1/2"></div>

<!-- Circle (avatar placeholder) -->
<div class="ip-skeleton ip-skeleton-circle"></div>

<!-- Block (card/image placeholder) -->
<div class="ip-skeleton ip-skeleton-block"></div>

<!-- List item pattern -->
<div class="flex items-center gap-3">
  <div class="ip-skeleton ip-skeleton-circle"></div>
  <div class="flex-1">
    <div class="ip-skeleton ip-skeleton-text w-1/3"></div>
    <div class="ip-skeleton ip-skeleton-text w-1/2"></div>
  </div>
</div>