Edit Composite Component

Name

Also known as (comma separated)

Brief definition Component composed of several components.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "name", "type": "text", "label": "Composite name", "default": "Toolbar" }, { "id": "childCount", "type": "select", "label": "Children composed in", "default": "3", "options": [ "0", "1", "3" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showLabels", "type": "toggle", "label": "Label each child", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"comp2\" data-count=\"{{childCount}}\">\n <p class=\"comp2__name\">&lt;{{name}}&gt;</p>\n <div class=\"comp2__row\">\n <div class=\"comp2__child\" style=\"background:{{accent}};\">{{#if showLabels}}Button{{/if}}</div>\n <div class=\"comp2__child\" style=\"background:{{accent}};\">{{#if showLabels}}Button{{/if}}</div>\n <div class=\"comp2__child\" style=\"background:{{accent}};\">{{#if showLabels}}Button{{/if}}</div>\n </div>\n <p class=\"comp2__name\">&lt;/{{name}}&gt;</p>\n</div>\n<style>\n.comp2 { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; border: 1.5px dashed #24143030; }\n.comp2__name { margin: 0; font: 11px ui-monospace, monospace; color: #24143099; }\n.comp2__row { display: flex; gap: 8px; min-height: 34px; padding: 8px 0; }\n.comp2__child { flex: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }\n.comp2[data-count=\"0\"] .comp2__child { display: none; }\n.comp2[data-count=\"1\"] .comp2__child:nth-child(n+2) { display: none; }\n</style>", "tailwind": "<div class=\"comp2tw comp2tw--{{childCount}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border border border-dashed border-[#24143030]\">\n <p class=\"m-0 font-mono text-[11px] text-[#24143099]\">&lt;{{name}}&gt;</p>\n <div class=\"comp2tw__row flex gap-2 min-h-[34px] py-2\">\n <div class=\"comp2tw__child flex-1 rounded-md flex items-center justify-center text-[11px] font-semibold\" style=\"background:{{accent}};\">{{#if showLabels}}Button{{/if}}</div>\n <div class=\"comp2tw__child flex-1 rounded-md flex items-center justify-center text-[11px] font-semibold\" style=\"background:{{accent}};\">{{#if showLabels}}Button{{/if}}</div>\n <div class=\"comp2tw__child flex-1 rounded-md flex items-center justify-center text-[11px] font-semibold\" style=\"background:{{accent}};\">{{#if showLabels}}Button{{/if}}</div>\n </div>\n <p class=\"m-0 font-mono text-[11px] text-[#24143099]\">&lt;/{{name}}&gt;</p>\n</div>\n<style>\n.comp2tw--0 .comp2tw__child { display: none; }\n.comp2tw--1 .comp2tw__child:nth-child(n+2) { display: none; }\n</style>", "react": "export function CompositeComponent({\n name = \"{{name}}\",\n childCount = \"{{childCount}}\",\n accent = \"{{accent}}\",\n showLabels = {{showLabels}},\n}) {\n const n = Number(childCount);\n const children = [0, 1, 2].filter((i) => i < n);\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\", border: \"1.5px dashed #24143030\" }}>\n <p style={{ margin: 0, fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>&lt;{name}&gt;</p>\n <div style={{ display: \"flex\", gap: 8, minHeight: 34, padding: \"8px 0\" }}>\n {children.map((i) => (\n <div key={i} style={{ flex: 1, borderRadius: 6, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", fontSize: 11, fontWeight: 600, background: accent }}>\n {showLabels && \"Button\"}\n </div>\n ))}\n </div>\n <p style={{ margin: 0, fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>&lt;/{name}&gt;</p>\n </div>\n );\n}" }