UI Components Bubble Mobile

✅

Link to plugin page: https://zeroqode.com/plugin/ui-components-native-mobile-1749537371772x144799209787199070

Demo to preview the settings

✅

Demo page: https://zeroqode-native-demo-01.bubbleapps.io/api/1.1/mobile/preview?debug_mode=true&preview_view=UI Components

✅

Bubble Editor: https://bubble.io/page?version=live&name=UI Components&id=zeroqode-native-demo-01&tab=Design

Introduction

Bring smooth, native-like interactions to your Bubble mobile app with the UI Components Bubble Mobile Plugin. This plugin offers essential interface elements—sliders, switches, and marquees—that help you build intuitive, responsive, and visually dynamic mobile experiences.

Use the Slider to capture and respond to user input with precision. The Switch element enables sleek toggles ideal for settings, filters, and quick on/off controls. The Marquee lets you display scrolling text—perfect for news tickers, promotions, or real-time updates.

Each component is highly customizable and integrates seamlessly with your workflows. Trigger events when users interact with components, or dynamically update content based on app logic. The plugin also exposes key states such as current slider value or toggle status, giving you full control over the UI behavior.

Enhance usability and interactivity with native-feeling controls, reduce friction in user input, and create clean, modern interfaces—without writing a single line of code

Prerequisites

No external API accounts or services are required for this plugin. The plugin works natively within your Bubble application with no additional dependencies.

This plugin is designed specifically for the mobile version of the Bubble editor. To test the plugin on your mobile device, use the TestFlight app available at:

https://testflight.apple.com/join/4fXUggud

⚠️

Please note that the testing app is currently available for iOS only.

How to setup

Install the Plugin: Navigate to your Bubble app’s Plugin tab and install the UI Components Bubble Mobile Plugin from the Plugin store.

Add the Element: Drag and drop the Switch/Slider/Marquee/Bottom Sheet/Floating Action Button/Flip Card/Accordion/Section List/Rating Stars/Progress Bar element from the Visual Elements section onto your page.

Configuration: In each element properties panel, set the "Color", "Text", "Content", "Image Url" fields (either static text or a dynamic value from your database).

Set Dimensions: All elements comes with default dimensions of 393x200 pixels, but you can resize it to fit your design needs

Plugin Element Properties

Toggle Switch

A customizable, animated native toggle switch for Bubble with smooth on/off transitions, and full workflow integration with programmatic control and disabled-state handling.

Fields

Element Actions

Exposed States

Element Events

Slider Element

Marquee Element

Accordion Element

Bottom Sheet Element

The Bottom Sheet Element is a versatile and animated modal component for Bubble Native apps, designed to slide up from the bottom of the screen. It’s perfect for showcasing messages, images, buttons, or any content in a focused, user-friendly way—without navigating away from the current screen.

Title	Description	Type
Message	Text content displayed inside the sheet.	Text, Optional
Button Text	Text label for the CTA (call-to-action) button.	Text, Optional
Image URL	URL of a single image to display.	Text, Optional
Image List	Comma-separated list of image URLs for horizontal scrolling.	Text, Optional
z-Index	Z-index for controlling visual layering priority.	Number, Required
Sheet Width	Width of the bottom sheet (in pixels).	Number, Required
ㅤ	ㅤ	ㅤ
	🎨 Message Styling
Font Size	Font size of the message text.	Number, Required
Margin Bottom	Margin below the message (in pixels).	Number, Required
Text Color	Color of the message text (hex or named color).	Color, Required
Margin Top	Margin above the message (in pixels).	Number, Required
Caption	Description	Type, Required
Font Size	Font size of the message text.	Number, Required
Margin Bottom	Margin below the message (in pixels).	Number, Required
Text Color	Color of the message text (hex or named color).	Color, Required
Margin Top	Margin above the message (in pixels).	Number, Required
ㅤ	ㅤ	ㅤ
	🧾 Sheet Styling
Background Color	Background color of the bottom sheet.	Color, Required
Border Top Left Radius	Top-left border radius of the sheet.	Number, Required
Border Top Right Radius	Top-right border radius of the sheet.	Number, Required
Padding	Padding inside the sheet (applies to all sides).	Number, Required
ㅤ	ㅤ	ㅤ
	🖼️ Image Styling
Border Radius	Border radius of images.	Number, Required
Margin Bottom	Bottom margin of images.	Number, Required
Margin Top	Top margin of images.	Number, Required
Height	Height of the images.	Number, Required
Width	Width of the images.	Number, Optional
ㅤ	ㅤ	ㅤ
	🔘 Button Styling
Margin Top	Top margin of the CTA button.	Number, Required
Font Size	Font size of the CTA button text.	Number, Required
Padding Top	Top padding inside the button.	Number, Required
Padding Bottom	Bottom padding inside the button.	Number, Required
Padding Left	Left padding inside the button.	Number, Required
Padding Right	Right padding inside the button.	Number, Required
Margin Bottom	Bottom margin of the CTA button.	Number, Required
Text Color	Font color of the CTA button text.	Color, Required
Border Radius	Border radius of the button.	Number, Required
Background Color	Background color of the button.	Color, Required
Border Color	Border color of the button.	Color, Required
Border Width	Border width of the button.	Number, Required

Element Actions

Open Sheet

Flip Card Element

Floating Action Button Element

Section List Element

Rating Stars Element

Progress Bar Element

Backhandler Element

Exposed states

