[New Template] Mobile UI components library

Showcase Templates
1

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.

Untitled design (8)
Untitled design (8)840×420 53.5 KB

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

IMG_2278
IMG_2278828×1792 292 KB
IMG_2270
IMG_2270828×1792 85.6 KB
IMG_2271
IMG_2271828×1792 83.9 KB
IMG_2272
IMG_2272828×1792 92.3 KB
IMG_2277
IMG_2277828×1792 412 KB
IMG_2276
IMG_2276828×1792 65 KB
IMG_2275
IMG_2275828×1792 67.6 KB
IMG_2274
IMG_2274828×1792 391 KB
IMG_2257
IMG_2257828×1792 416 KB
IMG_2269
IMG_2269828×1792 121 KB

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

17 Likes
2

A very good idea, very well executed!

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

image
image1750×662 72.6 KB

image
image1108×566 39.6 KB

Otherwise super nice UI kit!

1 Like
3

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
4

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…

7

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
8

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

9

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
10

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
11

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
12

Looks great! Good job man

1 Like
13

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

2 Likes
14

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!

15

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
16

Thanks!
It helps a lot!

congrats for the great job!

1 Like
18

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

1 Like
19

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

image
image714×1030 44.7 KB

20

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

image
image1754×1324 219 KB

1 Like
21

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:)

22

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

23

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