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).
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)
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
Avatar
Stack
Dashboard
Using an Emulator with Device Skins
1. Launch B4X and start the AVD Manager and install an emulator.
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).
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)
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...
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...
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...
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...
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...
Last edited: