Pindoba is a UI library I developed to facilitate the creation of web applications with the same components and features regardless of the framework used. In this post, I will share more about this project, its motivations, and how it’s being applied.

What is Pindoba?

Pindoba is a versatile UI component library that emerged from the need to maintain visual and functional consistency across different projects, regardless of the chosen framework. The library uses Panda CSS for styling, ensuring a cohesive and consistent design across all components.

Project Motivations

The main motivation behind Pindoba was to facilitate my work when exploring different frameworks and libraries. Instead of recreating components from scratch for each technology, Pindoba maintains a uniform API for the components, simplifying the process of switching between different frameworks.

Main Features

• Multi-framework Compatibility: Currently, most components are compatible with Astro and Svelte 5, with ongoing development for the React version.
• Consistent Design: Through Panda CSS, all components follow a unified design system.
• Uniform API: The components maintain a consistent API across libraries while respecting each library’s unique features. For example, if a component has a specific prop in Astro, you’ll find the equivalent functionality in the Svelte and React versions, ensuring a smooth transition between frameworks.
• Modular: Each component is an independent package, allowing you to use only what you need.

Practical Applications

Pindoba is already in use in some personal projects:

1. This Site: Built using Astro and Pindoba components.
2. (Cut Branches)[/en/blog/introducing-cut-branches]: A Svelte 5 + Tauri application for Git branch management that uses Pindoba components.

Demo

Below you’ll find a live demonstration of Pindoba components implemented across different frameworks. This interactive demo showcases the same components (Buttons, Theme Mode Selector, and Alerts) built for Astro and Svelte.

What makes this demo special is that it’s not just a visual representation - this website is actually using the real Pindoba components. The Astro tab shows components from @pindoba/astro-* packages that power this very website. The Svelte tab demonstrates components from @pindoba/svelte-* packages, and the React tab shows the @pindoba/react-* implementations.

The demo leverages Astro’s islands architecture to render components from each library.

(even the tab component is a pindoba component)

Current State and Future

Although Pindoba packages are already published on NPM, the source code is not yet publicly available. However, the documentation is live at pindoba.netlify.app, where you can explore all available components and their usage examples. Please note that the documentation site is still in development, incomplete, constantly evolving as I continue to improve and expand the component library.

I am working to release the source code soon, along with continuous improvements and new components.

As the project matures, I plan to add more components, improve documentation, and expand support for other popular frameworks.

Conclusion

Pindoba represents my effort to create a solution that facilitates the development of consistent interfaces regardless of the framework. It is a constantly evolving project that reflects my journey of learning and improvement as a web developer.