Papanasi

Sorry I've no time right now consider this a little bit outdated/archived.

<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 library and documented using Storybook.

<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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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/> _{<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>} </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="ht