imeimi static components

Live example + its markup. A JS tag means the component needs imeimi.js.

Tokens

--c-bg

--c-surface

--c-surface-sunken

--c-border

--c-border-strong

--c-text

--c-text-muted

--c-text-subtle

--c-accent

--c-accent-hover

--c-code-bg

--c-code-border

Icons

Class is icon- + the name below, sized with font-size — e.g. <span class="icon-copy"></span>

alert-circle

alert-triangle

arrow-down

arrow-left

arrow-right

arrow-up

bell

book

bookmark

calendar

camera

check

check-circle

chevron-down

chevron-left

chevron-right

chevron-up

clock

cloud

code

compass

copy

credit-card

database

download

edit

external-link

eye

eye-off

file

filter

flag

folder

folder-open

globe

grid

heart

help-circle

home

image

info

link

list

lock

log-in

log-out

mail

map

map-pin

message-circle

message-square

mic

minus

moon

more-horizontal

more-vertical

navigation

notepad

paperclip

pause

phone

play

plus

qr-code

refresh-cw

reset

save

send

settings

shopping-cart

star

stop

sun

tag

thumbs-down

thumbs-up

trash

trophy

unlock

upload

user

video

wifi

x-circle

Accordion

What is imeimi static?

A shared design-asset CDN.

How do I use it?

Link the stylesheet and reference a class.

<div class="accordion">
  <details open><summary>What is imeimi static?</summary><div class="accordion__body">A shared design-asset CDN.</div></details>
  <details><summary>How do I use it?</summary><div class="accordion__body">Link the stylesheet and reference a class.</div></details>
</div>

Alert

Note

An informational message.

Saved successfully.

Double-check your input.

Something went wrong.

<div class="alert alert--info">
  <p class="alert__title"><span class="icon icon-info"></span> Note</p>
  <p>An informational message.</p>
</div>
<div class="alert alert--success"><p><span class="icon icon-check-circle"></span> Saved successfully.</p></div>
<div class="alert alert--warning"><p><span class="icon icon-alert-triangle"></span> Double-check your input.</p></div>
<div class="alert alert--danger"><p><span class="icon icon-alert-circle"></span> Something went wrong.</p></div>

Avatar

<span class="avatar">IM</span>
<span class="avatar"><img src="sample.svg" alt=""></span>
<span class="avatar" style="font-size:1.4rem">42</span>

Badge

42 new AC TLE WA

<span class="badge">42</span>
<span class="badge badge--primary">new</span>
<span class="badge badge--success">AC</span>
<span class="badge badge--warning">TLE</span>
<span class="badge badge--danger">WA</span>

Button

<button class="btn btn--primary" style="padding:.5rem 1rem"><span class="icon icon-check"></span> Primary</button>
<button class="btn btn--ghost" style="padding:.5rem 1rem"><span class="icon icon-copy"></span> Ghost</button>
<button class="btn btn--ghost btn--icon" aria-label="close"><span class="icon icon-x"></span></button>
<button class="btn btn--primary" style="padding:.5rem 1rem" disabled>Disabled</button>

Checkbox & radio

Subscribe Remember me Free Pro

<label style="display:inline-flex;gap:.5rem;align-items:center">
  <input class="checkbox" type="checkbox" checked> Subscribe
</label>
<label style="display:inline-flex;gap:.5rem;align-items:center">
  <input class="checkbox" type="checkbox"> Remember me
</label>
<label style="display:inline-flex;gap:.5rem;align-items:center">
  <input class="radio" type="radio" name="plan" checked> Free
</label>
<label style="display:inline-flex;gap:.5rem;align-items:center">
  <input class="radio" type="radio" name="plan"> Pro
</label>

Code block JSclamp.cpp
// constrain a value to a range
#include <algorithm>

int clamp(int n, int lo, int hi) {
  return std::min(hi, std::max(lo, n));  // long lines scroll horizontally inside the code block when they overflow
}
<div class="code-block">
  <div class="code-filename">clamp.cpp</div>
  <pre><code><span class="hljs-comment">// constrain a value to a range</span>
<span class="hljs-meta">#include <span class="hljs-string">&lt;algorithm&gt;</span></span>

<span class="hljs-type">int</span> <span class="hljs-title">clamp</span>(<span class="hljs-type">int</span> n, <span class="hljs-type">int</span> lo, <span class="hljs-type">int</span> hi) {
  <span class="hljs-keyword">return</span> <span class="hljs-built_in">std</span>::<span class="hljs-built_in">min</span>(hi, <span class="hljs-built_in">std</span>::<span class="hljs-built_in">max</span>(lo, n));  <span class="hljs-comment">// long lines scroll horizontally inside the code block when they overflow</span>
}</code><button class="btn btn--icon code-copy" type="button" aria-label="Copy" data-copy><span class="icon icon-copy"></span></button></pre>
</div>

  // running sum
auto total = std::accumulate(v.begin(), v.end(), 0);
<div class="code-block">
  <pre><code><span class="hljs-comment">// running sum</span>
