@manifoldco/ui

🍱 Manifold UI

Manifold’s reusable web components, built with Stencil.

Installation

npm i @manifoldco/ui

Usage

Framework	Supported?
Vanilla JS (no framework)	✅
Angular	✅
React	✅
Vue	✅
Ember	✅

HTML (ES Modules)

<manifold-marketplace />

<script type="module">
  import { defineCustomElements } from 'https://unpkg.com/@manifoldco/ui/dist/esm/es2017/manifold.define.js';
  defineCustomElements(window);
</script>

HTML (No ESM Support)

<manifold-marketplace />
<script src="https://unpkg.com/@manifoldco/ui/dist/manifold.js"></script>

React

import React from 'react';
import ReactDOM from 'react-dom';

import { defineCustomElements } from '@manifoldco/ui/dist/loader';

const App = () => <manifold-marketplace />;

ReactDOM.render(<App />, document.getElementById('root'));
defineCustomElements(window);

Ember, Angular, Vue, and others

Initializing Manifold UI works the exact same as any other Stencil project. For more advanced instructions on integrating with your specific stack, please refer to Stencil’s docs on integration.

TypeScript + JSX setup

When using inside TypeScript, you’ll likely see this error ( manifold-connection could be any custom element):

Property 'manifold-connection' does not exist on type 'JSX.IntrinsicElements'

To solve that, add the following to tsconfig.json:

"compilerOptions": {
  "typeRoots": ["./node_modules/@types", "./node_modules/@manifoldco"],
  "types": ["ui"]
}

Next, create a custom-elements.d.ts file somewhere inside your project (must be inside the include option in tsconfig.json):

declare module JSX {
  interface IntrinsicElements extends StencilIntrinsicElements {}
}

This will do more than fix the error—now you’ll be able to typecheck the web components as you write! 🎉