Edit Atomic Component

Name

Also known as (comma separated)

Brief definition Very small reusable component.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Atom name", "default": "Icon" }, { "id": "shape", "type": "select", "label": "Shape", "default": "circle", "options": [ "circle", "square", "diamond" ] }, { "id": "count", "type": "number", "label": "Instances reused", "default": 3, "min": 1, "max": 6, "step": 1 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"atomic atomic--{{shape}}\" data-count=\"{{count}}\" role=\"img\" aria-label=\"{{count}} reused instances of the {{label}} atom\">\n <p class=\"atomic__label\">&lt;{{label}} /&gt; &mdash; one atomic component, reused {{count}}&times;</p>\n <div class=\"atomic__row\">\n <span class=\"atomic__atom\" style=\"background:{{accent}};\"></span>\n <span class=\"atomic__atom\" style=\"background:{{accent}};\"></span>\n <span class=\"atomic__atom\" style=\"background:{{accent}};\"></span>\n <span class=\"atomic__atom\" style=\"background:{{accent}};\"></span>\n <span class=\"atomic__atom\" style=\"background:{{accent}};\"></span>\n <span class=\"atomic__atom\" style=\"background:{{accent}};\"></span>\n </div>\n</div>\n<style>\n.atomic { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.atomic__label { margin: 0 0 14px; font-size: 11px; color: #24143099; }\n.atomic__row { display: flex; gap: 8px; flex-wrap: wrap; }\n.atomic__atom { display: block; width: 28px; height: 28px; }\n.atomic--circle .atomic__atom { border-radius: 50%; }\n.atomic--square .atomic__atom { border-radius: 4px; }\n.atomic--diamond .atomic__atom { border-radius: 4px; transform: rotate(45deg); }\n.atomic[data-count=\"1\"] .atomic__atom:nth-child(n+2) { display: none; }\n.atomic[data-count=\"2\"] .atomic__atom:nth-child(n+3) { display: none; }\n.atomic[data-count=\"3\"] .atomic__atom:nth-child(n+4) { display: none; }\n.atomic[data-count=\"4\"] .atomic__atom:nth-child(n+5) { display: none; }\n.atomic[data-count=\"5\"] .atomic__atom:nth-child(n+6) { display: none; }\n</style>", "tailwind": "<div class=\"atomictw atomictw--{{shape}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\" data-count=\"{{count}}\" role=\"img\" aria-label=\"{{count}} reused instances of the {{label}} atom\">\n <p class=\"m-0 mb-3.5 text-[11px] text-[#24143099]\">&lt;{{label}} /&gt; &mdash; one atomic component, reused {{count}}&times;</p>\n <div class=\"flex gap-2 flex-wrap\">\n <span class=\"atomictw__atom block w-7 h-7\" style=\"background:{{accent}};\"></span>\n <span class=\"atomictw__atom block w-7 h-7\" style=\"background:{{accent}};\"></span>\n <span class=\"atomictw__atom block w-7 h-7\" style=\"background:{{accent}};\"></span>\n <span class=\"atomictw__atom block w-7 h-7\" style=\"background:{{accent}};\"></span>\n <span class=\"atomictw__atom block w-7 h-7\" style=\"background:{{accent}};\"></span>\n <span class=\"atomictw__atom block w-7 h-7\" style=\"background:{{accent}};\"></span>\n </div>\n</div>\n<style>\n.atomictw--circle .atomictw__atom { border-radius: 50%; }\n.atomictw--square .atomictw__atom { border-radius: 4px; }\n.atomictw--diamond .atomictw__atom { border-radius: 4px; transform: rotate(45deg); }\n.atomictw[data-count=\"1\"] .atomictw__atom:nth-child(n+2) { display: none; }\n.atomictw[data-count=\"2\"] .atomictw__atom:nth-child(n+3) { display: none; }\n.atomictw[data-count=\"3\"] .atomictw__atom:nth-child(n+4) { display: none; }\n.atomictw[data-count=\"4\"] .atomictw__atom:nth-child(n+5) { display: none; }\n.atomictw[data-count=\"5\"] .atomictw__atom:nth-child(n+6) { display: none; }\n</style>", "react": "export function AtomicComponent({\n label = \"{{label}}\",\n shape = \"{{shape}}\",\n count = {{count}},\n accent = \"{{accent}}\",\n}) {\n const radius = shape === \"circle\" ? \"50%\" : \"4px\";\n const items = [0, 1, 2, 3, 4, 5].filter((i) => i < count);\n return (\n <div role=\"img\" aria-label={`${count} reused instances of the ${label} atom`} style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 20, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 14px\", fontSize: 11, color: \"#24143099\" }}>&lt;{label} /&gt; &mdash; one atomic component, reused {count}&times;</p>\n <div style={{ display: \"flex\", gap: 8, flexWrap: \"wrap\" }}>\n {items.map((i) => (\n <span key={i} style={{ display: \"block\", width: 28, height: 28, background: accent, borderRadius: radius, transform: shape === \"diamond\" ? \"rotate(45deg)\" : \"none\" }} />\n ))}\n </div>\n </div>\n );\n}" }