Title	Description	Type
On	Indicates the current value of the switch	Yes/No
Value	Indicates the value of the slider	Number
Gesture Active	Indicates whether the user is actively interacting with the slider via a pan gesture	Yes/No
Reversed	Indicates whether the direction of the scroll is reversed	Yes/No
Current Snap Index	Indicates z-idex	Number
Sheet Open	Indicates whether the sheet is open	Yes/No
Flipped	Indicates whether the Flic Card is flipped	Yes/No
Expanded	Indicates whether the Accordion is expanded	Yes/No
Selected Item	Indicates the selected item	Text
Current Rating	Indicates the current rating number	Number
Disabled	Indicates whether the rating is enabled	Yes/No
Current Percentage	Indicates whether the percentage number	Number

Elements events

Title	Description
A Switch Turned On	Triggered when the switch is turned on
A Switch Turned Off	Triggered when the switch is turned off
A Slider Value Changed	Triggered when the slider's offset value changes
A Marquee Reverse Changed	Triggered when the orientation of the scroll is changed
A Bottom Sheet Opened	Triggers when a sheet is opened
A Bottom Sheet Closed	Triggers when a sheet is close
A Bottom Sheet Button Clicked	Triggers when a sheet button is clicked
A Flip Card Card Flipped	Triggered when Card is flipped
An Accordion Toggled	Triggered when accordion is toggled
A Section List Section Item Pressed	Toggled when an item is pressed
A Rating Stars Rating Changed	Triggered When Rating Changed
A Progress Bar Progress Changed	Triggered When Progress Changed

Title	Description	Type
Initial Value	The initial state of the toggle switch when first loaded (true = ON, false = OFF)	Yes/No
Track Color On	Background color of the track when toggle is in ON position (hex or rgba format, e.g.,	Color
Track Color Off	Background color of the track when toggle is in OFF position (hex or rgba format, e.g.,	Color
Handle Color	Color of the toggle handle/thumb (hex or rgba format, e.g.,	Color
Border Color	Color of the toggle border (hex or rgba format). Used primarily with "transparent" style preset	Color
Border Width	Border width in pixels (default: 0 for most styles, 2 for transparent)	Number
Shadow Color	Color of the shadow effect (hex or rgba format, e.g., #000000). Only visible on styles with shadow enabled	Color
Animation Enabled	Enable or disable animation when toggling between states	Yes/No
Animation Speed	Duration of the toggle animation in milliseconds. Set to 0 for instant toggle with no animation. Default is 250ms. Common values: 0 (instant), 150 (fast), 250 (normal), 400 (slow)	Number
Disabled	Disable the toggle switch, making it non-interactive with reduced opacity	Yes/No

Name	Description	Type
Current Value	The current state of the toggle switch (true = ON, false = OFF). Updates whenever the toggle changes	Yes/No
Is Disabled	Indicates whether the toggle is currently in disabled state (true = disabled, false = enabled)	Yes/No

Name	Description
Value Changed	Triggered whenever the toggle value changes (either from ON to OFF or OFF to ON). Use this event to run workflows when any toggle action occurs
Toggled On	Triggered specifically when the toggle is switched to the ON position (true state). Use this event for workflows that should only run when enabling the toggle
Toggled Off	Triggered specifically when the toggle is switched to the OFF position (false state). Use this event for workflows that should only run when disabling the toggle

Title	Description	Type
Initial Value	Initial Value of the slider	Number, Required
Slider Width	Width of the Slider	Number, Required
Track Color	Color of the track	Color
Handle Color	Color of the Handle	Color

Title	Description	Type
Image Urls	Comma-separated string of image URLs	Text, Required
Duration	Duration of the animation for scrolling through images	Number, Required
Reverse	Direction of the scroll animation is reversed	Yes/No, Required
Gap	Gap between images in `px`	Number, Required
Image Width	Width of each image	Number, Required
Image Height	Height of each image	Number, Required

UI Components Bubble Mobile

Demo to preview the settings

Introduction

Prerequisites

How to setup

Plugin Element Properties

Toggle Switch

Fields

Element Actions

Exposed States

Element Events﻿

Slider Element

Element Actions

Reset Value

Set Value

Marquee Element

Accordion Element

Bottom Sheet Element

Element Actions

Open Sheet

Flip Card Element

Floating Action Button Element

Section List Element

Rating Stars Element

Element Actions

Set Rating

Reset Rating

Progress Bar Element

Element Actions

Set Progress

Reset Progress

Backhandler Element

Element Actions

Set Progress

Reset Progress

Exposed states

Elements events

Changelogs

Update 23.03.26 - Version 2.12.0

Update 23.03.26 - Version 2.11.0

Update 10.03.26 - Version 2.10.0

Update 29.12.25 - Version 2.9.0

Update 03.12.25 - Version 2.8.0

Update 02.12.25 - Version 2.7.0

Update 02.12.25 - Version 2.6.0

Update 14.11.25 - Version 2.5.0

Update 09.09.25 - Version 2.4.0

Update 08.08.25 - Version 2.3.0

Update 22.07.25 - Version 2.2.0

Update 17.07.25 - Version 2.1.0

Update 19.06.25 - Version 2.0.0

Update 19.06.25 - Version 1.6.0

Update 19.06.25 - Version 1.5.0

Update 19.06.25 - Version 1.4.0

Update 18.06.25 - Version 1.3.0

Update 18.06.25 - Version 1.2.0

Update 18.06.25 - Version 1.1.0

Update 09.06.25 - Version 1.0.0

Element Events