Bubble UI Kits: How To Build a Single Page App in 5 Minutes [Video Tutorial]
What are the best UI Kits for Bubble? We'll take a look at what they are, and how you can use them to supercharge your app development in a super quick 5 minute video tutorial.
Welcome to this week’s No Code SaaS - the newsletter that takes you on a journey to building profitable software without code using Bubble.
This week I want to talk about design systems for Bubble. I’ve been using them a lot over the last few months on multiple projects, and it has been a game changer for productivity and development speed.
UI Kits are libraries of high-quality user interface elements, which are designed to work together and help you quickly build up an app interface.
They contain things like menus, tables, buttons, forms and common UI patterns like password resets, signups etc.
One of the most popular design systems outside the nocode world is TailwindUI, though as this is designed for a traditional coded stack, it’s been out of reach to those of us building in Bubble.
Thankfully, as the Bubble ecosystem is maturing, we’re also getting access to UI Kits built specifically for Bubble, and they’re increasingly high quality and powerful.
I’ve tried nearly all the options for Bubble and my 2 favourites by far are Basis and Frames.
I’ve personally been working a lot with Basis over the last month and it’s made a massive difference in being able to ship a high-quality app quickly.
I’ve put together a free 5-minute tutorial video to show how quick it is to build a typical SaaS UI with basis, using a 1-page design layout in Bubble.
In the video, I cover the following…
📦 What are UI Kits?
🌐 Installing the Basis Chrome extension
🖌️ How to add elements from the component library.
🔧 Building the App
Using pre-made components to build the app's shell with navigation.
Adding a new reusable element for the home page.
Adding elements like tables and headers.
Using conditional rules to show and hide different sections of the app.
🔗 Navigation
How to structure a basic single-page app in Bubble
How to add conditionals based on URL parameters to reusable elements
Workflow for showing and hiding sections
Using a UI kit when building your SaaS application lets you focus on building the app’s logic, and ultimately delivering value to your users.
Instead of spending huge amounts of time building your own UI, why not use a kit which is designed for SaaS, contains almost all the components any app would need - and is already responsive.
Focus your time on building features your users are willing to pay for.
Hope you find this helpful, that’s it for this week!
Thanks, James.