Espalier

Web components for application interfaces.
Built on Lit and browser standards.

Espalier is a web component library built on Lit using custom elements, Shadow DOM, CSS custom properties, and ElementInternals for native form participation.

Components share color, typography, and spacing through <esp-root>. You can use them in a framework or plain HTML; Lit is the only runtime dependency.

Perceptual Color

Generate palettes in OKLCH and enforce APCA targets for text tokens against their intended backgrounds.

Fluid Typography

Type and spacing use clamp() to scale smoothly between narrow and wide viewports.

Accessibility

Learn how text contrast, semantic HTML, keyboard interaction, and ARIA fit into your interface.

Native Form Participation

ElementInternals for real form submission, validation, and reset. Form-associated controls submit values through the browser.

Intrinsic Layout

Compose pages with Grid and Flexbox. Use container queries when a component needs to adapt to its available space.

Browser Support

Check minimum browser versions and load any required polyfills.

Get started

npm install @taprootio/espalier lit

<script type="module">
  import "@taprootio/espalier";
</script>

<esp-root>
  <esp-form>
    <esp-form-item label="Name">
      <esp-input name="name" required></esp-input>
    </esp-form-item>
    <esp-button label="Submit" button-type="submit"></esp-button>
  </esp-form>
</esp-root>

Component imports register their custom elements. Form-associated controls inherit the root theme and participate in submission, validation, and reset.