B4A Library [B4X] [B4A] B4XDaisyUIKit - Native Components inspired by DaisyUI & Tailwind

Hi Fam

Please note the source of truth for all the working examples for this library will always be the latest demo source code from github/google drive, use that rather as a reference point for your development.

The library is still under development and sometimes things change and perhaps code examples posted here might have changed / inaccurate when a latest release is published.


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:

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
 

Pripyat

New Member
Thanks a lot for these updates, much appreciated. I see you changed a lot of methods for the B4XDaisyList - is there a documentation on these new methods somewhere? The Notepad says it doesn't know them.

Screenshot 2026-06-22 at 15.44.20.png
 

Mashiane

Expert
Licensed User
Longtime User
Thanks a lot for these updates, much appreciated. I see you changed a lot of methods for the B4XDaisyList - is there a documentation on these new methods somewhere? The Notepad says it doesn't know them.
Ohh yes, I will update the NotebookLM soon, however you can do your own. Currently all the examples are in the demo page in the app. That is the source of truth. You can do this, open the demo project in b4a, export the code bundle, this will create a json file. Change its extension to a txt file and import that to NotebookLM and you can query it.

All the best.
 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Toky Olivier

Active Member
Licensed User
Longtime User
Thank you for this huge library 🙏. Seems like the b4xlib is not yet updated in the repo and Google drive or I'm wrong?
 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
B4XDaisyUIKit 0.70 is out...

Please note: This project has not reached production use, expect bugs. Performance has not yet been optimized and Abstract Designer usage is working as expected from any b4xlib. For now, B4A is the priority, other platforms will be visited in due time.

Changelog - v0.70
Generated on: 2026-07-08
Compare: v0.61 -> v0.70
Repository: https://github.com/Mashiane/Sithaso-B4XDaisy-UIKit—Native-Android-Components-inspired-by-DaisyUI
Google Drive: https://drive.google.com/drive/folders/1Ccr4SiPYugPCsN0juwwwqAZGewMW-xZj?usp=sharing

1783481783516.png
1783481799236.png
1783481817692.png
1783481829820.png



Summary
• New components: 14
• Modified components: 81
• Removed components: 0

New Files
• B4XDaisyActionSheet.bas
• B4XDaisyColorWheel.bas
• B4XDaisyFileHandler.bas
• B4XDaisyFileInput.bas
• B4XDaisyFilter.bas
• B4XDaisyImage.bas
• B4XDaisyOTP.bas
• B4XDaisyPageScroll.bas
• B4XDaisyPicker.bas
• B4XDaisySegment.bas
• B4XDaisySheetModal.bas
• B4XDaisySignaturePad.bas
• B4XDaisySweetAlert.bas
• B4XDaisySweetAlertIcon.bas

Modified Files

• B4XAnimation.bas
• B4XDaisyAccordion.bas
• B4XDaisyAlert.bas
• B4XDaisyApp.bas
• B4XDaisyAvatar.bas
• B4XDaisyAvatarGroup.bas
• B4XDaisyBadge.bas
• B4XDaisyBadgeGroupSelect.bas
• B4XDaisyBoxModel.bas
• B4XDaisyBreadcrumbs.bas
• B4XDaisyButton.bas
• B4XDaisyCanvasSpinner.bas
• B4XDaisyCard.bas
• B4XDaisyCardActions.bas
• B4XDaisyCardBody.bas
• B4XDaisyCardTitle.bas
• B4XDaisyCarousel.bas
• B4XDaisyCarouselItem.bas
• B4XDaisyChat.bas
• B4XDaisyChatBubble.bas
• B4XDaisyCheckbox.bas
• B4XDaisyCheckboxGroup.bas
• B4XDaisyCollapse.bas
• B4XDaisyCollapseContent.bas
• B4XDaisyCollapseTitle.bas
• B4XDaisyCountdown.bas
• B4XDaisyCountdownItem.bas
• B4XDaisyDashboard.bas
• B4XDaisyDiff.bas
• B4XDaisyDivider.bas
• B4XDaisyDivision.bas
• B4XDaisyDock.bas
• B4XDaisyDropdown.bas
• B4XDaisyFab.bas
• B4XDaisyFieldset.bas
• B4XDaisyFlexItem.bas
• B4XDaisyFlexLayout.bas
• B4XDaisyFlexPanel.bas
• B4XDaisyGrid.bas
• B4XDaisyHero.bas
• B4XDaisyHover3d.bas
• B4XDaisyIconButton.bas
• B4XDaisyIndicator.bas
• B4XDaisyInput.bas
• B4XDaisyKbd.bas
• B4XDaisyLabel.bas
• B4XDaisyList.bas
• B4XDaisyLoading.bas
• B4XDaisyMenu.bas
• B4XDaisyModal.bas
• B4XDaisyNavbar.bas
• B4XDaisyOverlay.bas
• B4XDaisyPagination.bas
• B4XDaisyProgress.bas
• B4XDaisyRadialProgress.bas
• B4XDaisyRadio.bas
• B4XDaisyRadioGroup.bas
• B4XDaisyRange.bas
• B4XDaisyRating.bas
• B4XDaisySelect.bas
• B4XDaisyStack.bas
• B4XDaisyStat.bas
• B4XDaisyStatItem.bas
• B4XDaisyStatus.bas
• B4XDaisySteps.bas
• B4XDaisySvgIcon.bas
• B4XDaisySwap.bas
• B4XDaisyTab.bas
• B4XDaisyText.bas
• B4XDaisyTextRotate.bas
• B4XDaisyTimeline.bas
• B4XDaisyToast.bas
• B4XDaisyToggle.bas
• B4XDaisyToggleGroup.bas
• B4XDaisyTooltip.bas
• B4XDaisyVariants.bas
• B4XDaisyWindow.bas
• YogaContainer.bas
• YogaNode.bas
• YogaStyle.bas
• YogaView.bas

Removed Files
• (none)

Resources used in B4XLib

• angles-left-solid.svg
• angles-right-solid.svg
• bars-solid.svg
• check-solid.svg
• chevron-left-solid.svg
• chevron-right-solid.svg
• circle-info-solid.svg
• circle-question-regular.svg
• circle-xmark-solid.svg
• close.svg
• eye-slash-solid.svg
• eye-solid.svg
• magnifying-glass-solid.svg
• photo-1560717789-0ac7c58ac90a.webp
• photo-1560717789-0ac7c58ac90a-blur.webp
• triangle-exclamation-solid.svg
• xmark-solid.svg
• x-solid-full.svg

Libraries used - Thank you so much to creators of these libraries

• ac_leafletview
• b4xpages
• bitmapcreator
• bitmapcreatoreffectsext
• contentresolver
• core
• fileprovider
• fusedlocationprovider
• geocoder
• gps
• ime
• javaobject
• json
• reflection
• runtimepermissions
• sql
• stringutils
• xcustomlistview
• xui


Download APK

 
Last edited:
Top