https://github.com/CKGrafico/papanasi

🥯Papanasi is the Frontend UI library to use cross Frameworks. A set of components to use in Angular, Preact, Qwik, React, Solid, Svelte, Vue and Web Components
https://github.com/CKGrafico/papanasi

angular bem components mitosis preact qwik react solidjs svelte universal vue w3c

Last synced: 14 days ago
JSON representation

🥯Papanasi is the Frontend UI library to use cross Frameworks. A set of components to use in Angular, Preact, Qwik, React, Solid, Svelte, Vue and Web Components

• Host: GitHub
• URL: https://github.com/CKGrafico/papanasi
• Owner: CKGrafico
• License: mit
• Created: 2022-05-20T08:28:19.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-05-14T18:18:38.000Z (about 1 year ago)
• Last Synced: 2024-05-01T23:38:55.470Z (about 2 months ago)
• Topics: angular, bem, components, mitosis, preact, qwik, react, solidjs, svelte, universal, vue, w3c
• Language: TypeScript
• Homepage: http://papanasi.js.org
• Size: 3.18 MB
• Stars: 574
• Watchers: 7
• Forks: 29
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md
  • Code of conduct: CODE-OF-CONDUCT.md

Lists

• my-awesome-stars - papanasi
• popular-dependents-lists - CKGrafico/papanasi - 🌟 525 (Qwik / CKGrafico/papanasi)
• awesome-stars - CKGrafico/papanasi - 🥯Papanasi is the Frontend UI library to use cross Frameworks. A set of components to use in Angular, Preact, Qwik, React, Solid, Svelte, Vue and Web Components (vue)

README

        


  

  
The Universal UI Library


### 🔍 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/).



  

  

  

  



### 🚀 Platforms 

  

    

       


      Angular 


      

        

        

      

    

    

       


      Preact 


      

        

        

      

    

    

       


      Qwik 


      

        

        

      

    

    

       


      React 


      

        

        

      

    

  

  

    

       


      Solid 


      

        

        

      

    

    

       


      Svelte 


      

        

        

      

    

    

       


      Vue 


      

        

        

      

    

    

       


      Web Comps. 


      

        

        

      

    

  

### 🔮 Demos 

  

    

       


      Nextjs 


      

        

      

    

    

       


      Nuxt 3 


      

        

      

    

    

       


      Svelte Kit 


      

        

      

    

    

       


      Solid Start 


      

        

      

    

    

       


      Qwik City 


      

        

      

    

  

### 📣 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

  

    

    
Layout

    

  

  

    

       


      Container 


      

      

      

      


      

      

      

      


      

    

    

       


      Row 


      

      

      

      


      

      

      

      


      

    

    

       


      Column 


      

      

      

      


      

      

      

      


      

    

    

       


      Grid 


      

      

      

      


      

      

      

      


      

    

  

  

    

    
Components

    

  

  

    

       


      Avatar 


      

      

      

      


      

      

      

      


      

    

    

       


      Button 


      

      

      

      


      

      

      

      


      

    

    

       


      Code 


      

      

      

      


      

      

      

      


      

    

    

       


      Pill 


      

      

      

      


      

      

      

      


      

    

  

  

    

       


      Spinner 


      

      

      

      


      

      

      

      


      

    

  

  

    

    
Enterprise

    

  

  

    

       


      Itchio 


      

      

      

      


      

      

      

      


      

    

  

  

    

    
Extensions

    

  

  

    

       


      Tooltip 


      

      

      

      


      

      

      

      


      

    

  


### 📚 Setup and scripts

With **npm**:

```

$ npm install @papanasi/[target] # ex: @papanasi/react

```

With **yarn**:

```

$ yarn add @papanasi/[target] # ex: @papanasi/vue

```

### 🪲 Debugger

To debug elements you can use `setDebugLevel` function from `@papanasi/[target]` package. This function is totally optional and the default value is `DebugLevel.None` the recommended is to use `DebugLevel.Log` to have a log of the different events happening.

```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


Sponsor the project


HelpDev

### 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)