REFERENCE

SDK UI Components

Lightweight Adobe-styled web components for your DA apps and plugins.

DA ships a small library of web components nicknamed SL ("Super Lite") that plugin and app authors can use to get an Adobe-consistent look and feel without adopting a full component framework. They're explicitly experimental and provided without warranty, so treat them as a convenience layer rather than a long-term API contract.

Available components

sl-input — text, number, date, and range inputs
sl-select — native-feeling dropdowns
sl-button — buttons styled to match Adobe Spectrum 2
sl-dialog — modal and dialog windows

Converting existing markup

Because SL is meant to be a near drop-in replacement, upgrading a plain HTML form usually takes three mechanical steps: prefix the tag name with sl-, add the missing closing tag, and leave every existing attribute untouched.

<!-- before -->
<input type="text" name="firstName" placeholder="Enter first name"/>

<!-- after -->
<sl-input type="text" name="firstName" placeholder="Enter first name"></sl-input>

Loading the components

Everything is served from a single evergreen module that also injects the required CSS, so there's no separate stylesheet to manage. Because the components render as undefined custom elements for a brief moment, it's common to hide the body until SL signals it has finished upgrading the page by adding an sl-loaded class.

<!DOCTYPE html>
<html>
  <head>
    <title>DA App SDK Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <style>body { display: none; }</style>
    <script src="https://da.live/nx/public/sl/components.js" type="module"></script>
  </head>
  <body>
    <form>
      <sl-input type="text" name="firstName" placeholder="Enter first name"></sl-input>
      <sl-select name="hello">
        <option>Hello World</option>
        <option>Goodnight Moon</option>
      </sl-select>
      <sl-button>Submit</sl-button>
    </form>
  </body>
</html>

Design principles

Drop-in first: you shouldn't have to learn a new API to get the benefit
Adobe Spectrum 2 as the visual baseline, not a hard dependency
Layout stays your responsibility; SL only owns styling and accessibility
Extra features are opt-in, and the number of custom CSS variables is kept intentionally small

See the full SDK UI Components reference on docs.da.live