Edit Empty-State Onboarding · 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=\"empty-onboard\" data-icon=\"{{icon}}\" style=\"--accent:{{accent}}\">\n  <div class=\"empty-onboard__icon\">\n    <svg class=\"ico-rocket\" viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M12 2c3 2 5 6 5 10 0 2-1 4-2 5l-3 3-3-3c-1-1-2-3-2-5 0-4 2-8 5-10z\"/><circle cx=\"12\" cy=\"10\" r=\"2\"/><path d=\"M9 16l-3 3 1 3 3-1M15 16l3 3-1 3-3-1\"/></svg>\n    <svg class=\"ico-folder\" viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z\"/></svg>\n    <svg class=\"ico-chart\" viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M4 20V10M12 20V4M20 20v-7\"/></svg>\n  </div>\n  <h3 class=\"empty-onboard__heading\">{{heading}}</h3>\n  <p class=\"empty-onboard__desc\">{{description}}</p>\n  <button type=\"button\" class=\"empty-onboard__action\">{{actionLabel}}</button>\n</div>\n<style>\n.empty-onboard { font: 16px/1.5 system-ui, sans-serif; text-align: center; max-width: 300px; padding: 32px 24px; background: #FAF7F2; border: 1.5px dashed #24143030; border-radius: 14px; color: #241430; }\n.empty-onboard__icon { color: var(--accent); margin-bottom: 12px; display: flex; justify-content: center; }\n.empty-onboard__icon svg { display: none; }\n.empty-onboard[data-icon=\"rocket\"] .ico-rocket,\n.empty-onboard[data-icon=\"folder\"] .ico-folder,\n.empty-onboard[data-icon=\"chart\"] .ico-chart { display: block; }\n.empty-onboard__heading { margin: 0 0 6px; font-size: 17px; font-weight: 600; }\n.empty-onboard__desc { margin: 0 0 18px; font-size: 13.5px; color: #241430cc; }\n.empty-onboard__action { background: var(--accent); color: #241430; border: none; padding: 10px 18px; border-radius: 8px; font: 600 14px system-ui, sans-serif; cursor: pointer; }\n.empty-onboard__action:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>",
  "tailwind": "<div class=\"empty-onboard-tw text-center max-w-[300px] p-8 bg-[#FAF7F2] border-[1.5px] border-dashed border-[#24143030] rounded-2xl text-[#241430] font-sans\" data-icon=\"{{icon}}\" style=\"--accent:{{accent}}\">\n  <div class=\"flex justify-center mb-3\" style=\"color:{{accent}}\">\n    <svg class=\"ico-rocket-tw\" viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M12 2c3 2 5 6 5 10 0 2-1 4-2 5l-3 3-3-3c-1-1-2-3-2-5 0-4 2-8 5-10z\"/><circle cx=\"12\" cy=\"10\" r=\"2\"/></svg>\n    <svg class=\"ico-folder-tw\" viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z\"/></svg>\n    <svg class=\"ico-chart-tw\" viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M4 20V10M12 20V4M20 20v-7\"/></svg>\n  </div>\n  <h3 class=\"m-0 mb-1.5 text-[17px] font-semibold\">{{heading}}</h3>\n  <p class=\"m-0 mb-4.5 text-[13.5px] text-[#241430]/80\">{{description}}</p>\n  <button type=\"button\" class=\"border-0 px-4.5 py-2.5 rounded-lg text-sm font-semibold text-[#241430]\" style=\"background:{{accent}}\">{{actionLabel}}</button>\n</div>\n<style>\n.empty-onboard-tw .ico-rocket-tw, .empty-onboard-tw .ico-folder-tw, .empty-onboard-tw .ico-chart-tw { display: none; }\n.empty-onboard-tw[data-icon=\"rocket\"] .ico-rocket-tw,\n.empty-onboard-tw[data-icon=\"folder\"] .ico-folder-tw,\n.empty-onboard-tw[data-icon=\"chart\"] .ico-chart-tw { display: block; }\n</style>",
  "react": "export function EmptyStateOnboarding({\n  heading = \"{{heading}}\",\n  description = \"{{description}}\",\n  actionLabel = \"{{actionLabel}}\",\n  icon = \"{{icon}}\",\n  accent = \"{{accent}}\",\n}) {\n  const icons = {\n    rocket: (\n      <svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\"><path d=\"M12 2c3 2 5 6 5 10 0 2-1 4-2 5l-3 3-3-3c-1-1-2-3-2-5 0-4 2-8 5-10z\" /><circle cx=\"12\" cy=\"10\" r=\"2\" /></svg>\n    ),\n    folder: (\n      <svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\"><path d=\"M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z\" /></svg>\n    ),\n    chart: (\n      <svg viewBox=\"0 0 24 24\" width=\"40\" height=\"40\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\"><path d=\"M4 20V10M12 20V4M20 20v-7\" /></svg>\n    ),\n  };\n  return (\n    <div style={{ fontFamily: \"system-ui, sans-serif\", textAlign: \"center\", maxWidth: 300, padding: \"32px 24px\", background: \"#FAF7F2\", border: \"1.5px dashed #24143030\", borderRadius: 14, color: \"#241430\" }}>\n      <div style={{ color: accent, marginBottom: 12, display: \"flex\", justifyContent: \"center\" }}>{icons[icon] ?? icons.rocket}</div>\n      <h3 style={{ margin: \"0 0 6px\", fontSize: 17, fontWeight: 600 }}>{heading}</h3>\n      <p style={{ margin: \"0 0 18px\", fontSize: 13.5, color: \"#241430cc\" }}>{description}</p>\n      <button type=\"button\" style={{ background: accent, color: \"#241430\", border: \"none\", padding: \"10px 18px\", borderRadius: 8, fontWeight: 600, fontSize: 14, cursor: \"pointer\" }}>{actionLabel}</button>\n    </div>\n  );\n}"
}