We’re honored to announce that we collaborated directly with FlutterFlow to design and develop a Modular Design System, Bento!
For us, this close partnership with FlutterFlow is a testament to our hard work and dedication to being the best FlutterFlow agency in the world.
Read on to discover what the Bento UI Library actually is, how we approached its design and development, and how you can leverage it to build your app faster.
What Is the Bento UI Library?
Bento UI Library is a modern, sophisticated kit offering 20 polished, pre-built components—all available for FREE to every FlutterFlow user.
Each component is designed for reusability, flexibility, and performance. Whether you’re constructing forms, building navigation flows, or enhancing user interactions, Bento lets you plug in ready-to-use building blocks that save time and ensure a consistent user experience.
The library contains 20 UI components, from alerts, buttons, checkbox groups, counters, file uploads, searchable dropdowns, sliders, switchers, and more. You can read more about the various components HERE.
Our Development Approach: From Concept to Custom Components
As with every client project, we treated Bento’s development with utmost care, aiming for perfection in both design and functionality. As always, everything began with our design process, where our UI/UX team sketched low-fidelity component designs and defined style guidelines.
Once approved, our developers translated those designs into clean, maintainable FlutterFlow widgets—optimizing performance and ease of customization. Rigorous testing followed, ensuring each component behaved flawlessly across devices and use cases.
"When we decided to accept FlutterFlow’s invitation to create a free UI component library, the goal was to create components within the FlutterFlow editor, as we aimed to explore the tool’s capabilities and primarily simplify their use. Due to the way they are built, users can use and modify them without any coding knowledge or the need for “custom widgets” for the basic elements."
"In the development of each component, we ensured that it was designed in a way that allows as many parameters as possible to be adjusted by users, enabling them to customize the base component according to their preferences."
Nikola-project manager
"My goal when designing the official FF Library was to create a system that reflects simplicity, clarity, and usability—something that feels intuitive for both beginners and experienced developers. I focused on clean layouts, consistent spacing, and minimal visual noise to ensure the components are easy to use, adapt, and scale."
"Every element was designed to feel native within FlutterFlow while offering enough flexibility for different use cases. The result is a library that not only makes development easier, but also empowers teams and individuals to build polished, user-friendly interfaces with greater confidence and creative freedom."
"As with every client project, we treated Bento’s development with utmost care, aiming for perfection in both design and functionality. As always, everything began with our design process, where our UI/UX team sketched low-fidelity component designs and defined style guidelines. Once approved, our developers translated those designs into clean, maintainable FlutterFlow widgets—optimizing performance and ease of customization. Rigorous testing followed, ensuring each component behaved flawlessly across devices and use cases."
Lara-design manager
How to Access and Use the Bento UI Library Components:
The whole point of this library is to make building in FlutterFlow even easier and faster than it already is. The components are ready to be plugged right into your project with literally no additional development needed.
To get started, simply visit the FlutterFlow Marketplace and search for Bento UI – Modular Design System, then click Add for Free.
Once you’ve added the library to your account, open a project and:
• Navigate to Settings > Project Dependencies.
• Click Add Library, type “Bento UI – Modular Design System,” and select it.
Voilà—20 components (alerts, buttons, checkbox groups, counters, file uploads, searchable dropdowns, sliders, switchers, and more) are now available to drag and drop into your pages with zero extra development.
You can read detailed docs on each component here.
Why We Love Contributing to the FlutterFlow Community
When FlutterFlow invited us to build for their Marketplace, we jumped at the chance—because we love FlutterFlow. It lets us craft visually striking, high-quality apps in weeks, not months.
Speed is crucial for founders launching products, testing ideas, and finding product-market fit.
By sharing Bento for free, we’re giving back to the community that powers our rapid-build philosophy. We hope these components help more builders bring their ideas to life—faster, smoother, and with a little extra polish.
