Edit Props

Name

Also known as (comma separated)

Brief definition Data/configuration passed to a component.

Notes

Tier Core Useful Reference Deleted

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

Templates (JSON object keyed by format) { "html": "<div class=\"propsx\">\n <code class=\"propsx__obj\">{ text: \"{{text}}\", color: \"{{color}}\", size: \"{{size}}\", uppercase: {{#if uppercase}}true{{/if}}{{#unless uppercase}}false{{/unless}} }</code>\n <span class=\"propsx__arrow\" aria-hidden=\"true\">&darr; passed as props</span>\n <span class=\"propsx__chip propsx__chip--{{size}}{{#if uppercase}} propsx__chip--upper{{/if}}\" style=\"background:{{color}};\">{{text}}</span>\n</div>\n<style>\n.propsx { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; text-align: center; }\n.propsx__obj { display: block; font: 11px ui-monospace, monospace; background: #24143012; padding: 8px 10px; border-radius: 6px; margin-bottom: 10px; word-break: break-all; text-align: left; }\n.propsx__arrow { display: block; font-size: 10px; color: #24143080; margin-bottom: 12px; }\n.propsx__chip { display: inline-block; border-radius: 999px; font-weight: 700; color: #241430; }\n.propsx__chip--sm { padding: 4px 10px; font-size: 11px; }\n.propsx__chip--md { padding: 8px 18px; font-size: 14px; }\n.propsx__chip--lg { padding: 12px 26px; font-size: 18px; }\n.propsx__chip--upper { text-transform: uppercase; letter-spacing: .04em; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border text-center\">\n <code class=\"block font-mono text-[11px] bg-[#24143012] py-2 px-2.5 rounded-md mb-2.5 break-all text-left\">{ text: \"{{text}}\", color: \"{{color}}\", size: \"{{size}}\", uppercase: {{#if uppercase}}true{{/if}}{{#unless uppercase}}false{{/unless}} }</code>\n <span class=\"block text-[10px] text-[#24143080] mb-3\" aria-hidden=\"true\">&darr; passed as props</span>\n <span class=\"propstw propstw--{{size}} inline-block rounded-full font-bold text-[#241430]{{#if uppercase}} uppercase tracking-wide{{/if}}\" style=\"background:{{color}};\">{{text}}</span>\n</div>\n<style>\n.propstw--sm { padding: 4px 10px; font-size: 11px; }\n.propstw--md { padding: 8px 18px; font-size: 14px; }\n.propstw--lg { padding: 12px 26px; font-size: 18px; }\n</style>", "react": "export function Props({\n text = \"{{text}}\",\n color = \"{{color}}\",\n size = \"{{size}}\",\n uppercase = {{uppercase}},\n}) {\n const dims = { sm: { padding: \"4px 10px\", fontSize: 11 }, md: { padding: \"8px 18px\", fontSize: 14 }, lg: { padding: \"12px 26px\", fontSize: 18 } }[size];\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 280, boxSizing: \"border-box\", textAlign: \"center\" }}>\n <code style={{ display: \"block\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, background: \"#24143012\", padding: \"8px 10px\", borderRadius: 6, marginBottom: 10, wordBreak: \"break-all\", textAlign: \"left\" }}>{`{ text: \"${text}\", color: \"${color}\", size: \"${size}\", uppercase: ${uppercase} }`}</code>\n <span style={{ display: \"block\", fontSize: 10, color: \"#24143080\", marginBottom: 12 }} aria-hidden=\"true\">&darr; passed as props</span>\n <span style={{ display: \"inline-block\", borderRadius: 999, fontWeight: 700, color: \"#241430\", background: color, textTransform: uppercase ? \"uppercase\" : \"none\", letterSpacing: uppercase ? \".04em\" : \"normal\", ...dims }}>{text}</span>\n </div>\n );\n}" }