<span class="hljs-keyword">auto</span> total = <span class="hljs-built_in">std</span>::<span class="hljs-built_in">accumulate</span>(v.<span class="hljs-built_in">begin</span>(), v.<span class="hljs-built_in">end</span>(), <span class="hljs-number">0</span>);</code><button class="btn btn--icon code-copy" type="button" aria-label="Copy" data-copy><span class="icon icon-copy"></span></button></pre>
</div>

Color picker JS

<div class="color-picker" data-color-picker data-value="#3b82f6"></div>

Date picker JS

<div class="date-picker" data-date-picker data-value="2026-06-14"></div>

Divider

Above the line

Below the line

<div style="width:100%">
  <p style="margin:0">Above the line</p>
  <hr class="divider">
  <p style="margin:0">Below the line</p>
</div>

Dropdown JS

<div class="dropdown" data-dropdown>
  <button class="btn btn--ghost" style="padding:.45rem .9rem" data-dropdown-trigger>Menu <span class="icon icon-chevron-down"></span></button>
  <div class="dropdown-menu" data-dropdown-menu>
    <button class="dropdown-item">Edit</button>
    <button class="dropdown-item">Duplicate</button>
    <div class="dropdown-sep"></div>
    <button class="dropdown-item">Delete</button>
  </div>
</div>

Field

<input class="field" placeholder="Email address">
<div style="position:relative;display:inline-block">
  <input class="field" type="password" value="correcthorse" style="padding-right:2.4rem">
  <button class="btn btn--icon" type="button" data-pw aria-label="Show password"
    style="position:absolute;right:.2rem;top:50%;transform:translateY(-50%);color:rgb(var(--c-text-muted))">
    <span class="icon icon-eye"></span>
  </button>
</div>
<textarea class="field" style="width:13rem;height:4rem">The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.</textarea>

File upload JS

Drop images here or click to browse

<label class="dropzone" data-dropzone>
  <span class="icon icon-upload"></span>
  <span>Drop images here or click to browse</span>
  <input type="file" accept="image/*" multiple>
  <div class="dropzone-preview" data-dropzone-preview></div>
  <div class="dropzone-files" data-dropzone-files></div>
</label>

Image

<img class="image" src="sample.svg" alt="landscape" style="width:16rem">

Kbd

Ctrl + C

<kbd>Ctrl</kbd> + <kbd>C</kbd>

Link

Documentation

<a href="#">Documentation</a>

Modal JS

<button class="btn btn--primary" style="padding:.45rem .9rem" data-modal-open="demo-modal">Open modal</button>
<dialog class="modal" id="demo-modal">
  <h2 class="modal__title">Delete file?</h2>
  <p>This action cannot be undone.</p>
  <div class="modal__actions">
    <button class="btn btn--ghost" style="padding:.4rem .8rem" data-modal-close>Cancel</button>
    <button class="btn btn--primary" style="padding:.4rem .8rem" data-modal-close>Delete</button>
  </div>
</dialog>

Nav links

<nav style="width:13rem">
  <a class="nav-link active" href="#">Overview</a>
  <a class="nav-link" href="#">Components</a>
  <a class="nav-link" href="#">Tokens</a>
</nav>

Pagination

<nav class="pagination">
  <a href="#" class="is-disabled"><span class="icon icon-chevron-left"></span></a>
  <a href="#">1</a>
  <a href="#" aria-current="page">2</a>
  <a href="#">3</a>
  <a href="#"><span class="icon icon-chevron-right"></span></a>
</nav>

Progress

<progress class="progress" value="40" max="100"></progress>
<progress class="progress" value="75" max="100"></progress>
<progress class="progress"></progress>

Prose

Getting started

Pin the stylesheet and reference a component such as .btn in your markup.

Simplicity is the ultimate sophistication.

Pretendard for text
JetBrains Mono for code

const greeting = "hello";

<article class="prose">
  <h2>Getting started</h2>
  <p>Pin the stylesheet and reference a <a href="#">component</a> such as <code>.btn</code> in your markup.</p>
  <blockquote>Simplicity is the ultimate sophistication.</blockquote>
  <ul><li>Pretendard for text</li><li>JetBrains Mono for code</li></ul>
  <pre><code>const greeting = "hello";</code></pre>
</article>

Select JS

<div class="select" data-select>
  <button class="select-trigger" type="button" data-select-trigger>
    <span data-select-label></span><span class="icon icon-chevron-down"></span>
  </button>
  <div class="select-menu" data-select-menu>
    <button class="select-option" type="button" role="option" data-value="a" aria-selected="true">Option A</button>
    <button class="select-option" type="button" role="option" data-value="b">Option B</button>
    <button class="select-option" type="button" role="option" data-value="c">Option C</button>
  </div>
</div>

Sidebar JS

Main content area.

<button class="btn btn--icon" data-sidebar-toggle aria-controls="nav"><span class="icon icon-menu"></span></button>
<aside id="nav" class="sidebar">
  <div class="sidebar-inner">
    <a class="nav-link active" href="#">Overview</a>
  </div>
</aside>
<div class="backdrop" data-sidebar-backdrop aria-controls="nav"></div>

