patrickjs/papanasi

Papanasi is a UI component library that solves a real problem: most design systems are locked into one framework. If you build a button component in React, you have to rebuild it for Vue, Angular, or Svelte. Papanasi lets you write components once and use them across all these frameworks automatically. Instead of maintaining five separate libraries, you maintain one. The way it works is through a tool called Mitosis, which acts as a translator. You write your components in a framework-agnostic format, and Mitosis converts them into React, Vue, Angular, Svelte, Solid, or Web Components code. So a single button component definition generates working code for every framework. The components come with minimal styling by default (so they're lightweight) and optional themes you can apply, but the real power is that developers can easily customize them with CSS to match their brand. The library is designed for developers, not no-code designers. The manifesto behind it is clear: components should be written once, tree-shakeable (meaning unused components don't bloat your final bundle), accessible by default, and inspired by existing UI libraries rather than reinventing everything from scratch. You can also document and preview all components using Storybook, a popular tool for showcasing UI components. Right now, Papanasi is in alpha, so it's still under development and probably not ready for production apps yet. The library includes layout components like Container, Row, Column, and Grid, regular components like Button, Code, and Pill, and some enterprise-focused ones. Some are fully built, while others are still in progress. If you're managing multiple frontend projects across different frameworks or want to establish a consistent component library your teams can share, this is the kind of tool that could save significant development time. Instead of saying "we use React here and Vue there," you could say "we use Papanasi," and suddenly all your projects speak the same component language.