Record of product changes.
Faster search across every workspace, with instant results as you type.
Dark mode now follows your system setting automatically.
Export reports straight to CSV from any table view.
<section class="changelog changelog--list" style="--accent:#A8E6C1;">
<header class="changelog__head">
<h3 class="changelog__title">What's new</h3>
<span class="changelog__meta">Showing last 3 updates</span>
</header>
<ol class="changelog__list">
<li class="changelog__entry">
<span class="changelog__badge">New</span>
<span class="changelog__date">14 Aug</span>
<p class="changelog__text">Faster search across every workspace, with instant results as you type.</p>
</li>
<li class="changelog__entry">
<span class="changelog__date">02 Aug</span>
<p class="changelog__text">Dark mode now follows your system setting automatically.</p>
</li>
<li class="changelog__entry">
<span class="changelog__date">27 Jul</span>
<p class="changelog__text">Export reports straight to CSV from any table view.</p>
</li>
</ol>
</section>
<style>
.changelog { font: 16px/1.5 system-ui, sans-serif; max-width: 360px; padding: 20px; background: #FAF7F2; color: #241430; border: 1.5px solid #24143022; border-radius: 12px; }
.changelog__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.changelog__title { margin: 0; font-size: 17px; font-weight: 600; }
.changelog__meta { font-size: 12px; color: #241430; opacity: .6; white-space: nowrap; }
.changelog__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.changelog__entry { position: relative; padding-left: 14px; border-left: 2px solid var(--accent); }
.changelog__date { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.changelog__text { margin: 0; font-size: 13.5px; color: #241430cc; }
.changelog__badge { position: absolute; right: 0; top: 0; background: var(--accent); color: #241430; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; }
.changelog--compact .changelog__list { gap: 8px; }
.changelog--compact .changelog__text { font-size: 12.5px; }
.changelog--timeline .changelog__entry { padding-left: 18px; }
.changelog--timeline .changelog__entry::before { content: ""; position: absolute; left: -5px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid #FAF7F2; }
</style><div class="changelog-tw changelog-tw--list max-w-sm p-5 bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143022] rounded-xl" style="--accent:#A8E6C1">
<div class="flex items-baseline justify-between gap-3 mb-3.5">
<h3 class="m-0 text-[17px] font-semibold">What's new</h3>
<span class="text-xs text-[#241430]/60 whitespace-nowrap">Showing last 3 updates</span>
</div>
<ol class="list-none m-0 p-0 flex flex-col gap-3.5">
<li class="relative pl-3.5 border-l-2" style="border-color:#A8E6C1">
<span class="absolute right-0 top-0 text-[10px] font-bold uppercase tracking-wide px-1.5 py-0.5 rounded-full text-[#241430]" style="background:#A8E6C1">New</span>
<span class="block text-[11px] font-semibold uppercase tracking-wide mb-0.5" style="color:#A8E6C1">14 Aug</span>
<p class="m-0 text-[13.5px] text-[#241430]/80">Faster search across every workspace, with instant results as you type.</p>
</li>
<li class="relative pl-3.5 border-l-2" style="border-color:#A8E6C1">
<span class="block text-[11px] font-semibold uppercase tracking-wide mb-0.5" style="color:#A8E6C1">02 Aug</span>
<p class="m-0 text-[13.5px] text-[#241430]/80">Dark mode now follows your system setting automatically.</p>
</li>
<li class="relative pl-3.5 border-l-2" style="border-color:#A8E6C1">
<span class="block text-[11px] font-semibold uppercase tracking-wide mb-0.5" style="color:#A8E6C1">27 Jul</span>
<p class="m-0 text-[13.5px] text-[#241430]/80">Export reports straight to CSV from any table view.</p>
</li>
</ol>
</div>
<style>
.changelog-tw--compact ol { gap: 8px; }
.changelog-tw--timeline li { padding-left: 18px; }
.changelog-tw--timeline li::before { content: ""; position: absolute; left: -5px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: #241430; border: 2px solid #FAF7F2; }
</style>export function Changelog({
title = "What's new",
entriesShown = 3,
showNew = true,
variant = "list",
accent = "#A8E6C1",
}) {
const entries = [
{ date: "14 Aug", text: "Faster search across every workspace, with instant results as you type." },
{ date: "02 Aug", text: "Dark mode now follows your system setting automatically." },
{ date: "27 Jul", text: "Export reports straight to CSV from any table view." },
];
const listGap = variant === "compact" ? 8 : 14;
return (
<section style={{ fontFamily: "system-ui, sans-serif", fontSize: 16, lineHeight: 1.5, maxWidth: 360, padding: 20, background: "#FAF7F2", color: "#241430", border: "1.5px solid #24143022", borderRadius: 12 }}>
<header style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12, marginBottom: 14 }}>
<h3 style={{ margin: 0, fontSize: 17, fontWeight: 600 }}>{title}</h3>
<span style={{ fontSize: 12, color: "#241430", opacity: 0.6, whiteSpace: "nowrap" }}>Showing last {entriesShown} updates</span>
</header>
<ol style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: listGap }}>
{entries.map((entry, i) => (
<li key={entry.date} style={{ position: "relative", paddingLeft: variant === "timeline" ? 18 : 14, borderLeft: "2px solid " + accent }}>
{variant === "timeline" && (
<span style={{ position: "absolute", left: -5, top: 3, width: 8, height: 8, borderRadius: "50%", background: accent, border: "2px solid #FAF7F2" }} />
)}
{i === 0 && showNew && (
<span style={{ position: "absolute", right: 0, top: 0, background: accent, color: "#241430", fontSize: 10, fontWeight: 700, padding: "2px 7px", borderRadius: 999, textTransform: "uppercase", letterSpacing: ".04em" }}>New</span>
)}
<span style={{ display: "block", fontSize: 11, fontWeight: 600, letterSpacing: ".04em", textTransform: "uppercase", color: accent, marginBottom: 2 }}>{entry.date}</span>
<p style={{ margin: 0, fontSize: variant === "compact" ? 12.5 : 13.5, color: "#241430cc" }}>{entry.text}</p>
</li>
))}
</ol>
</section>
);
}