Edit Compound Component

Name

Also known as (comma separated)

Brief definition Related components designed to work together.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "tab1", "type": "text", "label": "Tab 1 label", "default": "Overview" }, { "id": "tab2", "type": "text", "label": "Tab 2 label", "default": "Settings" }, { "id": "tab3", "type": "text", "label": "Tab 3 label", "default": "Billing" }, { "id": "active", "type": "select", "label": "Active tab", "default": "1", "options": [ "1", "2", "3" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"compnd\" data-active=\"{{active}}\">\n <code class=\"compnd__tag\">&lt;Tabs&gt;</code>\n <div class=\"compnd__list\">\n <span class=\"compnd__tab compnd__tab--1\" style=\"--a:{{accent}};\">{{tab1}}</span>\n <span class=\"compnd__tab compnd__tab--2\" style=\"--a:{{accent}};\">{{tab2}}</span>\n <span class=\"compnd__tab compnd__tab--3\" style=\"--a:{{accent}};\">{{tab3}}</span>\n </div>\n <div class=\"compnd__panel compnd__panel--1\">Panel content for {{tab1}}</div>\n <div class=\"compnd__panel compnd__panel--2\">Panel content for {{tab2}}</div>\n <div class=\"compnd__panel compnd__panel--3\">Panel content for {{tab3}}</div>\n</div>\n<style>\n.compnd { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.compnd__tag { display: block; font: 10px ui-monospace, monospace; color: #24143080; margin-bottom: 10px; }\n.compnd__list { display: flex; gap: 6px; margin-bottom: 12px; }\n.compnd__tab { flex: 1; text-align: center; padding: 8px; border-radius: 6px; background: #24143010; font-size: 11px; font-weight: 600; }\n.compnd__panel { display: none; padding: 14px; border-radius: 8px; background: #ffffff; border: 1.5px solid #24143018; font-size: 12px; }\n.compnd[data-active=\"1\"] .compnd__tab--1, .compnd[data-active=\"2\"] .compnd__tab--2, .compnd[data-active=\"3\"] .compnd__tab--3 { background: var(--a); }\n.compnd[data-active=\"1\"] .compnd__panel--1, .compnd[data-active=\"2\"] .compnd__panel--2, .compnd[data-active=\"3\"] .compnd__panel--3 { display: block; }\n</style>", "tailwind": "<div class=\"compndtw compndtw--{{active}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <code class=\"block font-mono text-[10px] text-[#24143080] mb-2.5\">&lt;Tabs&gt;</code>\n <div class=\"flex gap-1.5 mb-3\">\n <span class=\"compndtw__tab compndtw__tab--1 flex-1 text-center py-2 rounded-md bg-[#24143010] text-[11px] font-semibold\" style=\"--a:{{accent}};\">{{tab1}}</span>\n <span class=\"compndtw__tab compndtw__tab--2 flex-1 text-center py-2 rounded-md bg-[#24143010] text-[11px] font-semibold\" style=\"--a:{{accent}};\">{{tab2}}</span>\n <span class=\"compndtw__tab compndtw__tab--3 flex-1 text-center py-2 rounded-md bg-[#24143010] text-[11px] font-semibold\" style=\"--a:{{accent}};\">{{tab3}}</span>\n </div>\n <div class=\"compndtw__panel compndtw__panel--1 hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-xs\">Panel content for {{tab1}}</div>\n <div class=\"compndtw__panel compndtw__panel--2 hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-xs\">Panel content for {{tab2}}</div>\n <div class=\"compndtw__panel compndtw__panel--3 hidden p-3.5 rounded-lg bg-white border border-[#24143018] text-xs\">Panel content for {{tab3}}</div>\n</div>\n<style>\n.compndtw--1 .compndtw__tab--1, .compndtw--2 .compndtw__tab--2, .compndtw--3 .compndtw__tab--3 { background: var(--a); }\n.compndtw--1 .compndtw__panel--1, .compndtw--2 .compndtw__panel--2, .compndtw--3 .compndtw__panel--3 { display: block; }\n</style>", "react": "export function CompoundComponent({\n tab1 = \"{{tab1}}\",\n tab2 = \"{{tab2}}\",\n tab3 = \"{{tab3}}\",\n active = \"{{active}}\",\n accent = \"{{accent}}\",\n}) {\n const tabs = [{ id: \"1\", label: tab1 }, { id: \"2\", label: tab2 }, { id: \"3\", label: tab3 }];\n const activeTab = tabs.find((t) => t.id === active) ?? tabs[0];\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <code style={{ display: \"block\", fontSize: 10, color: \"#24143080\", marginBottom: 10 }}>&lt;Tabs&gt;</code>\n <div style={{ display: \"flex\", gap: 6, marginBottom: 12 }}>\n {tabs.map((t) => (\n <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>\n ))}\n </div>\n <div style={{ padding: 14, borderRadius: 8, background: \"#ffffff\", border: \"1.5px solid #24143018\", fontSize: 12 }}>Panel content for {activeTab.label}</div>\n </div>\n );\n}" }