A quiet UI framework for back-office apps. Semantic HTML,
data-* attributes and a little vanilla JS, with 53
components, Lucide icons and country flags, and no runtime
dependencies.
Reach for dialog, popover,
details and button first. A small
vanilla script adds only what HTML cannot: theme, tabs,
select, tree, table, journey and a few more.
Every selector sits in @layer components and
:where(), so your CSS overrides it right away.
Themes switch through CSS custom properties, following the system or the user's choice, with no flash on load.
One self-hosted woff2 Google Sans for both Thai and Latin. Table numbers use tabular-nums.
ภาษาไทยกับ Latin ในบรรทัดเดียวกัน 1,234.50
Load the files from jsDelivr, which serves each release tag of
the GitHub repository. Load the script in
<head> as a plain script, not
type="module": it then applies the saved theme before
the first paint, so there is no flash and no inline script to add.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v0.1.1/dist/tsunami.min.css">
<script src="https://cdn.jsdelivr.net/gh/Djirasak/tsunami-framework@v0.1.1/dist/tsunami.min.js"></script>
The fonts and flags load from the same tag, next to
dist/. The libraries some components need come from
the same place, for example
@v0.1.1/dist/chart.min.js, loaded before the
Tsunami script. The code editor is the exception: Monaco starts
web workers, which a browser only runs from the page's own
origin, so host dist/monaco/ yourself.
To host the files yourself, copy dist/,
fonts/ and flags/ side by side and link
dist/tsunami.min.css and
dist/tsunami.min.js.
| Order | Customer | Status | Total |
|---|---|---|---|
| #1042 | Emma Wilson | Paid | $129.00 |
| #1041 | James Carter | Pending | $84.50 |
| #1040 | Olivia Brown | Cancelled | $246.00 |
<div class="stack">
<dl class="stat">
<div>
<dt>Revenue</dt>
<dd>$12,840</dd>
<dd data-variant="ok">+12.4% from last month</dd>
</div>
<div>
<dt>Orders</dt>
<dd>1,284</dd>
<dd>+3.1%</dd>
</div>
<div>
<dt>Refunds</dt>
<dd>18</dd>
<dd data-variant="danger">+2 orders</dd>
</div>
<div>
<dt>New customers</dt>
<dd>342</dd>
<dd>Flat</dd>
</div>
</dl>
<div class="card">
<table class="table">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Customer</th>
<th scope="col">Status</th>
<th scope="col" data-align="end">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>#1042</td>
<td>Emma Wilson</td>
<td><span class="badge" data-variant="ok">Paid</span></td>
<td data-align="end">$129.00</td>
</tr>
<tr>
<td>#1041</td>
<td>James Carter</td>
<td><span class="badge">Pending</span></td>
<td data-align="end">$84.50</td>
</tr>
<tr>
<td>#1040</td>
<td>Olivia Brown</td>
<td><span class="badge" data-variant="danger">Cancelled</span></td>
<td data-align="end">$246.00</td>
</tr>
</tbody>
</table>
</div>
</div>