Demo here | Roadmap

This project is a work in progress. See projects page to track all status.

The design system and specifications still are open but should be inspired in Nebular, Bootstrap and TailWind.

Write a comment about Design System, give your feedback!

See complete docs

Install dependency:

npm i @tiagoboeing/anywhere-webcomponents

And import anywhere-webcomponents.js:

<script src="@tiagoboeing/anywhere-webcomponents/dist/anywhere-webcomponents/anywhere-webcomponents.js"></script>

For use in frameworks, see the Stencil page.

Now you can test components in a HTML page importing via script from CDN.

<script src="https://cdn.tiagoboeing.com/anywhere-webcomponents/master/anywhere-webcomponents/anywhere-webcomponents.js"></script>
<aw-button label="Primary" mode="square" color="outline" status="success"></aw-button>

(ATTENTION!! Not use for production!)

<script src="https://cdn.tiagoboeing.com/anywhere-webcomponents/develop/anywhere-webcomponents/anywhere-webcomponents.js"></script>
<aw-button label="Primary" mode="square" color="outline" status="success"></aw-button>

Other alternative is use UNPKG, for this, overwrite with the following URL: https://unpkg.com/@tiagoboeing/anywhere-webcomponents@latest/dist/anywhere-webcomponents/anywhere-webcomponents.js

npm i @tiagoboeing/anywhere-webcomponents

In your app.module.ts declare CUSTOM_ELEMENTS_SCHEMA:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]   // <-- declare this
})
export class AppModule { }

And in main.ts end of file, add following imports:

import { applyPolyfills, defineCustomElements } from '@tiagoboeing/anywhere-webcomponents/loader';

defineCustomElements();

// for IE support (optional)
applyPolyfills().then(() => {
  defineCustomElements()
})

yarn add @tiagoboeing/anywhere-webcomponents

In your src/index.js or src/index.tsx (typescript project) file, add following imports preferably before of the React Render:

import { applyPolyfills, defineCustomElements } from '@tiagoboeing/anywhere-webcomponents/loader';

defineCustomElements();

// for IE support (optional)
applyPolyfills().then(() => {
  defineCustomElements()
})

See projects page to track all status.

View contribution guide.

Thanks goes to these wonderful people (emoji key):

Tiago Boeing 💻 📆 🤔 🎨

lucas souza matos 📖

This project follows the all-contributors specification. Contributions of any kind welcome!