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 library and documented using Storybook.
๐ Platforms
Angular
|
Preact
|
Qwik
|
React
|
Solid
|
Svelte
|
Vue
|
Web Comps.
|
๐ฎ Demos
๐ฃ 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/preact
With yarn:
$ yarn add @papanasi/preact
๐ Documentation
To learn more about Papanasi, check the documentation.
๐ License
MIT
๐ Contributing
Contributing Guidelines
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
Thanks to everyone who contributed:

Made with ๐ by Quique Fdez Guerra