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)

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

Avatar

Stack

Dashboard

Using an Emulator with Device Skins

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


1775405460108.png
 
Last edited:

alcaraz73

Member
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
 
Top