Edit Component API

Name

Also known as (comma separated)

Brief definition Properties/events/configuration exposed by a component.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "label prop", "default": "Submit" }, { "id": "size", "type": "select", "label": "size prop", "default": "md", "options": [ "sm", "md", "lg" ] }, { "id": "disabled", "type": "toggle", "label": "disabled prop", "default": false }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"capi\">\n <table class=\"capi__table\">\n <tr><th>prop</th><th>value</th></tr>\n <tr><td>label</td><td>\"{{label}}\"</td></tr>\n <tr><td>size</td><td>\"{{size}}\"</td></tr>\n <tr><td>disabled</td><td>{{#if disabled}}true{{/if}}{{#unless disabled}}false{{/unless}}</td></tr>\n </table>\n <button class=\"capi__btn capi__btn--{{size}}\" type=\"button\" style=\"background:{{accent}};\" {{#if disabled}}disabled{{/if}}>{{label}}</button>\n</div>\n<style>\n.capi { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; max-width: 300px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }\n.capi__table { border-collapse: collapse; width: 100%; font-size: 12px; }\n.capi__table th, .capi__table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #24143018; }\n.capi__table th { color: #24143099; font-weight: 600; }\n.capi__btn { border: none; border-radius: 8px; color: #241430; font: 600 14px system-ui, sans-serif; cursor: pointer; width: fit-content; }\n.capi__btn--sm { padding: 6px 12px; font-size: 12px; }\n.capi__btn--md { padding: 10px 18px; font-size: 14px; }\n.capi__btn--lg { padding: 14px 26px; font-size: 17px; }\n.capi__btn:disabled { opacity: .4; cursor: not-allowed; }\n.capi__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl max-w-[300px] box-border flex flex-col gap-4\">\n <table class=\"border-collapse w-full text-xs\">\n <tr><th class=\"text-left py-1.5 px-2 border-b border-[#24143018] text-[#24143099]\">prop</th><th class=\"text-left py-1.5 px-2 border-b border-[#24143018] text-[#24143099]\">value</th></tr>\n <tr><td class=\"py-1.5 px-2 border-b border-[#24143018]\">label</td><td class=\"py-1.5 px-2 border-b border-[#24143018]\">\"{{label}}\"</td></tr>\n <tr><td class=\"py-1.5 px-2 border-b border-[#24143018]\">size</td><td class=\"py-1.5 px-2 border-b border-[#24143018]\">\"{{size}}\"</td></tr>\n <tr><td class=\"py-1.5 px-2\">disabled</td><td class=\"py-1.5 px-2\">{{#if disabled}}true{{/if}}{{#unless disabled}}false{{/unless}}</td></tr>\n </table>\n <button type=\"button\" class=\"capi-tw capi-tw--{{size}} border-none rounded-lg font-semibold cursor-pointer w-fit\" style=\"background:{{accent}};\" {{#if disabled}}disabled{{/if}}>{{label}}</button>\n</div>\n<style>\n.capi-tw--sm { padding: 6px 12px; font-size: 12px; }\n.capi-tw--md { padding: 10px 18px; font-size: 14px; }\n.capi-tw--lg { padding: 14px 26px; font-size: 17px; }\n.capi-tw:disabled { opacity: .4; cursor: not-allowed; }\n</style>", "react": "export function ComponentApi({\n label = \"{{label}}\",\n size = \"{{size}}\",\n disabled = {{disabled}},\n accent = \"{{accent}}\",\n}) {\n const pad = { sm: \"6px 12px\", md: \"10px 18px\", lg: \"14px 26px\" }[size];\n const fontSize = { sm: 12, md: 14, lg: 17 }[size];\n return (\n <div style={{ font: \"14px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, maxWidth: 300, boxSizing: \"border-box\", display: \"flex\", flexDirection: \"column\", gap: 16 }}>\n <table style={{ borderCollapse: \"collapse\", width: \"100%\", fontSize: 12 }}>\n <tbody>\n <tr><th style={{ textAlign: \"left\", padding: \"5px 8px\", color: \"#24143099\" }}>prop</th><th style={{ textAlign: \"left\", padding: \"5px 8px\", color: \"#24143099\" }}>value</th></tr>\n <tr><td style={{ padding: \"5px 8px\" }}>label</td><td style={{ padding: \"5px 8px\" }}>\"{label}\"</td></tr>\n <tr><td style={{ padding: \"5px 8px\" }}>size</td><td style={{ padding: \"5px 8px\" }}>\"{size}\"</td></tr>\n <tr><td style={{ padding: \"5px 8px\" }}>disabled</td><td style={{ padding: \"5px 8px\" }}>{String(disabled)}</td></tr>\n </tbody>\n </table>\n <button type=\"button\" disabled={disabled} style={{ background: accent, border: \"none\", borderRadius: 8, color: \"#241430\", fontWeight: 600, padding: pad, fontSize, cursor: disabled ? \"not-allowed\" : \"pointer\", opacity: disabled ? .4 : 1, width: \"fit-content\" }}>{label}</button>\n </div>\n );\n}" }