UI Library

The Legalesign UI Library is a collection of UI components for building custom interfaces around Legalesign workflows. Built with StencilJS, they compile to standard Web Components and can be output as native libraries for Angular, React, Vue, and Ember — or used directly in HTML/JavaScript.

These are purely presentational — they take attributes/props and render UI, with no authentication or API calls.

Installation

Core (Web Components)

The core package works with HTML/JavaScript, or any framework that supports Web Components.

Install legalesign-ui:

npm install legalesign-ui

React Output Target

Legalesign uses React internally, so we publish a pre-built React output target with native React components, typed props, and event handling.

Install legalesign-ui-react:

npm install legalesign-ui-react

Other Frameworks

Generating output targets for Angular, Vue, or Ember is straightforward using the StencilJS framework integration. You can also use the core Web Components package directly in any framework without a dedicated output target.

Usage

HTML

Load the component loader and use the custom elements directly:

<script type="module" src="node_modules/legalesign-ui/dist/legalesign-ui/legalesign-ui.esm.js"></script>

<ls-button variant="primary">Send Document</ls-button>

React

import { LsButton } from 'legalesign-ui-react';

const App = () => (
  <LsButton variant="primary" onClick={handleClick}>
    Send Document
  </LsButton>
);

Documentation

Full component documentation, props reference, and live examples are available at:

• Storybook / docs: ui.legalesign.io
• npm: legalesign-ui (core) · legalesign-ui-react (React output target)

Related

• Components overview — how the UI Library fits alongside Legalesign widgets
• Document Viewer widget — an authenticated component for template editing and document preparation