Edit Custom View · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"cview cview--{{viewType}}\">\n  <p class=\"cview__name\">&#9733; {{viewName}}{{#if showCount}} <span class=\"cview__count\">3</span>{{/if}}</p>\n  <table class=\"cview__table\">\n    <tr><td>Acme Co</td><td>$4,200</td></tr>\n    <tr><td>Globex</td><td>$1,800</td></tr>\n    <tr><td>Initech</td><td>$9,050</td></tr>\n  </table>\n  <div class=\"cview__cards\">\n    <div class=\"cview__card\" style=\"border-top-color:{{accent}};\">Acme Co<b>$4,200</b></div>\n    <div class=\"cview__card\" style=\"border-top-color:{{accent}};\">Globex<b>$1,800</b></div>\n    <div class=\"cview__card\" style=\"border-top-color:{{accent}};\">Initech<b>$9,050</b></div>\n  </div>\n  <ul class=\"cview__list\">\n    <li><span class=\"cview__dot\" style=\"background:{{accent}};\"></span>Acme Co &mdash; $4,200</li>\n    <li><span class=\"cview__dot\" style=\"background:{{accent}};\"></span>Globex &mdash; $1,800</li>\n    <li><span class=\"cview__dot\" style=\"background:{{accent}};\"></span>Initech &mdash; $9,050</li>\n  </ul>\n</div>\n<style>\n.cview { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.cview__name { margin: 0 0 12px; font-weight: 700; }\n.cview__count { font-size: 10px; color: #24143099; font-weight: 400; }\n.cview__table, .cview__cards, .cview__list { display: none; }\n.cview__table { width: 100%; border-collapse: collapse; }\n.cview__table td { padding: 6px 4px; border-bottom: 1px solid #24143014; }\n.cview__cards { display: none; gap: 8px; }\n.cview__card { flex: 1; padding: 10px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; border-top: 4px solid; text-align: center; }\n.cview__card b { display: block; margin-top: 4px; }\n.cview__list { list-style: none; margin: 0; padding: 0; }\n.cview__list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }\n.cview__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }\n.cview--table .cview__table { display: table; }\n.cview--cards .cview__cards { display: flex; }\n.cview--list .cview__list { display: block; }\n</style>",
  "tailwind": "<div class=\"cviewtw cviewtw--{{viewType}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\">\n  <p class=\"m-0 mb-3 font-bold\">&#9733; {{viewName}}{{#if showCount}} <span class=\"text-[10px] text-[#24143099] font-normal\">3</span>{{/if}}</p>\n  <table class=\"cviewtw__table hidden w-full border-collapse\"><tr><td class=\"py-1.5 px-1 border-b border-[#24143014]\">Acme Co</td><td class=\"py-1.5 px-1 border-b border-[#24143014]\">$4,200</td></tr><tr><td class=\"py-1.5 px-1 border-b border-[#24143014]\">Globex</td><td class=\"py-1.5 px-1 border-b border-[#24143014]\">$1,800</td></tr><tr><td class=\"py-1.5 px-1\">Initech</td><td class=\"py-1.5 px-1\">$9,050</td></tr></table>\n  <div class=\"cviewtw__cards hidden gap-2\">\n    <div class=\"flex-1 p-2.5 rounded-lg bg-white border border-[#24143018] border-t-4 text-center\" style=\"border-top-color:{{accent}};\">Acme Co<b class=\"block mt-1\">$4,200</b></div>\n    <div class=\"flex-1 p-2.5 rounded-lg bg-white border border-[#24143018] border-t-4 text-center\" style=\"border-top-color:{{accent}};\">Globex<b class=\"block mt-1\">$1,800</b></div>\n    <div class=\"flex-1 p-2.5 rounded-lg bg-white border border-[#24143018] border-t-4 text-center\" style=\"border-top-color:{{accent}};\">Initech<b class=\"block mt-1\">$9,050</b></div>\n  </div>\n  <ul class=\"cviewtw__list hidden list-none m-0 p-0\">\n    <li class=\"flex items-center gap-2 py-1.5\"><span class=\"w-2 h-2 rounded-full shrink-0\" style=\"background:{{accent}};\"></span>Acme Co &mdash; $4,200</li>\n    <li class=\"flex items-center gap-2 py-1.5\"><span class=\"w-2 h-2 rounded-full shrink-0\" style=\"background:{{accent}};\"></span>Globex &mdash; $1,800</li>\n    <li class=\"flex items-center gap-2 py-1.5\"><span class=\"w-2 h-2 rounded-full shrink-0\" style=\"background:{{accent}};\"></span>Initech &mdash; $9,050</li>\n  </ul>\n</div>\n<style>\n.cviewtw--table .cviewtw__table { display: table; }\n.cviewtw--cards .cviewtw__cards { display: flex; }\n.cviewtw--list .cviewtw__list { display: block; }\n</style>",
  "react": "export function CustomView({\n  viewType = \"{{viewType}}\",\n  accent = \"{{accent}}\",\n  showCount = {{showCount}},\n  viewName = \"{{viewName}}\",\n}) {\n  const rows = [[\"Acme Co\", \"$4,200\"], [\"Globex\", \"$1,800\"], [\"Initech\", \"$9,050\"]];\n  return (\n    <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n      <p style={{ margin: \"0 0 12px\", fontWeight: 700 }}>&#9733; {viewName}{showCount && <span style={{ fontSize: 10, color: \"#24143099\", fontWeight: 400 }}> 3</span>}</p>\n      {viewType === \"table\" && (\n        <table style={{ width: \"100%\", borderCollapse: \"collapse\" }}>\n          <tbody>{rows.map(([n, v]) => <tr key={n}><td style={{ padding: \"6px 4px\", borderBottom: \"1px solid #24143014\" }}>{n}</td><td style={{ padding: \"6px 4px\", borderBottom: \"1px solid #24143014\" }}>{v}</td></tr>)}</tbody>\n        </table>\n      )}\n      {viewType === \"cards\" && (\n        <div style={{ display: \"flex\", gap: 8 }}>\n          {rows.map(([n, v]) => <div key={n} style={{ flex: 1, padding: 10, borderRadius: 8, background: \"#ffffff\", border: \"1px solid #24143018\", borderTop: `4px solid ${accent}`, textAlign: \"center\" }}>{n}<b style={{ display: \"block\", marginTop: 4 }}>{v}</b></div>)}\n        </div>\n      )}\n      {viewType === \"list\" && (\n        <ul style={{ listStyle: \"none\", margin: 0, padding: 0 }}>\n          {rows.map(([n, v]) => <li key={n} style={{ display: \"flex\", alignItems: \"center\", gap: 8, padding: \"6px 0\" }}><span style={{ width: 8, height: 8, borderRadius: \"50%\", flexShrink: 0, background: accent }} />{n} &mdash; {v}</li>)}\n        </ul>\n      )}\n    </div>\n  );\n}"
}