Skeleton

<div style="width:100%">
  <div class="skeleton" style="height:5rem"></div>
  <div class="skeleton skeleton--text" style="margin-top:.75rem"></div>
  <div class="skeleton skeleton--text"></div>
  <div class="skeleton skeleton--text"></div>
</div>

Slider JS

<input class="slider" type="range" min="0" max="100" value="40" style="max-width:18rem">

Spinner

<span class="spinner" style="color:rgb(var(--c-accent))"></span>
<span class="spinner" style="font-size:1.5rem"></span>
<span class="spinner spinner--thick" style="font-size:2rem"></span>
<span class="spinner" style="font-size:2rem;--spinner-speed:1.6s"></span>

Stepper JS

<div class="stepper" data-stepper>
  <input class="stepper-input" type="number" value="3" min="0" max="100" step="1">
  <div class="stepper-btns">
    <button class="stepper-btn" type="button" data-stepper-up aria-label="up"><span class="icon icon-chevron-up"></span></button>
    <button class="stepper-btn" type="button" data-stepper-down aria-label="down"><span class="icon icon-chevron-down"></span></button>
  </div>
</div>

<div class="stepper" data-stepper data-hold-delay="250" data-hold-interval="30">
  <input class="stepper-input" type="number" value="0" step="5">
  <div class="stepper-btns">
    <button class="stepper-btn" type="button" data-stepper-up aria-label="up"><span class="icon icon-chevron-up"></span></button>
    <button class="stepper-btn" type="button" data-stepper-down aria-label="down"><span class="icon icon-chevron-down"></span></button>
  </div>
</div>

<div class="stepper" data-stepper data-hold="off">
  <input class="stepper-input" type="number" value="0">
  <div class="stepper-btns">
    <button class="stepper-btn" type="button" data-stepper-up aria-label="up"><span class="icon icon-chevron-up"></span></button>
    <button class="stepper-btn" type="button" data-stepper-down aria-label="down"><span class="icon icon-chevron-down"></span></button>
  </div>
</div>

Summary

What is a disclosure?

A native <details>/<summary> element that toggles its content — no JavaScript needed.

How is it styled?

Just add .details — it only swaps the marker for a chevron. No wrapper box; you lay out the content.

<details class="details" open>
  <summary>What is a disclosure?</summary>
  <p>A native &lt;details&gt;/&lt;summary&gt; element that toggles its content — no JavaScript needed.</p>
</details>
<details class="details">
  <summary>How is it styled?</summary>
  <p>Just add <code>.details</code> — it only swaps the marker for a chevron. No wrapper box; you lay out the content.</p>
</details>

Switch

Notifications Auto-save

<label class="switch"><input type="checkbox" checked><span class="switch__track"></span> Notifications</label>
<label class="switch"><input type="checkbox"><span class="switch__track"></span> Auto-save</label>

Table

Problem	Verdict	Time
A + B	AC	15 ms
Knapsack	TLE	—
Dijkstra	AC	120 ms

<table class="table table--hover">
  <thead><tr><th>Problem</th><th>Verdict</th><th>Time</th></tr></thead>
  <tbody>
    <tr><td>A + B</td><td>AC</td><td>15 ms</td></tr>
    <tr><td>Knapsack</td><td>TLE</td><td>&mdash;</td></tr>
    <tr><td>Dijkstra</td><td>AC</td><td>120 ms</td></tr>
  </tbody>
</table>

Tabs JS

Overview panel.

<div class="tabs" data-tabs>
  <div class="tablist" role="tablist">
    <button class="tab" role="tab" aria-controls="tb1" aria-selected="true">Overview</button>
    <button class="tab" role="tab" aria-controls="tb2">Usage</button>
    <button class="tab" role="tab" aria-controls="tb3">API</button>
  </div>
  <div class="tab-panel" id="tb1" role="tabpanel">Overview panel.</div>
  <div class="tab-panel" id="tb2" role="tabpanel" hidden>Usage panel.</div>
  <div class="tab-panel" id="tb3" role="tabpanel" hidden>API panel.</div>
</div>

Toast JS

<button class="btn btn--primary" style="padding:.45rem .9rem"
  onclick="imeimiToast.show('Saved to library', { type: 'success' })">Show toast</button>

Tooltip

<button class="btn btn--ghost" style="padding:.45rem .9rem" data-tooltip="Tooltip on top">Hover me</button>
<button class="btn btn--ghost" style="padding:.45rem .9rem" data-tooltip="Below" data-tooltip-pos="bottom">And me</button>

Tree

src
- css
- js
  - dropdown.js
  - select.js
- icons
  - home.svg

<ul class="tree">
  <li><details open>
    <summary>src</summary>
    <ul>
      <li class="tree__file">css</li>
      <li><details>
        <summary>js</summary>
        <ul>
          <li class="tree__file">dropdown.js</li>
          <li class="tree__file">select.js</li>
        </ul>
      </details></li>
      <li><details>
        <summary>icons</summary>
        <ul><li class="tree__file">home.svg</li></ul>
      </details></li>
    </ul>
  </details></li>
</ul>