Edit Component Library · 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=\"clib clib--active-{{activeComponent}}\" style=\"--accent:{{accent}};\" role=\"img\" aria-label=\"{{libraryName}} component library, {{activeComponent}} selected\">\n  <p class=\"clib__name\">{{libraryName}}</p>\n  <div class=\"clib__grid\">\n    <div class=\"clib__item clib__item--button\"><span class=\"clib__swatch\">Btn</span>{{#if showLabels}}<small>Button</small>{{/if}}</div>\n    <div class=\"clib__item clib__item--card\"><span class=\"clib__swatch\"></span>{{#if showLabels}}<small>Card</small>{{/if}}</div>\n    <div class=\"clib__item clib__item--badge\"><span class=\"clib__swatch\">&bull;</span>{{#if showLabels}}<small>Badge</small>{{/if}}</div>\n    <div class=\"clib__item clib__item--input\"><span class=\"clib__swatch\">|</span>{{#if showLabels}}<small>Input</small>{{/if}}</div>\n  </div>\n</div>\n<style>\n.clib { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.clib__name { margin: 0 0 12px; font-weight: 700; }\n.clib__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }\n.clib__item { display: flex; flex-direction: column; align-items: center; gap: 6px; }\n.clib__swatch { display: grid; place-items: center; width: 100%; height: 44px; border-radius: 8px; background: #24143010; font-size: 12px; box-sizing: border-box; border: 2px solid transparent; }\n.clib__item small { font-size: 10px; color: #24143099; }\n.clib--active-button .clib__item--button .clib__swatch,\n.clib--active-card .clib__item--card .clib__swatch,\n.clib--active-badge .clib__item--badge .clib__swatch,\n.clib--active-input .clib__item--input .clib__swatch { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, #FAF7F2); }\n</style>",
  "tailwind": "<div class=\"clibtw clibtw--active-{{activeComponent}} font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border\" style=\"--accent:{{accent}};\" role=\"img\" aria-label=\"{{libraryName}} component library, {{activeComponent}} selected\">\n  <p class=\"m-0 mb-3 font-bold\">{{libraryName}}</p>\n  <div class=\"grid grid-cols-4 gap-2.5 text-center\">\n    <div class=\"clibtw__item flex flex-col items-center gap-1.5\"><span class=\"clibtw__swatch grid place-items-center w-full h-11 rounded-lg bg-[#24143010] text-xs box-border border-2 border-transparent\" data-c=\"button\">Btn</span>{{#if showLabels}}<small class=\"text-[10px] text-[#24143099]\">Button</small>{{/if}}</div>\n    <div class=\"clibtw__item flex flex-col items-center gap-1.5\"><span class=\"clibtw__swatch grid place-items-center w-full h-11 rounded-lg bg-[#24143010] text-xs box-border border-2 border-transparent\" data-c=\"card\"></span>{{#if showLabels}}<small class=\"text-[10px] text-[#24143099]\">Card</small>{{/if}}</div>\n    <div class=\"clibtw__item flex flex-col items-center gap-1.5\"><span class=\"clibtw__swatch grid place-items-center w-full h-11 rounded-lg bg-[#24143010] text-xs box-border border-2 border-transparent\" data-c=\"badge\">&bull;</span>{{#if showLabels}}<small class=\"text-[10px] text-[#24143099]\">Badge</small>{{/if}}</div>\n    <div class=\"clibtw__item flex flex-col items-center gap-1.5\"><span class=\"clibtw__swatch grid place-items-center w-full h-11 rounded-lg bg-[#24143010] text-xs box-border border-2 border-transparent\" data-c=\"input\">|</span>{{#if showLabels}}<small class=\"text-[10px] text-[#24143099]\">Input</small>{{/if}}</div>\n  </div>\n</div>\n<style>\n.clibtw--active-button [data-c=\"button\"], .clibtw--active-card [data-c=\"card\"], .clibtw--active-badge [data-c=\"badge\"], .clibtw--active-input [data-c=\"input\"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 30%, #FAF7F2); }\n</style>",
  "react": "export function ComponentLibrary({\n  libraryName = \"{{libraryName}}\",\n  activeComponent = \"{{activeComponent}}\",\n  accent = \"{{accent}}\",\n  showLabels = {{showLabels}},\n}) {\n  const items = [\n    { key: \"button\", swatch: \"Btn\", label: \"Button\" },\n    { key: \"card\", swatch: \"\", label: \"Card\" },\n    { key: \"badge\", swatch: \"\\u2022\", label: \"Badge\" },\n    { key: \"input\", swatch: \"|\", label: \"Input\" },\n  ];\n  return (\n    <div role=\"img\" aria-label={`${libraryName} component library, ${activeComponent} selected`}\n      style={{ font: \"14px/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 12px\", fontWeight: 700 }}>{libraryName}</p>\n      <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4,1fr)\", gap: 10, textAlign: \"center\" }}>\n        {items.map((it) => (\n          <div key={it.key} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", gap: 6 }}>\n            <span style={{ display: \"grid\", placeItems: \"center\", width: \"100%\", height: 44, borderRadius: 8, fontSize: 12, boxSizing: \"border-box\",\n              border: `2px solid ${it.key === activeComponent ? accent : \"transparent\"}`,\n              background: it.key === activeComponent ? `color-mix(in srgb, ${accent} 30%, #FAF7F2)` : \"#24143010\" }}>{it.swatch}</span>\n            {showLabels && <small style={{ fontSize: 10, color: \"#24143099\" }}>{it.label}</small>}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}"
}