B4A Library [B4X] [B4A] B4XDaisy UI Kit - Native Components inspired by DaisyUI & Tailwind

Hi Fam

Disclaimer: The [B4A] in the title? This b4xlib has only been tested with B4A, thus the title. I have not checked the cross-platform functionality as its on the roadmap when I finish the complete library. The b4xlib is still in ALPHA stage, things might change, apis might break and nothing as yet has been done using abstract designer layouts.

Download from GitHub

Download from Google Drive

Track the Project

Ask NotebookLLM about B4XDaisyUI


I am proud to present the B4X Daisy UI Kit, a suite of native custom views designed to bring the modern aesthetic and utility of the DaisyUI (Tailwind CSS) framework to B4X development.
Unlike libraries that wrap WebViews to achieve modern UI looks, these components are 100% native. They use B4XCanvas and standard Panels to render vector shapes, shadows, and layouts, ensuring high performance and a native feel on Android (and B4X cross-platform implementations).

🎨 The Core: B4XDaisyVariants
At the heart of this library is the B4XDaisyVariants static code module. It acts as the "glue" for the entire system, standardizing:

• Color Palettes: Define semantic colors (Primary, Secondary, Accent, Success, Error) once, and all components adapt automatically.
• Shape Masks: Mathematical generation of complex shapes like Squircles, Hexagons, Hearts, and Stars—no bitmap masks required.
• Size & Shadow Tokens: Translates Tailwind-style tokens (e.g., w-12, shadow-xl) into native dip values.

What's in Version 0.1 - 17 Feb 2026 (ALPHA VERSION)

1771356285817.png
1771356393716.png
1771356491659.png
1771356549548.png
1771356619058.png
1771356665843.png



📦 Included Components
1. B4XDashboard A fully responsive, launcher-style grid.
• Auto-Grid: Automatically calculates rows and columns based on screen size.
• Features: Swipe pagination, notification badges (99+), and "snap-to-page" scroll physics.
2. B4XDaisyChat & ChatBubble A complete chat controller and rendering engine.
• Logic: Handles message history, "Time-Ago" timestamp formatting (e.g., "5m ago"), and read receipts.
• Visuals: Vector-drawn bubbles with tails, supporting "Block" or "Rounded" styles and dynamic theming.
3. B4XDaisyAvatar A smart image container.
• Masking: Apply any shape (Squircle, Decagon, Star) to a profile picture.
• Status: Built-in "Online" (green dot) and "Offline" indicators with automatic ring borders.
4. B4XDaisyStack A layout container for depth effects.
• Depth: Stacks items on top of each other with configurable offsets (StepPrimary, StepSecondary) to create "card stack" visuals.
• Auto-Fill: Automatically resizes child views to fit the stack layers.
5. B4XDaisyDiv A versatile container inspired by HTML divs.
• Styling: Supports complex borders (dashed, groove, ridge, inset) and shadow elevations.

PS: The components will be converted into a b4xlib soon enough..

We have used these libraries in b4a so long

1771355844644.png




What's new in Version 0.30 (March 03 - 2026)




Related Content

Chat

[B4X] B4XDaisyChat - Full-Featured Native Chat Engine

Hi Fam I am pleased to introduce B4XDaisyChat, the centerpiece of the B4X Daisy UI Kit series. This is a comprehensive "Controller" component that manages a scrollable list of messages. It handles the heavy lifting of chat interfaces: message alignment (Start/End), timestamp formatting, avatar...
www.b4x.com www.b4x.com

Avatar

[B4X] B4XDaisyAvatar - Shaped Profile Images & Status Indicators

Hi Fam I am pleased to introduce B4XDaisyAvatar, a versatile image component part of the B4X Daisy UI Kit series. Inspired by the DaisyUI avatar utility, this component simplifies the creation of user profile pictures. It handles complex shape masking, status indicators (online/offline), and...
www.b4x.com www.b4x.com

Stack

