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

Avatar

Stack

Dashboard
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
  • Like
Reactions: byz

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
  • Like
Reactions: byz

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Version 0.50 (ALPHA) is out....​

Changelog - v0.50​

Generated on: 2026-03-18

Compare: v0.40 -> v0.50

Repository: https://github.com/Mashiane/Sithaso-B4XDaisy-UIKit—Native-Android-Components-inspired-by-DaisyUI

Summary​

New components: 11

Modified components: 49

Removed components: 0

New Files​

  • B4XDaisyApp.bas
  • B4XDaisyDropdown.bas
  • B4XDaisyFab.bas
  • B4XDaisyGrid.bas
  • B4XDaisyHover3d.bas
  • B4XDaisyMenu.bas
  • B4XDaisyModal.bas
  • YogaContainer.bas
  • YogaNode.bas
  • YogaStyle.bas
  • YogaView.bas

Modified Files​

  • B4XDaisyAccordion.bas
  • B4XDaisyAlert.bas
  • B4XDaisyAvatar.bas
  • B4XDaisyAvatarGroup.bas
  • B4XDaisyBadge.bas
  • B4XDaisyBadgeGroupSelect.bas
  • B4XDaisyButton.bas
  • B4XDaisyCanvasSpinner.bas
  • B4XDaisyCard.bas
  • B4XDaisyCardActions.bas
  • B4XDaisyCardBody.bas
  • B4XDaisyCardTitle.bas
  • B4XDaisyCarousel.bas
  • B4XDaisyCarouselItem.bas
  • B4XDaisyChat.bas
  • B4XDaisyChatBubble.bas
  • B4XDaisyCollapse.bas
  • B4XDaisyCollapseContent.bas
  • B4XDaisyCollapseTitle.bas
  • B4XDaisyCountdown.bas
  • B4XDaisyCountdownItem.bas
  • B4XDaisyDashboard.bas
  • B4XDaisyDiff.bas
  • B4XDaisyDivider.bas
  • B4XDaisyDivision.bas
  • B4XDaisyFieldset.bas
  • B4XDaisyFlexPanel.bas
  • B4XDaisyHero.bas
  • B4XDaisyIndicator.bas
  • B4XDaisyKbd.bas
  • B4XDaisyList.bas
  • B4XDaisyLoading.bas
  • B4XDaisyNavbar.bas
  • B4XDaisyOverlay.bas
  • B4XDaisyProgress.bas
  • B4XDaisyRadialProgress.bas
  • B4XDaisyStack.bas
  • B4XDaisyStat.bas
  • B4XDaisyStatItem.bas
  • B4XDaisyStatus.bas
  • B4XDaisySvgIcon.bas
  • B4XDaisySwap.bas
  • B4XDaisyText.bas
  • B4XDaisyTextRotate.bas
  • B4XDaisyTimeline.bas
  • B4XDaisyToast.bas
  • B4XDaisyTooltip.bas
  • B4XDaisyVariants.bas
  • B4XDaisyWindow.bas

Removed Files​

(none)
 

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
DropDown

 

Mashiane

Expert
Licensed User
Longtime User
Yoga Layout

 
Top