Component Library

Collection of reusable components.

html

<div class="clib clib--active-button" style="--accent:#A8E6C1;" role="img" aria-label="Atlas UI component library, button selected">
  <p class="clib__name">Atlas UI</p>
  <div class="clib__grid">
    <div class="clib__item clib__item--button"><span class="clib__swatch">Btn</span><small>Button</small></div>
    <div class="clib__item clib__item--card"><span class="clib__swatch"></span><small>Card</small></div>
    <div class="clib__item clib__item--badge"><span class="clib__swatch">&bull;</span><small>Badge</small></div>
    <div class="clib__item clib__item--input"><span class="clib__swatch">|</span><small>Input</small></div>
  </div>
</div>
<style>
.clib { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.clib__name { margin: 0 0 12px; font-weight: 700; }
.clib__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.clib__item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.clib__swatch { display: grid; place-items: center; width: 100%; height: 44px; border-radius: 8px; background: #24143010; font-size: 12px; box-sizing: border-box; border: 2px solid transparent; }
.clib__item small { font-size: 10px; color: #24143099; }
.clib--active-button .clib__item--button .clib__swatch,
.clib--active-card .clib__item--card .clib__swatch,
.clib--active-badge .clib__item--badge .clib__swatch,
.clib--active-input .clib__item--input .clib__swatch { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, #FAF7F2); }
</style>

tailwind

<div class="clibtw clibtw--active-button font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border" style="--accent:#A8E6C1;" role="img" aria-label="Atlas UI component library, button selected">
  <p class="m-0 mb-3 font-bold">Atlas UI</p>
  <div class="grid grid-cols-4 gap-2.5 text-center">
    <div class="clibtw__item flex flex-col items-center gap-1.5"><span class="clibtw__swatch grid place-items-center w-full h-11 rounded-lg bg-[#24143010] text-xs box-border border-2 border-transparent" data-c="button">Btn</span><small class="text-[10px] text-[#24143099]">Button</small></div>
    <div class="clibtw__item flex flex-col items-center gap-1.5"><span class="clibtw__swatch grid place-items-center w-full h-11 rounded-lg bg-[#24143010] text-xs box-border border-2 border-transparent" data-c="card"></span><small class="text-[10px] text-[#24143099]">Card</small></div>
    <div class="clibtw__item flex flex-col items-center gap-1.5"><span class="clibtw__swatch grid place-items-center w-full h-11 rounded-lg bg-[#24143010] text-xs box-border border-2 border-transparent" data-c="badge">&bull;</span><small class="text-[10px] text-[#24143099]">Badge</small></div>
    <div class="clibtw__item flex flex-col items-center gap-1.5"><span class="clibtw__swatch grid place-items-center w-full h-11 rounded-lg bg-[#24143010] text-xs box-border border-2 border-transparent" data-c="input">|</span><small class="text-[10px] text-[#24143099]">Input</small></div>
  </div>
</div>
<style>
.clibtw--active-button [data-c="button"], .clibtw--active-card [data-c="card"], .clibtw--active-badge [data-c="badge"], .clibtw--active-input [data-c="input"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, #FAF7F2); }
</style>

react

export function ComponentLibrary({
  libraryName = "Atlas UI",
  activeComponent = "button",
  accent = "#A8E6C1",
  showLabels = true,
}) {
  const items = [
    { key: "button", swatch: "Btn", label: "Button" },
    { key: "card", swatch: "", label: "Card" },
    { key: "badge", swatch: "\u2022", label: "Badge" },
    { key: "input", swatch: "|", label: "Input" },
  ];
  return (
    <div role="img" aria-label={`${libraryName} component library, ${activeComponent} selected`}
      style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontWeight: 700 }}>{libraryName}</p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 10, textAlign: "center" }}>
        {items.map((it) => (
          <div key={it.key} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
            <span style={{ display: "grid", placeItems: "center", width: "100%", height: 44, borderRadius: 8, fontSize: 12, boxSizing: "border-box",
              border: `2px solid ${it.key === activeComponent ? accent : "transparent"}`,
              background: it.key === activeComponent ? `color-mix(in srgb, ${accent} 30%, #FAF7F2)` : "#24143010" }}>{it.swatch}</span>
            {showLabels && <small style={{ fontSize: 10, color: "#24143099" }}>{it.label}</small>}
          </div>
        ))}
      </div>
    </div>
  );
}