[B4X] B4XDaisyStack - Native Card Stacking Container

Hi Fam I am pleased to introduce B4XDaisyStack, another component in the B4X Daisy UI Kit series. Inspired by the visual utility of the DaisyUI stack component, this view allows you to stack elements on top of each other with automatic offset calculations, creating a "depth" effect perfect for...
www.b4x.com www.b4x.com

Dashboard

[B4X] B4XDashboard - Native Responsive Launcher & Grid Menu

Hi Fam I am pleased to present B4XDashboard, a nativecross-platform component part of the B4X Daisy UI Kit series. Inspired by the clean utility of the Tailwind CSS / DaisyUIframework, this component provides a fully responsive, paged "Launcher" style interface for your apps. It is perfect for...
www.b4x.com www.b4x.com
 
Last edited:
Click to expand...
Duque

Duque

Active Member
Licensed User
Longtime User
📌 Your library is amazing and very well done.

However, you indicate that it's B4X, but when running it in B4J, the first error appears: it doesn't recognize the Panel library (Pane is used in B4J).

🤔 This raises the question: is it fully B4X (compatible with all platforms) or is it designed only for B4A?
It's a shame that, for now, it only works in B4A and not in B4J and B4I.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Duque said:
📌 Your library is amazing and very well done.

However, you indicate that it's B4X, but when running it in B4J, the first error appears: it doesn't recognize the Panel library (Pane is used in B4J).

🤔 This raises the question: is it fully B4X (compatible with all platforms) or is it designed only for B4A?
It's a shame that, for now, it only works in B4A and not in B4J and B4I.
Click to expand...
Thank you so much, I appreciate.

B4J and B4I are on the roadmap, thus for now the thread title is [B4X] [B4A].

Kind Regards

Mashy..
 
TILogistic

TILogistic

Expert
Licensed User
Longtime User
Very well done, congratulations.

If you're considering B4X (cross-platform) animations, you could use easing functions instead of the native ones.

Animation easing functions

After having seen the first post of this tread: My favourite animation trick: exponential smoothing. I decided to make a B4XPages project for the different easing functions and posted it there. The source of the equations comes from this site: Easing Equations Then, I was suggested to post it...
www.b4x.com www.b4x.com

Or you could create a B4X animation engine (custom class) using easing function algorithms and others.

I worked on this a while ago, and now I'm updating it to add other functions to this animation engine, based on GSAP (GreenSock Animation Platform). That is, a B4XGSAP class.

ref.
gsap.com

Homepage

Supported by Webflow. Animate Anything - A wildly robust JavaScript animation library built for professionals.
gsap.com gsap.com

example:

[B4X] Testing hundreds of object or view animations

I'm testing an animation class I created for cross-platform (B4X). ref. https://spicyyoghurt.com/tools/easing-functions
www.b4x.com www.b4x.com

B4X: 
Dim gsap As GSAP
gsap.Initialize(Button1)

'Animaciones en paralelo
gsap.Add("x", 0, 200dip, 1000, "easeOutQuad", True, 0, 0, False)
gsap.Add("alpha", 1, 0, 600, "easeOutBounce", True, 0, 0, False)

'Animación en serie (después de las anteriores)
gsap.Add("scale", 1, 1.5, 800, "easeInOutCubic", False, 0, 0, False)

'Animación final: cambio de color
gsap.Add("bgcolor", Colors.Red, Colors.Blue, 1500, "easeInOutSine", False, 0, 0, False)

gsap.Play
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
TILogistic said:
Very well done, congratulations.

If you're considering B4X (cross-platform) animations, you could use easing functions instead of the native ones.

Animation easing functions

After having seen the first post of this tread: My favourite animation trick: exponential smoothing. I decided to make a B4XPages project for the different easing functions and posted it there. The source of the equations comes from this site: Easing Equations Then, I was suggested to post it...
www.b4x.com www.b4x.com

Or you could create a B4X animation engine (custom class) using easing function algorithms and others.

