Web Components

bfd7592-web components

Manifold uses web components to provide ready-to-go UI elements that handle the following with ease:

  1. Browsing our catalog, searching for services, and discovering new ones
  2. Viewing product details, along with screenshots
  3. Comparing plans, from pricing to features
  4. Managing existing services—modifying plans & features.
  5. Accessing credentials for resources

Our Manifold UI minisite showcases working web components, as well as documentation on how to use them in your project

Overview

Web Components are usable in any modern front-end framework (React, Ember, Angular, Vue.js), and they’re also usable without any framework (vanilla HTML & JS). They’re Manifold’s long-term bet on web standards that are usable in any stack.

In addition to being fully encapsulated, framework-agnostic components, they’re also fully stylable and can be customized to fit different contexts.

Manifold UI is available as an npm package. Updating Manifold UI is as easy as any other library dependency. It also lets us release breaking changes under a major version. Read release notes here.

Example

The Manifold UI docs showcase all the pieces, but what does it look like stringing these together into a full user experience? For that, we’ve put together an example React app that shows how to consume web components in React, and orchestrate Manifold UI into a full experience.

Web Components

Web Components are usable in any modern front-end framework (React, Ember, Angular, Vue.js), and they’re also usable without any framework (vanilla HTML & JS). They’re Manifold’s long-term bet on web standards that are usable in any stack.

In addition to being fully encapsulated, framework-agnostic components, they’re also fully stylable and can be customized to fit different contexts.

Manifold UI is available as an npm package. Updating Manifold UI is as easy as any other library dependency. It also lets us release breaking changes under a major version. Read release notes here.

Example

The Manifold UI docs showcase all the pieces, but what does it look like stringing these together into a full user experience? For that, we’ve put together an example React app that shows how to consume web components in React, and orchestrate Manifold UI into a full experience.