{"id":13602013,"url":"https://github.com/CKGrafico/papanasi","last_synced_at":"2025-04-11T08:31:15.829Z","repository":{"id":38234591,"uuid":"494383042","full_name":"CKGrafico/papanasi","owner":"CKGrafico","description":"🥯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","archived":false,"fork":false,"pushed_at":"2024-11-01T18:31:17.000Z","size":3339,"stargazers_count":594,"open_issues_count":10,"forks_count":29,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-31T16:11:36.164Z","etag":null,"topics":["angular","bem","components","mitosis","preact","qwik","react","solidjs","svelte","universal","vue","w3c"],"latest_commit_sha":null,"homepage":"http://papanasi.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CKGrafico.png","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","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["ckgrafico","BuilderIO"]}},"created_at":"2022-05-20T08:28:19.000Z","updated_at":"2025-03-17T21:32:38.000Z","dependencies_parsed_at":"2024-01-13T19:46:52.534Z","dependency_job_id":"3f3c062c-d665-49a9-a481-9254912bbe3b","html_url":"https://github.com/CKGrafico/papanasi","commit_stats":{"total_commits":877,"total_committers":6,"mean_commits":"146.16666666666666","dds":0.0068415051311288,"last_synced_commit":"aeba7a0f5a008abf1357e817a5f6d8344916c712"},"previous_names":[],"tags_count":268,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2Fpapanasi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2Fpapanasi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2Fpapanasi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CKGrafico%2Fpapanasi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CKGrafico","download_url":"https://codeload.github.com/CKGrafico/papanasi/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694873,"owners_count":20980733,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bem","components","mitosis","preact","qwik","react","solidjs","svelte","universal","vue","w3c"],"created_at":"2024-08-01T18:01:11.722Z","updated_at":"2025-04-11T08:31:15.808Z","avatar_url":"https://github.com/CKGrafico.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ckgrafico","https://github.com/sponsors/BuilderIO","https://github.com/sponsors/CKGrafico"],"categories":["TypeScript","angular","Qwik"],"sub_categories":["CKGrafico/papanasi"],"readme":"Sorry I've no time right now consider this a little bit outdated/archived.\n\n\n\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/papanasi/main/docs/resources/logo-text.svg\"  width=\"400\" alt=\"Papanasi\"\u003e\u003c/a\u003e\n  \u003cp align=\"center\"\u003eThe Universal UI Library\u003c/p\u003e\n\u003c/h1\u003e\n\n### 🔍 Overview\n\n🥯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/).\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/search?q=%40papanasi\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@papanasi/react?color=cb0303\u0026logo=npm\u0026label=version\" alt=\"Package version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/CKGrafico/Papanasi/network\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/CKGrafico/Papanasi.svg?logoColor=white\u0026logo=apachespark\u0026color=4D8C6F\" alt=\"GitHub stars\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://twitter.com/CKGrafico\"\u003e\u003cimg src=\"https://img.shields.io/badge/Tweet-project?logo=twitter\u0026color=00acee\u0026logoColor=FFFFFF\" alt=\"Tweet\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/sponsors/CKGrafico\"\u003e\u003cimg src=\"https://img.shields.io/badge/Support-project?logo=ko-fi\u0026color=ea4aaa\u0026logoColor=white\" alt=\"Sponsor\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n### 🚀 Platforms \n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/angular-icon.svg\" width=\"50\" title=\"Angular\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eAngular\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/s/papanasi-angular-7bzn8h\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Sandbox-Angular-b52e31?logoColor=white\u0026logo=codesandbox\" alt=\"Angular Sandbox\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@papanasi/angular\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/@papanasi/angular?label=Installs\u0026color=blue\u0026logoColor=white\u0026logo=angular\" alt=\"Angular downloads\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/preact.svg\" width=\"50\" title=\"Preact\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003ePreact\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/s/papanasi-preact-14rw2g\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Sandbox-Preact-673ab8?logoColor=white\u0026logo=codesandbox\" alt=\"Preact Sandbox\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@papanasi/preact\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/@papanasi/preact?label=Installs\u0026color=blue\u0026logoColor=white\u0026logo=preact\" alt=\"Preact downloads\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/qwik.svg\" width=\"50\" title=\"Qwik\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eQwik\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://stackblitz.com/edit/qwik-starter-45qzw4\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Stackblitz-Qwik-5048d7?logoColor=white\u0026logo=stackblitz\" alt=\"Qwik Sandbox\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@papanasi/qwik\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/@papanasi/qwik?label=Installs\u0026color=blue\u0026logoColor=white\u0026logo=qwiklabs\" alt=\"Qwik downloads\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/react.svg\" width=\"50\" title=\"React\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eReact\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/s/papanasi-react-orfn30\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Sandbox-React-20ddff?logoColor=white\u0026logo=codesandbox\" alt=\"React Sandbox\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@papanasi/react\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/@papanasi/react?label=Installs\u0026color=blue\u0026logoColor=white\u0026logo=react\" alt=\"React downloads\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/solidjs-icon.svg\" width=\"50\" title=\"Solid\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eSolid\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/s/papanasi-solid-5y3xb8\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Sandbox-Solid-2e5593?logoColor=white\u0026logo=codesandbox\" alt=\"Solid Sandbox\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@papanasi/solid\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/@papanasi/solid?label=Installs\u0026color=blue\u0026logoColor=white\u0026logo=solid\" alt=\"Solid downloads\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/svelte-icon.svg\" width=\"40\" title=\"Svelte\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eSvelte\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/s/papanasi-svelte-00ul5x\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Sandbox-Svelte-ff3e00?logoColor=white\u0026logo=codesandbox\" alt=\"Svelte Sandbox\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@papanasi/svelte\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/@papanasi/svelte?label=Installs\u0026color=blue\u0026logoColor=white\u0026logo=svelte\" alt=\"Svelte downloads\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/vue.svg\" width=\"55\" title=\"Vue\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eVue\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/s/papanasi-vue-vygq4m\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Sandbox-Vue-41b883?logoColor=white\u0026logo=codesandbox\" alt=\"Vue Sandbox\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@papanasi/vue\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/@papanasi/vue?label=Installs\u0026color=blue\u0026logoColor=white\u0026logo=vuedotjs\" alt=\"Vue downloads\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/w3c.svg\" width=\"80\" title=\"Web Components\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eWeb Comps.\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/s/papanasi-webcomponents-27zsfr\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Sandbox-Web-005a9c?logoColor=white\u0026logo=codesandbox\" alt=\"Webcomponents Sandbox\" /\u003e\u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@papanasi/webcomponents\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/dw/@papanasi/webcomponents?label=Installs\u0026color=blue\u0026logoColor=white\u0026logo=w3c\" alt=\"Web Components downloads\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### 🔮 Demos \n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/nextjs-icon.svg\" width=\"50\" title=\"Nextjs\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eNextjs\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/p/sandbox/papanasi-next-demo-papanasi-react-ewy6no\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Demo-000000?logoColor=white\u0026logo=nextdotjs\" alt=\"Nextjs Demo\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/nuxt-icon.svg\" width=\"72\" title=\"Nuxt\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eNuxt 3\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/p/sandbox/papanasi-nuxt-demo-papanasi-vue-xvguj1\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Demo-00DC82?logoColor=white\u0026logo=nuxtdotjs\" alt=\"Nuxt Demo\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/svelte-icon.svg\" width=\"41\" title=\"Svelte Kit\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eSvelte Kit\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/p/sandbox/papanasi-sveltekit-demo-papanasi-svelte-fz7ody\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Demo-FF3E00?logoColor=white\u0026logo=svelte\" alt=\"Svelte Kit Demo\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/solidjs-icon.svg\" width=\"41\" title=\"Solid Create\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eSolid Start\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://codesandbox.io/p/sandbox/solid-este-si-4mpxrp\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Demo-2e5593?logoColor=white\u0026logo=solid\" alt=\"Solid Start Demo\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"140\"\u003e\n      \u003cimg src=\"https://raw.githubusercontent.com/gilbarbara/logos/master/logos/qwik.svg\" width=\"41\" title=\"Qwik City\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eQwik City\u003c/strong\u003e \u003cbr/\u003e\n      \u003csub\u003e\n        \u003ca href=\"https://stackblitz.com/edit/qwik-starter-tudfze\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Demo-5048d7?logoColor=white\u0026logo=qwiklabs\" alt=\"Qwik Demo\" /\u003e\u003c/a\u003e\n      \u003c/sub\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n### 📣 Manifesto\n\nThis 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:\n\n#### A Component...\n* ...should be **cross-libraries** but the code should be written once.\n* ...should have a **minimum style** but easy to extend it via CSS by any dev.\n* ...should provide some  **optional themes** to make it easy to use.\n* ...should be **accessible** (FUTURE RELEASES).\n* ...should be **made for developers** not for non-coders, they will decide how to style most of the things.\n* ...should be tree-shakable.\n* ...should be compatible with **StoryBook**.\n* ...should be inspired by other UI Libraries and **don't reinvent the wheel**.\n* ...should be easy to create new **variants**.\n\n### 🧩 Elements Showcase\n\n\u003ctable align=\"center\"\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\" colspan=\"4\"\u003e\n    \u003ch4\u003eLayout\u003c/h4\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/marquee-2.svg\" width=\"55\" title=\"Container\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eContainer\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-layout-container--container\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/layout-rows.svg\" width=\"55\" title=\"Row\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eRow\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-layout-row--row\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/layout-columns.svg\" width=\"55\" title=\"Column\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eColumn\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-layout-column--column\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/layout-board-split.svg\" width=\"55\" title=\"Grid\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eGrid\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-layout-grid--grid\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd  align=\"left\" colspan=\"4\"\u003e\n    \u003ch4\u003eComponents\u003c/h4\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/circle-letter-a.svg\" width=\"55\" title=\"Avatar\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eAvatar\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-components-avatar--avatar\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/rectangle.svg\" width=\"55\" title=\"Button\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eButton\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-components-button--button\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/code-circle.svg\" width=\"55\" title=\"Code\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eCode\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=red\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=green\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=yellow\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-components-code--code\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/pill.svg\" width=\"55\" title=\"Pill\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003ePill\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-components-pill--pill\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/loader-2.svg\" width=\"55\" title=\"Spinner\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eSpinner\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=yellow\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-components-spinner--spinner\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\" colspan=\"4\"\u003e\n    \u003ch4\u003eEnterprise\u003c/h4\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://static.itch.io/images/itchio-textless-black.svg\" width=\"55\" title=\"Itchio\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eItchio\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=yellow\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-enterprise-itchio--itchio\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"left\" colspan=\"4\"\u003e\n    \u003ch4\u003eExtensions\u003c/h4\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/tooltip.svg\" width=\"55\" title=\"Tooltip\"\u003e \u003cbr/\u003e\n      \u003cstrong\u003eTooltip\u003c/strong\u003e \u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=angular\" alt=\"Angular status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=preact\" alt=\"Preact status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=qwiklabs\" alt=\"Qwik status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=react\" alt=\"React status\" /\u003e\u003cbr/\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=solid\" alt=\"Solid status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=svelte\" alt=\"Svelte status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=success\u0026logo=vuedotjs\" alt=\"Vue status\" /\u003e\n      \u003cimg src=\"https://img.shields.io/static/v1?message=%20\u0026labelColor=5c5c5c\u0026logoColor=white\u0026label=%20\u0026color=yellow\u0026logo=w3c\" alt=\"W3c status\" /\u003e\u003cbr/\u003e\n      \u003ca href=\"https://papanasi.js.org/?path=/docs/🧩elements-extensions-tooltip--tooltip\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Preview%20Element-FF4785?logoColor=white\u0026logo=storybook\" alt=\"Preview\" /\u003e\u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### 📚 Setup and scripts\nWith **npm**:\n\n```\n$ npm install @papanasi/[target] # ex: @papanasi/react\n```\nWith **yarn**:\n\n```\n$ yarn add @papanasi/[target] # ex: @papanasi/vue\n```\n\n### 🪲 Debugger\nTo 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.\n\n```js\t\nwindow.addEventListener('load', () =\u003e {\n  setDebugLevel(DebugLevel.Log);\n});\n```\n\n### 📗 Documentation\n\nTo learn more about Papanasi, check [the documentation](http://papanasi.js.org/).\n\n### 📃 License\n\n[MIT](http://opensource.org/licenses/MIT)\n\n### 🚀 Contributing\n\n[Contributing Guidelines](https://github.com/CKGrafico/papanasi/blob/main/CONTRIBUTING.md)\n\nTo build the project run:\n\n```\n\u003e yarn compile\n```\n\nYou can choose which frameworks to build by passing the `--platforms`:\n\n```\n\u003e yarn compile --platforms react vue\n```\n\nIt is also possible to specify which components to build `--elements`:\n\n```\n\u003e yarn compile --elements avatar pill\n```\n\nIf you want to disable the linting use `--no-lint`:\n\n```\n\u003e yarn compile --no-lint\n```\n\nTo contribute and watch the changes in local environment just use:\n\n```\n\u003e yarn dev\n```\n\nFinally, to launch storybook use:\n\n```\n\u003e yarn start\n```\n\n### Our Sponsors\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"SPONSORS.md#sponsors\"\u003e\u003cimg src=\"https://tabler-icons.io/static/tabler-icons/icons/circle-plus.svg\" width=\"40\"\u003e\u003cbr\u003eSponsor the project\u003c/a\u003e\u003c/td\u003e\n\u003ctd align=\"center\"\u003e\u003ca href=\"https://helpdev.org\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/CKGrafico/papanasi/main/sponsors/logos/helpdev.png\" width=\"140\"\u003e\u003cbr\u003eHelpDev\u003c/a\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n### Thanks to everyone who contributed:\n[![Contributors](https://contrib.rocks/image?repo=ckgrafico/papanasi)](https://github.com/CKGrafico/papanasi/graphs/contributors)\n\nAnd 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)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCKGrafico%2Fpapanasi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCKGrafico%2Fpapanasi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCKGrafico%2Fpapanasi/lists"}