Espalier Overview

A design system built on web standards

Espalier is an accessible, themeable component library for application interfaces. Its custom elements work in any framework—or without one—and use native browser semantics for forms, keyboard interaction, and automation.

The package includes controls for forms, navigation, data presentation, responsive page structure, overlays, feedback, and content. Components share one coherent color, typography, spacing, and state model through <esp-root>.

Install and start

Install Espalier and its Lit peer dependency from the public npm registry:

npm install @taprootio/espalier lit

Import the root plus the components an application needs, then wrap the page in <esp-root>:

import "@taprootio/espalier/root";
import "@taprootio/espalier/button";

<esp-root>
  <esp-button label="Save"></esp-button>
</esp-root>

Use the standalone reference

This Taproot Docs edition includes the complete CEM-backed component reference and its grouped navigation. The independent Espalier documentation site additionally provides interactive examples and the complete nested authored-guide and API reference experience.

Automate through the accessibility contract

Espalier controls expose accessible roles and names so browser automation can use the same interaction model as people and assistive technology. Prefer role- and label-based locators, real pointer or keyboard activation, and the public component events. Avoid shadow-root selectors and synthetic host .click() calls.