[New Template] Mobile UI components library

Hey all

I am happy to announce Mobile UI Starter Pack, a building block template library for mobile-firs, mobile app, or progressive web app (esp. iOS app) development, mimicking iOS native design elements.

The template includes:

  • Signup / login workflows
  • 5-step user onboarding flow
  • App navigation bar
  • Dark mode
  • Various components incl. controls, inputs, groups, etc.
  • Banner and alert notifications
  • Customisable loading screen
  • Various predefined styles
  • Settings page template
  • Image gallery with upload function / filter / view / add to favourites / delete workflows

Overall, the app aims at being a starting point and provide all you need to develop your next native or hybrid mobile app. On sale for a limited time.

Happy to answer questions here.

On mobile browsers (Safari), use ‘Add to home screen’ to get rid of the URL field and controls at the bottom.

ezgif.com-video-to-gif
ezgif.com-video-to-gif (2) ezgif.com-video-to-gif (1)ezgif.com-video-to-gif (4)

Documentation: https://www.notion.so/Mobile-UI-Starter-Pack-Documentation-7ae910995dde4dadabbe615c6d94bfdd

17 Likes

A very good idea, very well executed!

Just noticed that some elements seem to be missing in the following two workflows:

Otherwise super nice UI kit!

1 Like

Thanks for the hint. That is just a legacy workflow step i have forgotten to remove (as I used an actual app as staring point for the template). Feel free to just delete the step in your workflow. I have removed it from the template as well now.

2 Likes

It took me a moment to realize that this app template is a “one page” design with all of the provided elements hidden on page load. Is there any documentation? I can’t find any…

I have added the documentation here: https://www.notion.so/Mobile-UI-Starter-Pack-Documentation-7ae910995dde4dadabbe615c6d94bfdd

Also happy to answer any questions here in the meantime. We can also set up a short call if you like and i can walk you through (PM me).

3 Likes

If anyone has any feedback on the template, happy to know what could be improved or added.

Quick wins: apply the styles to the 404 page and the reset pwd page :slight_smile:

Another interesting and very generic thing would be an onboarding flow (step 1, 2, 3).

1 Like

Great idea, thanks. I have added a 5 step onboarding flow to the template. In preview, you can launch it from a button called ‘Start onboarding’ in the ‘Controls’ section of the template.

I have also adjusted the reset pwd and 404 pages

ezgif.com-video-to-gif

2 Likes

We have added two new things:

  1. Paywall UI: An exemplary paywall to offer in-app subscriptions (or in-app purchases) in a native app, e.g. using the BDK (or offering stripe subscriptions in a web app).
    ezgif.com-video-to-gif (1)

  2. Hideable groups
    ezgif.com-video-to-gif

Link to template: Mobile UI Starter Pack

2 Likes

Looks great! Good job man

1 Like

thanks, much appreciated. Hope it helps building nice things faster :slight_smile:

2 Likes

hello! A’d like to understand the diference between the 2 options of License types (standard and developer).

Will this templante work well with Android and PWA?

thanks!

Hi there

Re license: the difference is only whether you can use the template for your own use (standard) or to build applications for 3rd party customers e.g. as an agency (developer). See here for details https://bubble.io/marketplace-policies - functionality is the same however. So if you want to build an app for yourself (also commercial use), go for the standard license.

Re Android / PWA: This is not dependent on any template you use at all, but rather on how Bubble itself works. Bubble apps are basically just web apps that run in any browser independent of the platform. So yes, the template as such can be used to build a PWA or as a basis for any kind of iOS or Android app. However, to for ‘transform’ your Bubble app into an Android or iOS app you will need to take additional steps - i.e. ‘wrap’ the Bubble web application into an app ‘container’. See for example 10 min. Native App iOS & Android [Fundraising in progress] 🔷 or BDK Native Apps - Build before you buy / https://www.thebdk.com/. However, the look and feel of the template is more iOS like than Android.

Hope this helps

4 Likes

Thanks!
It helps a lot!

congrats for the great job!

1 Like

Thanks, much appreciated. Btw, credits for the illustrations go to https://undraw.co/illustrations

1 Like

great stuff man ! I’ve been playing and saw this , the button of onboarding gets above the fold on iphone 7/8/SE

thanks for the hint, added a fix. looks like this now:

1 Like

nice, is the template updated also in my app or should i create a new app with the new version ? (new to bubble user here :grin:)

You’d have to create a new app with the new version

Or just create a new temporary app with the updated template, check what‘s changed in the onboarding group and implement accordingly. Just added a few elements. Pm me if you need help

1 Like