I worked on this a while ago, and now I'm updating it to add other functions to this animation engine, based on GSAP (GreenSock Animation Platform). That is, a B4XGSAP class.

ref.
gsap.com

Homepage

Supported by Webflow. Animate Anything - A wildly robust JavaScript animation library built for professionals.
gsap.com gsap.com

example:

[B4X] Testing hundreds of object or view animations

I'm testing an animation class I created for cross-platform (B4X). ref. https://spicyyoghurt.com/tools/easing-functions
www.b4x.com www.b4x.com

B4X: 
Dim gsap As GSAP
gsap.Initialize(Button1)

'Animaciones en paralelo
gsap.Add("x", 0, 200dip, 1000, "easeOutQuad", True, 0, 0, False)
gsap.Add("alpha", 1, 0, 600, "easeOutBounce", True, 0, 0, False)

'Animación en serie (después de las anteriores)
gsap.Add("scale", 1, 1.5, 800, "easeInOutCubic", False, 0, 0, False)

'Animación final: cambio de color
gsap.Add("bgcolor", Colors.Red, Colors.Blue, 1500, "easeInOutSine", False, 0, 0, False)

gsap.Play
Click to expand...
Thank you so much for the compliments. Lovely, I will sure check this animation lib out, thanks. The roadmap for this UIKit was to port the Motion.js animations to it, only after I finish everything though. I will surely learn a lot from what you have done. I appreciate. 🙏
 
TILogistic

TILogistic

Expert
Licensed User
Longtime User
The current version of B4XGSAP is based on the motion.js methods in B4X (see published code).

The new version I'm working on is adding some features and methods from GSAP.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
B4XDaisyOverlay


1772582171684.png



[B4X][B4A] 🌼 B4XDaisyOverlay - Elegant & Customizable Translucent UI Overlays

Hello Fam! Are you looking for an easy way to dim the background behind a dialog, create custom popups, or add sleek, non-blocking visual surfaces to your views? I want to introduce B4XDaisyOverlay, a lightweight yet incredibly versatile class that allows you to layer a translucent surface over...
www.b4x.com www.b4x.com
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Version 0.40 is out...

Here are the newest components.

1773153787820.png



[B4X][B4A] B4XDaisyList - Modern, Tailwind & DaisyUI Inspired Lists Made Easy! 🚀

Hi Fam! I am excited to share a modern UI component that will instantly elevate the look and feel of your applications: B4XDaisyList! If you love the clean, modern aesthetic of frameworks like Tailwind CSS and DaisyUI, you will love this. B4XDaisyList is designed to take the heavy lifting out...
www.b4x.com www.b4x.com
 
  • Like
Reactions: byz
Mashiane

Mashiane

Expert
Licensed User
Longtime User
  • Like
Reactions: byz
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4A Library [B4X][B4A] 🌼 B4XDaisyMenu - Stunning, Responsive Tailwind/DaisyUI Style Menus!
Replies
0
Views
200
Mashiane
Mashiane
Mashiane
  • Article
B4A Library [B4X][B4A] ⏱️ B4XDaisyCountdown - Beautiful, DaisyUI/Tailwind Inspired Countdown Timers!
Replies
0
Views
251
Mashiane
Mashiane
Mashiane
  • Article
B4A Library [B4X][B4A] B4XDaisyList - Modern, Tailwind & DaisyUI Inspired Lists Made Easy! 🚀
Replies
0
Views
225
Mashiane
Mashiane
Mashiane
  • Article
B4A Library [B4X] [B4A]🌼 B4XDaisyDivider: Beautiful Tailwind & DaisyUI Inspired Dividers for Your Apps!
Replies
0
Views
263
Mashiane
Mashiane
Mashiane
  • Article
B4A Library [B4X][B4A] 🚀 Create Beautiful UI in B4X: B4XDaisyCard Component Tutorial (Tailwind & DaisyUI Inspired)
Replies
2
Views
393
Mashiane
Mashiane
Top