Edit Composition

Name

Also known as (comma separated)

Brief definition Combining components to create larger structures.

Notes **Component Architecture:** Building components from smaller components.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "showHeader", "type": "toggle", "label": "Compose header slot", "default": true }, { "id": "showFooter", "type": "toggle", "label": "Compose footer slot", "default": true }, { "id": "layout", "type": "select", "label": "Layout", "default": "stacked", "options": [ "stacked", "inline" ] }, { "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=\"comp comp--{{layout}}\" style=\"--accent:{{accent}};\" role=\"img\" aria-label=\"Composed panel, layout {{layout}}, header {{#if showHeader}}present{{/if}}{{#unless showHeader}}absent{{/unless}}, footer {{#if showFooter}}present{{/if}}{{#unless showFooter}}absent{{/unless}}\">\n {{#if showHeader}}<div class=\"comp__slot comp__slot--header\">Header</div>{{/if}}\n <div class=\"comp__slot comp__slot--body\">Body</div>\n {{#if showFooter}}<div class=\"comp__slot comp__slot--footer\">Footer</div>{{/if}}\n</div>\n<style>\n.comp { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; display: flex; gap: 8px; border: 1.5px dashed #24143030; }\n.comp--stacked { flex-direction: column; }\n.comp--inline { flex-direction: row; }\n.comp__slot { padding: 14px; border-radius: 8px; background: #24143010; text-align: center; flex: 1; box-sizing: border-box; }\n.comp__slot--header, .comp__slot--footer { background: var(--accent); font-weight: 600; }\n</style>", "tailwind": "<div class=\"comptw comptw--{{layout}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border flex gap-2 border border-dashed border-[#24143030]\" style=\"--accent:{{accent}};\" role=\"img\" aria-label=\"Composed panel, layout {{layout}}, header {{#if showHeader}}present{{/if}}{{#unless showHeader}}absent{{/unless}}, footer {{#if showFooter}}present{{/if}}{{#unless showFooter}}absent{{/unless}}\">\n {{#if showHeader}}<div class=\"p-3.5 rounded-lg text-center flex-1 box-border font-semibold\" style=\"background:{{accent}};\">Header</div>{{/if}}\n <div class=\"p-3.5 rounded-lg text-center flex-1 box-border bg-[#24143010]\">Body</div>\n {{#if showFooter}}<div class=\"p-3.5 rounded-lg text-center flex-1 box-border font-semibold\" style=\"background:{{accent}};\">Footer</div>{{/if}}\n</div>\n<style>\n.comptw--stacked { flex-direction: column; }\n.comptw--inline { flex-direction: row; }\n</style>", "react": "export function Composition({\n showHeader = {{showHeader}},\n showFooter = {{showFooter}},\n layout = \"{{layout}}\",\n accent = \"{{accent}}\",\n}) {\n const label = `Composed panel, layout ${layout}, header ${showHeader ? \"present\" : \"absent\"}, footer ${showFooter ? \"present\" : \"absent\"}`;\n return (\n <div role=\"img\" aria-label={label} style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\",\n display: \"flex\", flexDirection: layout === \"stacked\" ? \"column\" : \"row\", gap: 8, border: \"1.5px dashed #24143030\" }}>\n {showHeader && <div style={{ padding: 14, borderRadius: 8, textAlign: \"center\", flex: 1, boxSizing: \"border-box\", background: accent, fontWeight: 600 }}>Header</div>}\n <div style={{ padding: 14, borderRadius: 8, textAlign: \"center\", flex: 1, boxSizing: \"border-box\", background: \"#24143010\" }}>Body</div>\n {showFooter && <div style={{ padding: 14, borderRadius: 8, textAlign: \"center\", flex: 1, boxSizing: \"border-box\", background: accent, fontWeight: 600 }}>Footer</div>}\n </div>\n );\n}" }