Skip to component library
Engage UI 1.0.0

ENGAGE DESIGN SYSTEM

Component Library

Familiar by design. Ready for your next project.

Explore the building blocks behind Engage, try their interactions, and copy the actual markup into your own application.

No framework No build step No application state
58documented entries
8categories
1portable folder

QUICK START

Bring Engage into another project

Copy the design-system folder, load these files, and wrap your UI in class="engage". Initialize once after your markup is available.

View import snippet and customization
HTML · no bundler required 
<link rel="stylesheet" href="design-system/engage.css">
<main class="engage" id="my-app">
  <button type="button" class="engage-button engage-button--primary"
    data-engage-toast="Ready to build.">Get started</button>
</main>

<script src="design-system/engage.js"></script>
<script>
  const ui = EngageUI.init(document.getElementById('my-app'));
  // Call ui.refresh() after adding component markup.
  // Call ui.destroy() when your application unmounts this root.
</script>

Theming: override namespaced CSS properties on your app root, such as --engage-color-action. Set data-engage-theme="ai" on a section for the existing purple treatment.

Fonts and icons: Noto Sans is optional and falls back to system fonts. Essential icons are inline SVGs supplied by the library; no Font Awesome account or kit is needed.

Application behavior: components emit events; your app owns data, routing, validation, and persistence. Demo actions are local and never write to the prototype's saved state.

Loading component examples...

Hover, press, or use your keyboard to explore states. Open Code & usage beneath any example for its import-ready markup.