Shipping One Stencil Component Library to React, Angular, Vue and Vanilla

Design teams need one component library that works in React, Angular, Vue and plain HTML. Stencil’s outputTargets let you write the component once in TypeScript JSX and generate framework wrappers as build artifacts.

Configuration

In stencil.config.ts define outputTargets for dist, dist-custom-elements and react-output-target.

export const config = {
  namespace: 'my-lib',
  outputTargets: [
    { type: 'dist', dir: 'dist' },
    { type: 'dist-custom-elements', dir: 'dist-custom-elements' },
    { type: 'react-output-target', dir: 'dist/react', componentCorePackage: 'my-lib' }
  ]
};

Usage

Component:

@Component({ tag: 'my-btn', shadow: true })
export class MyBtn {
  @Prop() label: string = 'Press';
  @Event() clicked: EventEmitter;
  render() { return  this.clicked.emit()}>{this.label}; }
}

Vanilla:

React: import { MyBtn } from 'my-lib/react'; {}} />

Trade‑off

Shadow DOM isolates styles but hinders global theming; expose CSS custom properties instead of deep selectors.

Action

Start with dist output, add framework wrappers as needed, verify each artifact’s package.json and test consumption in a minimal React and vanilla page.