Atomic Component

Very small reusable component.

html

<div class="atomic atomic--circle" data-count="3" role="img" aria-label="3 reused instances of the Icon atom">
  <p class="atomic__label">&lt;Icon /&gt; &mdash; one atomic component, reused 3&times;</p>
  <div class="atomic__row">
    <span class="atomic__atom" style="background:#A8E6C1;"></span>
    <span class="atomic__atom" style="background:#A8E6C1;"></span>
    <span class="atomic__atom" style="background:#A8E6C1;"></span>
    <span class="atomic__atom" style="background:#A8E6C1;"></span>
    <span class="atomic__atom" style="background:#A8E6C1;"></span>
    <span class="atomic__atom" style="background:#A8E6C1;"></span>
  </div>
</div>
<style>
.atomic { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.atomic__label { margin: 0 0 14px; font-size: 11px; color: #24143099; }
.atomic__row { display: flex; gap: 8px; flex-wrap: wrap; }
.atomic__atom { display: block; width: 28px; height: 28px; }
.atomic--circle .atomic__atom { border-radius: 50%; }
.atomic--square .atomic__atom { border-radius: 4px; }
.atomic--diamond .atomic__atom { border-radius: 4px; transform: rotate(45deg); }
.atomic[data-count="1"] .atomic__atom:nth-child(n+2) { display: none; }
.atomic[data-count="2"] .atomic__atom:nth-child(n+3) { display: none; }
.atomic[data-count="3"] .atomic__atom:nth-child(n+4) { display: none; }
.atomic[data-count="4"] .atomic__atom:nth-child(n+5) { display: none; }
.atomic[data-count="5"] .atomic__atom:nth-child(n+6) { display: none; }
</style>

tailwind

<div class="atomictw atomictw--circle font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border" data-count="3" role="img" aria-label="3 reused instances of the Icon atom">
  <p class="m-0 mb-3.5 text-[11px] text-[#24143099]">&lt;Icon /&gt; &mdash; one atomic component, reused 3&times;</p>
  <div class="flex gap-2 flex-wrap">
    <span class="atomictw__atom block w-7 h-7" style="background:#A8E6C1;"></span>
    <span class="atomictw__atom block w-7 h-7" style="background:#A8E6C1;"></span>
    <span class="atomictw__atom block w-7 h-7" style="background:#A8E6C1;"></span>
    <span class="atomictw__atom block w-7 h-7" style="background:#A8E6C1;"></span>
    <span class="atomictw__atom block w-7 h-7" style="background:#A8E6C1;"></span>
    <span class="atomictw__atom block w-7 h-7" style="background:#A8E6C1;"></span>
  </div>
</div>
<style>
.atomictw--circle .atomictw__atom { border-radius: 50%; }
.atomictw--square .atomictw__atom { border-radius: 4px; }
.atomictw--diamond .atomictw__atom { border-radius: 4px; transform: rotate(45deg); }
.atomictw[data-count="1"] .atomictw__atom:nth-child(n+2) { display: none; }
.atomictw[data-count="2"] .atomictw__atom:nth-child(n+3) { display: none; }
.atomictw[data-count="3"] .atomictw__atom:nth-child(n+4) { display: none; }
.atomictw[data-count="4"] .atomictw__atom:nth-child(n+5) { display: none; }
.atomictw[data-count="5"] .atomictw__atom:nth-child(n+6) { display: none; }
</style>

react

export function AtomicComponent({
  label = "Icon",
  shape = "circle",
  count = 3,
  accent = "#A8E6C1",
}) {
  const radius = shape === "circle" ? "50%" : "4px";
  const items = [0, 1, 2, 3, 4, 5].filter((i) => i < count);
  return (
    <div role="img" aria-label={`${count} reused instances of the ${label} atom`} style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 14px", fontSize: 11, color: "#24143099" }}>&lt;{label} /&gt; &mdash; one atomic component, reused {count}&times;</p>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        {items.map((i) => (
          <span key={i} style={{ display: "block", width: 28, height: 28, background: accent, borderRadius: radius, transform: shape === "diamond" ? "rotate(45deg)" : "none" }} />
        ))}
      </div>
    </div>
  );
}