Primitive

Very low-level reusable UI building block.

html

<div class="uif-prim-stage" data-type="button">
  <button type="button" class="uif-prim-el uif-prim-el--button uif-prim-el--styled" style="--accent:#BFD9F2;">Continue</button>
  <label class="uif-prim-el uif-prim-el--checkbox uif-prim-el--styled" style="--accent:#BFD9F2;"><input type="checkbox" checked disabled /> Remember me</label>
  <input class="uif-prim-el uif-prim-el--input uif-prim-el--styled" style="--accent:#BFD9F2;" placeholder="Email address" disabled />
  <p class="uif-prim-caption">Composed &mdash; every composed component still boils down to a primitive</p>
</div>
<style>
.uif-prim-stage { width: 100%; max-width: 320px; padding: 18px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; }
.uif-prim-el { display: none; }
[data-type="button"] .uif-prim-el--button,
[data-type="checkbox"] .uif-prim-el--checkbox,
[data-type="input"] .uif-prim-el--input { display: block; }
.uif-prim-el--styled.uif-prim-el--button { padding: 9px 16px; border-radius: 8px; border: none; background: var(--accent); color: #241430; font-weight: 600; cursor: pointer; }
.uif-prim-el--styled.uif-prim-el--input { padding: 9px 12px; border-radius: 8px; border: 1.5px solid var(--accent); width: 100%; box-sizing: border-box; }
.uif-prim-caption { margin: 14px 0 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-[18px] bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70" data-type="button">
  <button type="button" class="tw-prim-button hidden" style="--accent:#BFD9F2;">Continue</button>
  <label class="tw-prim-checkbox hidden" style="--accent:#BFD9F2;"><input type="checkbox" checked disabled /> Remember me</label>
  <input class="tw-prim-input hidden" style="--accent:#BFD9F2;" placeholder="Email address" disabled />
  <p class="mt-3.5">Composed &mdash; every composed component still boils down to a primitive</p>
</div>
<style>
[data-type="button"] .tw-prim-button,
[data-type="checkbox"] .tw-prim-checkbox,
[data-type="input"] .tw-prim-input { display: block; }
</style>

react

export function Primitive({
  primitiveType = "button",
  styled = true,
  accent = "#BFD9F2",
}) {
  const styledBtn = styled ? { padding: "9px 16px", borderRadius: 8, border: "none", background: accent, color: "#241430", fontWeight: 600, cursor: "pointer" } : {};
  const styledInput = styled ? { padding: "9px 12px", borderRadius: 8, border: `1.5px solid ${accent}`, width: "100%", boxSizing: "border-box" } : {};
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 18, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa" }}>
      {primitiveType === "button" && <button type="button" style={styledBtn}>Continue</button>}
      {primitiveType === "checkbox" && <label><input type="checkbox" checked readOnly disabled /> Remember me</label>}
      {primitiveType === "input" && <input style={styledInput} placeholder="Email address" disabled />}
      <p style={{ margin: "14px 0 0" }}>{styled ? "Composed" : "Raw"} &mdash; every composed component still boils down to a primitive</p>
    </div>
  );
}