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

Hi Fam

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)

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

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

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

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

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

Using an Emulator with Device Skins

1. Launch B4X and start the AVD Manager and install an emulator.

How to change Default Android Emulator Skins (AVD) with Device Skins

1. Download the skins from https://github.com/larskristianhaga/Android-emulator-skins You can download skin for just one device or download all as an archive 2. Create a folder inside your android SDK folder and name it Skins 3. Copy or Extract the files downloaded in Step 1 into the skins...

www.b4x.com

 

[alcaraz73]

Que impresionante trabajo, muchas felicidades y gracias por compartirlo.

Estoy probando B4XDaisyBadgeGroupSelect ahora mismo, sólo que no logro que aparezca la marca () cuando está seleccionado, como en el ejemplo. ¿Alguna librería requerida o me estoy perdiendo algún evento?

Gracias nuevamente

 

[Mashiane]

Que impresionante trabajo, muchas felicidades y gracias por compartirlo.

Estoy probando B4XDaisyBadgeGroupSelect ahora mismo, sólo que no logro que aparezca la marca () cuando está seleccionado, como en el ejemplo. ¿Alguna librería requerida o me estoy perdiendo algún evento?

Gracias nuevamente

Muchas gracias. Eso es muy extraño, voy a investigarlo. ¿El problema ocurre en la aplicación demo o en tu propia aplicación?

 

[Mashiane]

Hi Fam

I am fixing some bugs with this and working on form components, It has not been easy as I wished,

Will keep you posted.

Thanks.

 

[Pripyat]

Hello,

Big thanks for creating this library of components, this is great work. I've been using it in a project and I have some feedback for a potential future update.

B4XDaisyNavbar

1. It would be good if it was possible to change the buttons / title on an already existing instance of B4XDaisyNavBar. Currently, I need to recreate it each time I want to change the title - there's no option to either remove or update the existing one.
2. When adding a B4XDaisyButton to either the left or right button slot, the button style "ghost" is ignored. I am currently placing the buttons manually on the navbar to get this to work.

B4XDaisyList

1. Adding rows using the AddRowWithItems method works as advertised, however, any views you currently add using this method will swallow most of the touch events of the row. I find myself having to tap the very right corner of the cell in order to trigger the click event.
2. When working with larger datasets (300+ rows), the control will take a good three seconds to render all the cells as there's no support currently for lazy loading rows. I see there's a "GetRow" method exposed but navigating through that map till you get to the cell views is quite rough.
3. A nice to have - the control may benefit from having scroll view embedded. I do it manually currently.

B4XDaisyCarousel

1. I can't get the _Click event to work. Event handler and callback pointer are correct.

Overall Controls

1. The setSize function that many controls have should also take dip figures. The predefined sizes can be quite limiting.

 

[Mashiane]

Hello,

Big thanks for creating this library of components, this is great work. I've been using it in a project and I have some feedback for a potential future update.

B4XDaisyNavbar

1. It would be good if it was possible to change the buttons / title on an already existing instance of B4XDaisyNavBar. Currently, I need to recreate it each time I want to change the title - there's no option to either remove or update the existing one.
2. When adding a B4XDaisyButton to either the left or right button slot, the button style "ghost" is ignored. I am currently placing the buttons manually on the navbar to get this to work.

B4XDaisyList

1. Adding rows using the AddRowWithItems method works as advertised, however, any views you currently add using this method will swallow most of the touch events of the row. I find myself having to tap the very right corner of the cell in order to trigger the click event.
2. When working with larger datasets (300+ rows), the control will take a good three seconds to render all the cells as there's no support currently for lazy loading rows. I see there's a "GetRow" method exposed but navigating through that map till you get to the cell views is quite rough.
3. A nice to have - the control may benefit from having scroll view embedded. I do it manually currently.

B4XDaisyCarousel

1. I can't get the _Click event to work. Event handler and callback pointer are correct.

Overall Controls

1. The setSize function that many controls have should also take dip figures. The predefined sizes can be quite limiting.

Thanks for your feedback. I will look into each of these issues and revert back.