[FREE] NeumorphismUI Extension - Modern 3D Soft UI & Tactile Controls

Extensions
1

Hello Kodular Community,
​I am pleased to introduce NeumorphismUI, an extension designed to bring ultra-modern, hyper-realistic Neumorphic (Soft UI) design to your Kodular apps. It effortlessly transforms standard flat CardViews and Arrangements into soft, tactile, three-dimensional extruded components.
​Highlights & Features
​Dual Depth Shadows: Combines an ambient wide blur with sharp contact drop-shadows to produce authentic visual elevation.
​3D Molded Bevel Rims: Subtle edge highlights recreate the appearance of real molded plastic surfaces.
​Auto-Interactive Touch: Components automatically depress inwards on touch and pop back out on release.
​Haptic Tactile Feedback: Integrated mechanical vibration triggers on click for a realistic physical feel.
​Smart State Toggles: Supports push-toggle buttons with persistent sunken states and optional colored accent glow.
​Adaptive Theme Engine: Automatically adjusts shadow contrast and specular highlights for light and dark layouts.
​Capsule & Circle Geometry: Supports smooth rounded rectangular cards as well as perfect floating circular buttons.
​The Golden Rule of Neumorphism
​IMPORTANT: For the 3D elevation and sunken effect to appear seamlessly, the Background Color of your Screen/Arrangement and the BaseColor supplied to the extension MUST be EXACTLY IDENTICAL.
​Recommended Color Codes:
​Standard Soft Gray (Best Result): #E0E5EC
​Clean Modern Gray: #E8ECF4
​Sharp Matte Gray: #E2E7EE
​Dark Mode Charcoal: #24272C
​Dark Mode Deep Navy: #1E222B
​Recommended Setup Values
​Elevation: Keep between 10 and 16 for natural shadows.
​Corner Radius: Use half the component’s height for pills/capsules, or 24 to 45 for soft cards.
​Shapes Available:
​ShapeFlat: Subtle flat elevated plate.
​ShapePressed: Inset sunken cavity container.
​ShapeConvex: Outward curved tactile surface.
​Blocks Overview
​

A block-based programming interface using NeumorphismUI1 component functions to enable touch feedback, toggle component states, apply advanced neumorphism styling, and reset views with customizable properties. (Captioned by AI)
A block-based programming interface using NeumorphismUI1 component functions to enable touch feedback, toggle component states, apply advanced neumorphism styling, and reset views with customizable properties. (Captioned by AI)1000×690 89.7 KB

A user interface design featuring three dark rectangular buttons labeled 'Text for Button1', 'Text for Button2', and 'Text For Button3Label', a round toggle switch with a blue heart icon, and two large rounded rectangular sliders. (Captioned by AI)
A user interface design featuring three dark rectangular buttons labeled 'Text for Button1', 'Text for Button2', and 'Text For Button3Label', a round toggle switch with a blue heart icon, and two large rounded rectangular sliders. (Captioned by AI)1080×2400 66.3 KB

A mobile interface screen displaying three buttons labeled 'Text for Button1', 'Text for Button2', and 'Text For Button3', along with two oval-shaped switches with one containing a blue heart icon. (Captioned by AI)
A mobile interface screen displaying three buttons labeled 'Text for Button1', 'Text for Button2', and 'Text For Button3', along with two oval-shaped switches with one containing a blue heart icon. (Captioned by AI)1080×2400 69.8 KB

A user interface with three buttons labeled 'Text for Button1', 'Text for Button2', and 'Text for Button3', a heart icon inside a circle, and two large rounded rectangular toggles below them. (Captioned by AI)
A user interface with three buttons labeled 'Text for Button1', 'Text for Button2', and 'Text for Button3', a heart icon inside a circle, and two large rounded rectangular toggles below them. (Captioned by AI)1080×2400 68.3 KB

Use

A visual programming interface showing multiple connected blocks organized into four sections labeled 'HTTP POST' with various commands and parameters for a code implementation. (Captioned by AI)
A visual programming interface showing multiple connected blocks organized into four sections labeled 'HTTP POST' with various commands and parameters for a code implementation. (Captioned by AI)2220×1192 297 KB

​Events:
​
​Downloads
​AIX File:
com.supertech.neumorphismui.aix (23.0 KB)

Apk
test.apk (5.8 MB)

Thanks Again Fast

3 Likes
3

FAST-CLI generates standard Markdown documentation for your extensions, which you may publish following any necessary adjustments. You can locate the generated documentation at $PROJECT_DIR/out/extension.txt.

Additionally, you have the option to generate blocks as PNG images during the extension build process, for example by using:

fast build -b

The generated blocks may be found in the $PROJECT_DIR/out/blocks/kodular/ directory.

Please ensure that the gen_docs feature is enabled within the configuration file located at $PROJECT_DIR/fast.yml.

1 Like
4

Updated with complete documentation, block images, and AIX. Please review and list it."

6

This looks impressive! The realistic shadows and interactive touch effects could really give Kodular apps a polished, modern feel.

1 Like
7

Thank you :smiling_face_with_three_hearts: and yes, I plan to make further improvements to this.