Forum Documentation Showcase Pricing Learn more

Free Bubble UI Kit

As I have built a few SaaS applications in Bubble, one of lessons I learned is about the importance of design and UI.
Quite simply, even if I had a resourceful and fully functional app, the user hardly wanted to learn how to use an app that does not seem intuitive and well designed.

So one of the skills I have learned is how to properly design an application, how to create beautiful and interactive elements and how to implement design best practices (white space, contrasting colors, etc).

Now I’m sharing with you my personal UI Collection of Elements (alerts, buttons, cards, checkboxes, inputs, pagination, popovers and popups) which I use as templates when I’m building my apps.
I think it will help not only Bubble beginners, but also those experienced Bubblers who aren’t really keen of frontend design.

Here’s the link:
https://semcodar.bubbleapps.io/free-ui-kit
Hope you enjoy it.

If you find any bugs or responsiveness issues, please let me know.

Best regards,

Renato Asse
My Bubble YouTube Tutorials (Portuguese): https://www.youtube.com/channel/UCvNQuM8oPy-oO-5RZ80vf8Q
My Bubble Blog Tutorials (Portuguese): https://www.semcodar.com.br

18 Likes

Could you do your videos in English

Awesome collection! Can we have the editor link or is this a template?

Huge timesaver for me. Can I use it commercially?

Hey @zach,

Glad to know you’re interested!
If you click on the little gear at the bottom right of the video > Subtitles/CC > Auto-Translate > English, you will see the english subtitles.
However, it’s created automatically by YouTube, so it’s not perfect.

But… there are TONS of great quality Bubble Tutorials in English.
Check it out:

@romanmg Gaby Roman (https://www.youtube.com/channel/UCTL_mXO3qsgFc_3s2T5wlWg)
@zeroqode Zeroqode (https://www.youtube.com/channel/UC4A4iHLgatnv80PjB9wGC1w)
@J805 NoCodeMinute (https://www.youtube.com/channel/UC0a7cARD26mbV9YiMu0nLaw)
Echo Lake (https://www.youtube.com/channel/UCwqqdBcpZOlPpH1rK322RUA)
Kreator School (https://www.youtube.com/user/iblune)
NoLogo (https://www.youtube.com/channel/UCcSSsAsJ3ONaU_YgWRi3lYg)
Matthew Neary (https://www.youtube.com/channel/UCPb2z5SieyttQ86eeKZvYkw)

And many others…

Good luck!

2 Likes

Hey @Codeables,

Sure, here’s the link to the editor:

It’s a test app I use to develop crazy projects and Youtube Bubble Tutorials, so you can freely check it out.

As for copying the elements and using it comercially, sure, after all none of the designs are mine.
Many of them, for example, are inspired by https://freefrontend.com/ , an amazing repository of all sorts of elements.
I just reproduced them into Bubble.

Good luck!

Renato Asse
My Bubble YouTube Tutorials (Portuguese): https://www.youtube.com/channel/UCvNQuM8oPy-oO-5RZ80vf8Q
My Bubble Blog Tutorials (Portuguese): https://www.semcodar.com.br

5 Likes

Awesome, bookmarking this thread. Thank you

1 Like

Awesomeness! Good things will come back to you my friend!

:star_struck::star_struck:

1 Like

Beautiful elements! Super generous for you to share with everyone :100: :fire:

2 Likes

Awesome! How can I use this in my project? It’s not in a form of plugin, right?

1 Like

@shu.teopengco, you can either:

  • Check out how I’ve built it, and build it alike in your app, or;
  • Open the editor, copy the entire element and paste in your app.

Bubble Editor accepts copying elements from one editor and pasting into another.

Good luck!

1 Like

Oh. Will try it sooner. Thank you very much! Generous! :grin:

1 Like

I love this

1 Like

May I know how did you get that triangle shape?

1

Sorry to bother you. Already figured it out. Rotation Angle :slight_smile:

1 Like

Could you do your videos in English