Read the docs on how to use the plugin: https://docs.nocodeventure.com/react-native-plugins/material-color-picker
Demo link: https://ncv-react-plugins-3.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=color_picker

Editor link: https://bubble.io/page?id=ncv-react-plugins-3&tab=Design&name=color_picker&type=page&elements=bTLLT

🚀 How to Use Material Color Picker in Bubble
1. Add the Element
Drag the Material Color Picker plugin into your Bubble mobile editor.

Set the width and height (e.g. 300×200 or use 100% width).

2. Customize Appearance (Optional)
Background Color → Choose a background (or leave transparent).

Show Divider Line → Turn this on to show a vertical line.

Divider Line Color → Pick a color like #E0E0E0.

Corner Radius → Set Roundness for rounded corners.

3. Provide Custom Colors (Optional)
In Material Colors (JSON), paste a JSON list of color groups and hex values.

You can also leave this empty to use the built-in Red/Blue/Green set.

4. Use the Output States
Use Selected Color state to know which group is selected (e.g. "Blue").

Use Copied Hex Value to get the last tapped hex code (e.g. "#2196F3").

5. Trigger Actions
Use the Color Selected event to run workflows when a group is chosen.

Use the Hex Copied event to respond when a hex value is copied.

✅ Example Use Case
User selects "Green" → Selected Color becomes "Green"

User taps #4CAF50 swatch → Copied Hex Value becomes "#4CAF50"

You can show a toast, save it to Bubble DB, or apply it as a theme color!