Share My Creation 🚀 [B4X][B4A] B4XDaisyUIKit: Bring Tailwind CSS & DaisyUI Magic to Native Android! 🎨

Hi Fam

NB: The current version has been tested with B4A, cross platform is on the roadmap.

Hello B4X Community!

Are you tired of spending hours tweaking panels, borders, and colors to get a modern look for your Android apps? Have you been looking enviously at web developers using Tailwind CSS and DaisyUI to build gorgeous interfaces in minutes?

I am thrilled to present the B4XDaisy UIKit!

This toolkit is a massive, native B4X component library inspired heavily by DaisyUI. It brings the semantic color variants (Primary, Secondary, Accent, Info, Success, Warning, Error), Tailwind sizing tokens, and beautiful default styling directly into your B4A Rapid App Development workflow!

What's Included?

Almost everything you need to build a top-tier modern application. The kit includes fully interactive, native components:

• Navigation & Layout: Navbar (with Glass effects!), FlexPanel, Divider, Window, Hero, Collapse.
• Data Display: Avatar (with masks like squircle, hexagon, heart), Badge, Card, Carousel, Stat, SvgIcon.
• Feedback & Interaction: Alert, Button, Swap, Toast, Tooltip, Progress, RadialProgress, Status, Loading Spinners.
• Advanced: Fully functioning Chat Bubbles (with time-ago, avatars, and theming), and Skeleton loaders!

Why B4XDaisy?

• Native Performance: This isn't a WebView. B4XDaisy uses native B4XView, B4XCanvas, and JavaObject tricks (like GradientDrawable and OutlineProvider) to ensure buttery smooth performance.
• Designer Friendly: Most components can be added straight from the B4X Visual Designer, complete with custom properties for Variants, Rounded corners (rounded-box), and Shadows.
• Code-First Ready: Prefer to build your UI programmatically? Every component has a fluent, easy-to-use API.

Simple Usage Example
Here is how incredibly easy it is to create a beautiful, modern button entirely via code:

' 1. Declare your component
Private myBtn As B4XDaisyButton

' 2. Initialize it, providing the callback target and event prefix
myBtn.Initialize(Me, "myBtn")

' 3. Add it to your layout (e.g., Root) with standard coordinates
myBtn.AddToParent(Root, 20dip, 20dip, 150dip, 48dip)

' 4. Apply DaisyUI / Tailwind magic! 🪄
myBtn.Text = "Click Me!"
myBtn.Variant = "primary"   ' Applies the primary theme color
myBtn.Style = "outline"     ' Makes it an outlined button
myBtn.Rounded = "full"      ' Applies pill-shaped rounded corners
myBtn.IconName = "check-solid.svg" ' Easily add an icon!

' 5. Handle the click event!
Private Sub myBtn_Click (Tag As Object)
    Log("B4XDaisy Button was clicked!")
End Sub

Stop fighting with standard panels and start building apps that your users will love looking at. Let me know what you think below, and feel free to share screenshots of the beautiful UIs you build with this!

Happy Coding!




Related Content

[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...

www.b4x.com

 

[TILogistic]

Congratulations: It will be a great UIKit for B4X!