🌟 Bubble Essential KIT - huge responsive component library for creating Bubble apps

Yesterday I wrote to @grace.hong about the missed opportunity of Bubble better catering to alternative language communities, both within the forum but especially in the bubble editor itself. At time of writing this, it looks like that post has 0 views, lol.

Well, have I got news for you. There’s a prolific Bubble developer who caters to the Portuguese speaking Bubble community. He goes by @renatoasse and he’s recently released a Bubble development toolkit that will rock our little Bubble brains. It’s called Bubble Essential KIT, it’s a Chrome extension that (without exaggeration) revolutionizes the speed at which we can build beautiful looking Bubble apps. Aaand nobody noticed.

This toolkit has only been mentioned twice on the forum. Twice. But it’s been installed over 2000 times! So the vast majority of Portuguese users simply aren’t active in the forum. I only found it by accident today.

Bubble Essential KIT

Enough rant, let’s get details! Here’s the intro video from https://essentialkit.io/

  • This has over 300 pre-built components that can be directly pasted into your Bubble app, like:
    • Low level control like buttons, of course
    • Tables
    • A full chat UI
    • Login with Google Auth flow
    • Full page dashboard
    • Landing page
    • Stuff specifically for SaaS apps
  • Pasting these components also pastes the workflows and mock data.
  • All components are designed on the new Bubble.io Responsive Engine
  • He has what appears to be excellent documentation.

I’d be remis if I didn’t list some cons:

  • Since this is not a plugin but rather a Chrome extension, one does need to use that browser for this. Plus installing extensions comes with some risk but I seriously doubt Renato would do something mischievous since he’s well known.
  • There isn’t a free trial.

That’s my TED talk. While I haven’t actually used it yet, I think this thing is amazing and will likely get a subscription. Wanted to share to underscore my point about supporting our other language communities and because this is just really cool. Hats off to you Renato :slight_smile: Here’s his original announcement.

17 Likes

I like the no lock-in aspect but yes, this is the first I’ve heard of this. Amazing stuff!

1 Like

Hey @zelus_pudding ,

Thanks for the shoutout.

Yep, even though Bubble Essential Kit was built in English and is fully available worldwide, I still haven’t launched it officially outside Brazil.
I have only released it for our Bubble Course students, that’s why it has reached almost 3k users so fast:
image

We’re going to launch it oficially here in the forum and begin marketing campaigns by the end of this month.

You have described Bubble Essential Kit perfectly.
We aim to have a complete set of components and blocks to help Bubble users build beautiful Applications and Landing Pages in a heartbeat.
And all components are based on Bootstrap, the most popular framework in the world.
So all components have the same visual identity.
Basically, you can paste anything in the screen, and it will look good.

As I’ve said in the video: it’s hard to create something ugly when using Bubble Essential Kit.

Here’s a few screenshots of Bubble Essential Kit components and blocks:

Thanks, @zelus_pudding :slight_smile:

3 Likes

So impressive! Very much looking forward to the English speaking launch :slight_smile:

3 Likes

I bought Renato’s course just for the plugin (it costs about 80% of the course), also to thank the free content, but boy the plugin is really great. I can afirm it got me at least 2 weeks off in design work, although I still didn’t find any multi-calendar as I was expecting there (also didn’t find it anywhere).

Great resource. Thanks for sharing. Just created an account. :+1::blush:

@Viktor,

Try the Custom “Calendar” components:

And also the “Timeslots”:
image

These are the same components I’ve built in the BEP Calendar & Timeslots plugins documentation:

2 Likes

Thanks again! I am already using it, but my limited JS knowledge is limiting me a bit.


I’m studying how, but I plan on using this room numbers on each event as a repeating group in rows along with the already great calendar plugin.
Another issue is that dragging the checkin date, deletes the checkout date, and grab the current date to use as the first of the 7 days; but these last 2 issues looks easy to fix later.

I am experiencing some error message when using the calendar components:

State hours is not defined in the plugin

07:20:59

Element CalendarMonth A

State hours is not defined in the plugin

07:20:59

Element CalendarMonth A

The plugin BEP Calendar & Timeslots / element Calendar Month threw the following error: Error: Recursion when evaluating property AAS on element “CalendarMonth A” at r.evaluate_property (https://happytab.me/package/run_debug_js/8d70ef6921f2650e325d885322ce452c5649909a3853a7510b235b018ea655fe/xfalse/x17/run_debug.js:6:2237788) at s (https://happytab.me/package/run_debug_js/8d70ef6921f2650e325d885322ce452c5649909a3853a7510b235b018ea655fe/xfalse/x17/run_debug.js:6:2478413) (please report this to the plugin author)

@renatoasse Well this looks amazing… The only thing I noticed on the video was that it describes how choosing colours is specified to match bootstrap suggestions. Does that mean that you’re not able to specify custom colours? Excited to check this out more.

Hey @anon71899553,

The “Color Palette” is just a collection of Bootstrap colors you can use in a simple way to paste into your elements so they all follow a visual identity from scratch.

But the elements you paste from Bubble Essential Kit are standard Bubble elements, after you paste them into your editor, you can edit these elements exactly in the same way you edit any Bubble element: you can set any colors, conditionals, workflows, and so on.

1 Like

Brilliant…I thought it must be the case but wanted to check :koala:

We are getting issue for images. We have repeating group containing text and images. For small list images appears in a screenshot but for large list images aren’t visible.
below is the image of list containing less data in which we can see logos as well.


and in 2nd image we have big list of text and images in which we can’t see images.
.

To work with repeating group as a table, You’ll need to use at the header the same quantity of elements as the body. So You’ll need to put some transparent placeholder in the header to match the space of the Image