Component

Reusable UI building block.

html

<div class="uif-cmp-stage">
  <p class="uif-cmp-note">One component definition, three independent instances:</p>
  <div class="uif-cmp-row">
    <button type="button" class="uif-cmp-btn uif-cmp-btn--primary" style="font-size:14px; --accent:#241430;">Button A</button>
    <button type="button" class="uif-cmp-btn uif-cmp-btn--primary" style="font-size:14px; --accent:#241430;">Button B</button>
    <button type="button" class="uif-cmp-btn uif-cmp-btn--primary" style="font-size:14px; --accent:#241430;">Button C</button>
  </div>
</div>
<style>
.uif-cmp-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 13px system-ui, sans-serif; color: #241430aa; }
.uif-cmp-note { margin: 0 0 12px; }
.uif-cmp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.uif-cmp-btn { font-weight: 600; padding: 8px 12px; border-radius: 8px; cursor: pointer; border: 1.5px solid var(--accent); }
.uif-cmp-btn--primary { background: var(--accent); color: #FAF7F2; }
.uif-cmp-btn--secondary { background: transparent; color: var(--accent); }
.uif-cmp-btn--danger { background: #fff; color: var(--accent); border-style: dashed; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-sm text-[#241430]/70">
  <p class="m-0 mb-3">One component definition, three independent instances:</p>
  <div class="flex gap-2 flex-wrap">
    <button type="button" class="tw-cmp-btn tw-cmp-btn--primary font-semibold px-3 py-2 rounded-lg cursor-pointer border-[1.5px]" style="font-size:14px; --accent:#241430; border-color:#241430;">Button A</button>
    <button type="button" class="tw-cmp-btn tw-cmp-btn--primary font-semibold px-3 py-2 rounded-lg cursor-pointer border-[1.5px]" style="font-size:14px; --accent:#241430; border-color:#241430;">Button B</button>
    <button type="button" class="tw-cmp-btn tw-cmp-btn--primary font-semibold px-3 py-2 rounded-lg cursor-pointer border-[1.5px]" style="font-size:14px; --accent:#241430; border-color:#241430;">Button C</button>
  </div>
</div>
<style>
.tw-cmp-btn--primary { background: var(--accent); color: #FAF7F2; }
.tw-cmp-btn--secondary { background: transparent; color: var(--accent); }
.tw-cmp-btn--danger { background: #fff; color: var(--accent); border-style: dashed; }
</style>

react

export function Component({
  variant = "primary",
  size = 14,
  label = "Button",
  accent = "#241430",
}) {
  const styles = {
    primary: { background: accent, color: "#FAF7F2", borderStyle: "solid" },
    secondary: { background: "transparent", color: accent, borderStyle: "solid" },
    danger: { background: "#fff", color: accent, borderStyle: "dashed" },
  }[variant];
  const Instance = ({ suffix }) => (
    <button type="button" style={{ fontWeight: 600, padding: "8px 12px", borderRadius: 8, cursor: "pointer", border: `1.5px ${styles.borderStyle} ${accent}`, fontSize: size, background: styles.background, color: styles.color }}>
      {label} {suffix}
    </button>
  );
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430aa" }}>
      <p style={{ margin: "0 0 12px" }}>One component definition, three independent instances:</p>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <Instance suffix="A" />
        <Instance suffix="B" />
        <Instance suffix="C" />
      </div>
    </div>
  );
}