Compound Component

Related components designed to work together.

html

<div class="compnd" data-active="1">
  <code class="compnd__tag">&lt;Tabs&gt;</code>
  <div class="compnd__list">
    <span class="compnd__tab compnd__tab--1" style="--a:#D9C8F0;">Overview</span>
    <span class="compnd__tab compnd__tab--2" style="--a:#D9C8F0;">Settings</span>
    <span class="compnd__tab compnd__tab--3" style="--a:#D9C8F0;">Billing</span>
  </div>
  <div class="compnd__panel compnd__panel--1">Panel content for Overview</div>
  <div class="compnd__panel compnd__panel--2">Panel content for Settings</div>
  <div class="compnd__panel compnd__panel--3">Panel content for Billing</div>
</div>
<style>
.compnd { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.compnd__tag { display: block; font: 10px ui-monospace, monospace; color: #24143080; margin-bottom: 10px; }
.compnd__list { display: flex; gap: 6px; margin-bottom: 12px; }
.compnd__tab { flex: 1; text-align: center; padding: 8px; border-radius: 6px; background: #24143010; font-size: 11px; font-weight: 600; }
.compnd__panel { display: none; padding: 14px; border-radius: 8px; background: #ffffff; border: 1.5px solid #24143018; font-size: 12px; }
.compnd[data-active="1"] .compnd__tab--1, .compnd[data-active="2"] .compnd__tab--2, .compnd[data-active="3"] .compnd__tab--3 { background: var(--a); }
.compnd[data-active="1"] .compnd__panel--1, .compnd[data-active="2"] .compnd__panel--2, .compnd[data-active="3"] .compnd__panel--3 { display: block; }
</style>

tailwind

<div class="compndtw compndtw--1 font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <code class="block font-mono text-[10px] text-[#24143080] mb-2.5">&lt;Tabs&gt;</code>
  <div class="flex gap-1.5 mb-3">
    <span class="compndtw__tab compndtw__tab--1 flex-1 text-center py-2 rounded-md bg-[#24143010] text-[11px] font-semibold" style="--a:#D9C8F0;">Overview</span>
    <span class="compndtw__tab compndtw__tab--2 flex-1 text-center py-2 rounded-md bg-[#24143010] text-[11px] font-semibold" style="--a:#D9C8F0;">Settings</span>
    <span class="compndtw__tab compndtw__tab--3 flex-1 text-center py-2 rounded-md bg-[#24143010] text-[11px] font-semibold" style="--a:#D9C8F0;">Billing</span>
  </div>
  <div class="compndtw__panel compndtw__panel--1 hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-xs">Panel content for Overview</div>
  <div class="compndtw__panel compndtw__panel--2 hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-xs">Panel content for Settings</div>
  <div class="compndtw__panel compndtw__panel--3 hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-xs">Panel content for Billing</div>
</div>
<style>
.compndtw--1 .compndtw__tab--1, .compndtw--2 .compndtw__tab--2, .compndtw--3 .compndtw__tab--3 { background: var(--a); }
.compndtw--1 .compndtw__panel--1, .compndtw--2 .compndtw__panel--2, .compndtw--3 .compndtw__panel--3 { display: block; }
</style>

react

export function CompoundComponent({
  tab1 = "Overview",
  tab2 = "Settings",
  tab3 = "Billing",
  active = "1",
  accent = "#D9C8F0",
}) {
  const tabs = [{ id: "1", label: tab1 }, { id: "2", label: tab2 }, { id: "3", label: tab3 }];
  const activeTab = tabs.find((t) => t.id === active) ?? tabs[0];
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <code style={{ display: "block", fontSize: 10, color: "#24143080", marginBottom: 10 }}>&lt;Tabs&gt;</code>
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        {tabs.map((t) => (
          <span key={t.id} style={{ flex: 1, textAlign: "center", padding: 8, borderRadius: 6, fontSize: 11, fontWeight: 600, background: t.id === active ? accent : "#24143010" }}>{t.label}</span>
        ))}
      </div>
      <div style={{ padding: 14, borderRadius: 8, background: "#ffffff", border: "1.5px solid #24143018", fontSize: 12 }}>Panel content for {activeTab.label}</div>
    </div>
  );
}