npm package: @papanasi/webcomponents
Description: Papanasi Web Components UI Library
Author: ckgrafico/papanasi
Latest version: 1.1.2

<h1 align="center">
  <a href="#"><img src="https://raw.githubusercontent.com/CKGrafico/papanasi/main/docs/resources/logo-text.svg"  width="400" alt="Papanasi"></a>
  <p align="center">The Universal UI Library</p>
</h1>

### 🔍 Overview

🥯Papanasi _(pronunced pɑpənæʃ or papanash)_ is a **UI library to use cross Frameworks**. A set of components to use in Angular, Preact, Qwik, React, Solid, Svelte, Vue and Web Components. Is based on the [Mitosis](https://github.com/BuilderIO/mitosis) library and documented using [Storybook](https://storybook.js.org/).

<p align="center">
  <a href="https://www.npmjs.com/search?q=%40papanasi"><img src="https://img.shields.io/npm/v/@papanasi/react?color=cb0303&logo=npm&label=version" alt="Package version" /></a>
  <a href="https://github.com/CKGrafico/Papanasi/network"><img src="https://img.shields.io/github/stars/CKGrafico/Papanasi.svg?logoColor=white&logo=apachespark&color=4D8C6F" alt="GitHub stars" /></a>
  <a href="https://twitter.com/CKGrafico"><img src="https://img.shields.io/badge/Tweet-project?logo=twitter&color=00acee&logoColor=FFFFFF" alt="Tweet" /></a>
  <a href="https://github.com/sponsors/CKGrafico"><img src="https://img.shields.io/badge/Support-project?logo=ko-fi&color=ea4aaa&logoColor=white" alt="Sponsor" /></a>
</p>

### 🚀 Platforms 

<table align="center">
  <tr>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/angular-icon.svg" width="50" title="Angular"> <br/>
      <strong>Angular</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/s/papanasi-angular-7bzn8h" target="_blank"><img src="https://img.shields.io/badge/Sandbox-Angular-b52e31?logoColor=white&logo=codesandbox" alt="Angular Sandbox" /></a>
        <a href="https://www.npmjs.com/package/@papanasi/angular" target="_blank"><img src="https://img.shields.io/npm/dw/@papanasi/angular?label=Installs&color=blue&logoColor=white&logo=angular" alt="Angular downloads" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/preact.svg" width="50" title="Preact"> <br/>
      <strong>Preact</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/s/papanasi-preact-14rw2g" target="_blank"><img src="https://img.shields.io/badge/Sandbox-Preact-673ab8?logoColor=white&logo=codesandbox" alt="Preact Sandbox" /></a>
        <a href="https://www.npmjs.com/package/@papanasi/preact" target="_blank"><img src="https://img.shields.io/npm/dw/@papanasi/preact?label=Installs&color=blue&logoColor=white&logo=preact" alt="Preact downloads" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/qwik.svg" width="50" title="Qwik"> <br/>
      <strong>Qwik</strong> <br/>
      <sub>
        <a href="https://stackblitz.com/edit/qwik-starter-45qzw4" target="_blank"><img src="https://img.shields.io/badge/Stackblitz-Qwik-5048d7?logoColor=white&logo=stackblitz" alt="Qwik Sandbox" /></a>
        <a href="https://www.npmjs.com/package/@papanasi/qwik" target="_blank"><img src="https://img.shields.io/npm/dw/@papanasi/qwik?label=Installs&color=blue&logoColor=white&logo=qwiklabs" alt="Qwik downloads" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/react.svg" width="50" title="React"> <br/>
      <strong>React</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/s/papanasi-react-orfn30" target="_blank"><img src="https://img.shields.io/badge/Sandbox-React-20ddff?logoColor=white&logo=codesandbox" alt="React Sandbox" /></a>
        <a href="https://www.npmjs.com/package/@papanasi/react" target="_blank"><img src="https://img.shields.io/npm/dw/@papanasi/react?label=Installs&color=blue&logoColor=white&logo=react" alt="React downloads" /></a>
      </sub>
    </td>
  </tr>
  <tr>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/solidjs-icon.svg" width="50" title="Solid"> <br/>
      <strong>Solid</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/s/papanasi-solid-5y3xb8" target="_blank"><img src="https://img.shields.io/badge/Sandbox-Solid-2e5593?logoColor=white&logo=codesandbox" alt="Solid Sandbox" /></a>
        <a href="https://www.npmjs.com/package/@papanasi/solid" target="_blank"><img src="https://img.shields.io/npm/dw/@papanasi/solid?label=Installs&color=blue&logoColor=white&logo=solid" alt="Solid downloads" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/svelte-icon.svg" width="40" title="Svelte"> <br/>
      <strong>Svelte</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/s/papanasi-svelte-00ul5x" target="_blank"><img src="https://img.shields.io/badge/Sandbox-Svelte-ff3e00?logoColor=white&logo=codesandbox" alt="Svelte Sandbox" /></a>
        <a href="https://www.npmjs.com/package/@papanasi/svelte" target="_blank"><img src="https://img.shields.io/npm/dw/@papanasi/svelte?label=Installs&color=blue&logoColor=white&logo=svelte" alt="Svelte downloads" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/vue.svg" width="55" title="Vue"> <br/>
      <strong>Vue</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/s/papanasi-vue-vygq4m" target="_blank"><img src="https://img.shields.io/badge/Sandbox-Vue-41b883?logoColor=white&logo=codesandbox" alt="Vue Sandbox" /></a>
        <a href="https://www.npmjs.com/package/@papanasi/vue" target="_blank"><img src="https://img.shields.io/npm/dw/@papanasi/vue?label=Installs&color=blue&logoColor=white&logo=vuedotjs" alt="Vue downloads" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/w3c.svg" width="80" title="Web Components"> <br/>
      <strong>Web Comps.</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/s/papanasi-webcomponents-27zsfr" target="_blank"><img src="https://img.shields.io/badge/Sandbox-Web-005a9c?logoColor=white&logo=codesandbox" alt="Webcomponents Sandbox" /></a>
        <a href="https://www.npmjs.com/package/@papanasi/webcomponents" target="_blank"><img src="https://img.shields.io/npm/dw/@papanasi/webcomponents?label=Installs&color=blue&logoColor=white&logo=w3c" alt="Web Components downloads" /></a>
      </sub>
    </td>
  </tr>
</table>

### 🔮 Demos 

<table align="center">
  <tr>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/nextjs-icon.svg" width="50" title="Nextjs"> <br/>
      <strong>Nextjs</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/p/sandbox/papanasi-next-demo-papanasi-react-ewy6no" target="_blank"><img src="https://img.shields.io/badge/Demo-000000?logoColor=white&logo=nextdotjs" alt="Nextjs Demo" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/nuxt-icon.svg" width="72" title="Nuxt"> <br/>
      <strong>Nuxt 3</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/p/sandbox/papanasi-nuxt-demo-papanasi-vue-xvguj1" target="_blank"><img src="https://img.shields.io/badge/Demo-00DC82?logoColor=white&logo=nuxtdotjs" alt="Nuxt Demo" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/svelte-icon.svg" width="41" title="Svelte Kit"> <br/>
      <strong>Svelte Kit</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/p/sandbox/papanasi-sveltekit-demo-papanasi-svelte-fz7ody" target="_blank"><img src="https://img.shields.io/badge/Demo-FF3E00?logoColor=white&logo=svelte" alt="Svelte Kit Demo" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/solidjs-icon.svg" width="41" title="Solid Create"> <br/>
      <strong>Solid Start</strong> <br/>
      <sub>
        <a href="https://codesandbox.io/p/sandbox/solid-este-si-4mpxrp" target="_blank"><img src="https://img.shields.io/badge/Demo-2e5593?logoColor=white&logo=solid" alt="Solid Start Demo" /></a>
      </sub>
    </td>
    <td align="center" width="140">
      <img src="https://raw.githubusercontent.com/gilbarbara/logos/master/logos/qwik.svg" width="41" title="Qwik City"> <br/>
      <strong>Qwik City</strong> <br/>
      <sub>
        <a href="https://stackblitz.com/edit/qwik-starter-tudfze" target="_blank"><img src="https://img.shields.io/badge/Demo-5048d7?logoColor=white&logo=qwiklabs" alt="Qwik Demo" /></a>
      </sub>
    </td>
  </tr>
</table>


### 📣 Manifesto

This library born as a pet project to create universal components, easy to extend in any project and easy to use with any framework, is based on the next principles:

#### A Component...
* ...should be **cross-libraries** but the code should be written once.
* ...should have a **minimum style** but easy to extend it via CSS by any dev.
* ...should provide some  **optional themes** to make it easy to use.
* ...should be **accessible** (FUTURE RELEASES).
* ...should be **made for developers** not for non-coders, they will decide how to style most of the things.
* ...should be tree-shakable.
* ...should be compatible with **StoryBook**.
* ...should be inspired by other UI Libraries and **don't reinvent the wheel**.
* ...should be easy to create new **variants**.

### 🧩 Elements Showcase

<table align="center">
  <tr>
    <td align="left" colspan="4">
    <h4>Layout</h4>
    </td>
  </tr>
  <tr>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/marquee-2.svg" width="55" title="Container"> <br/>
      <strong>Container</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-layout-container--container" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/layout-rows.svg" width="55" title="Row"> <br/>
      <strong>Row</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-layout-row--row" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/layout-columns.svg" width="55" title="Column"> <br/>
      <strong>Column</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-layout-column--column" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/layout-board-split.svg" width="55" title="Grid"> <br/>
      <strong>Grid</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-layout-grid--grid" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
  </tr>
  <tr>
    <td  align="left" colspan="4">
    <h4>Components</h4>
    </td>
  </tr>
  <tr>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/circle-letter-a.svg" width="55" title="Avatar"> <br/>
      <strong>Avatar</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-components-avatar--avatar" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/rectangle.svg" width="55" title="Button"> <br/>
      <strong>Button</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-components-button--button" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/code-circle.svg" width="55" title="Code"> <br/>
      <strong>Code</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=red&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=green&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-components-code--code" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/pill.svg" width="55" title="Pill"> <br/>
      <strong>Pill</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-components-pill--pill" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
  </tr>
  <tr>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/loader-2.svg" width="55" title="Spinner"> <br/>
      <strong>Spinner</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-components-spinner--spinner" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
  </tr>
  <tr>
    <td align="left" colspan="4">
    <h4>Enterprise</h4>
    </td>
  </tr>
  <tr>
    <td align="center">
      <img src="https://static.itch.io/images/itchio-textless-black.svg" width="55" title="Itchio"> <br/>
      <strong>Itchio</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-enterprise-itchio--itchio" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
  </tr>
  <tr>
    <td align="left" colspan="4">
    <h4>Extensions</h4>
    </td>
  </tr>
  <tr>
    <td align="center">
      <img src="https://tabler-icons.io/static/tabler-icons/icons/tooltip.svg" width="55" title="Tooltip"> <br/>
      <strong>Tooltip</strong> <br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=angular" alt="Angular status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=preact" alt="Preact status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=qwiklabs" alt="Qwik status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=react" alt="React status" /><br/>
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=solid" alt="Solid status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=svelte" alt="Svelte status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=success&logo=vuedotjs" alt="Vue status" />
      <img src="https://img.shields.io/static/v1?message=%20&labelColor=5c5c5c&logoColor=white&label=%20&color=yellow&logo=w3c" alt="W3c status" /><br/>
      <a href="https://papanasi.js.org/?path=/docs/🧩elements-extensions-tooltip--tooltip" target="_blank"><img src="https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white&logo=storybook" alt="Preview" /></a>
    </td>
  </tr>
</table>

### 📚 Setup and scripts
With **npm**:

```
$ npm install @papanasi/webcomponents
```
With **yarn**:

```
$ yarn add @papanasi/webcomponents
```

### 🪲 Debugger
To debug elements you can use `setDebugLevel` function from `@papanasi/webcomponents

```js	
window.addEventListener('load', () => {
  setDebugLevel(DebugLevel.Log);
});
```

### 📗 Documentation

To learn more about Papanasi, check [the documentation](http://papanasi.js.org/).

### 📃 License

[MIT](http://opensource.org/licenses/MIT)

### 🚀 Contributing

[Contributing Guidelines](https://github.com/CKGrafico/papanasi/blob/main/CONTRIBUTING.md)

To build the project run:

```
> yarn compile
```

You can choose which frameworks to build by passing the `--platforms`:

```
> yarn compile --platforms react vue
```

It is also possible to specify which components to build `--elements`:

```
> yarn compile --elements avatar pill
```

If you want to disable the linting use `--no-lint`:

```
> yarn compile --no-lint
```

To contribute and watch the changes in local environment just use:

```
> yarn dev
```

Finally, to launch storybook use:

```
> yarn start
```

### Our Sponsors

<table>
<tr>
<td align="center"><a href="SPONSORS.md#sponsors"><img src="https://tabler-icons.io/static/tabler-icons/icons/circle-plus.svg" width="40"><br>Sponsor the project</a></td>
<td align="center"><a href="https://helpdev.org"><img src="https://raw.githubusercontent.com/CKGrafico/papanasi/main/sponsors/logos/helpdev.png" width="140"><br>HelpDev</a>
</tr>
</table>

### Thanks to everyone who contributed:
[![Contributors](https://contrib.rocks/image?repo=ckgrafico/papanasi)](https://github.com/CKGrafico/papanasi/graphs/contributors)

And special thanks to [@samijaber](https://github.com/samijaber) [@mhevery](https://github.com/mhevery)  and [Builder project](https://github.com/BuilderIO/builder/tree/main/packages/sdks)