Recently we saw an exciting chain of new releases in our front end stack:
- January 22, 2025: Tailwind 4
- February 28, 2025: DaisyUI 5
- March 7, 2025: Feliz.DaisyUI 5
Tailwind CSS is an essential part of our SAFE stack, providing utility-first CSS that helps us build modern interfaces quickly. While DaisyUI (a component library built on top of Tailwind) is not shipped as part of the SAFE template, we still consider it a great tool for building clean, themeable UIs with speed! The Feliz.DaisyUI library allows us to easily integrate DaisyUI components natively in F#; learn how to integrate it in your SAFE app by following the recipe.
In this blog post, we'll go over the changes in Daisy 5 and Feliz.DaisyUI 5. Tailwind 4 will be part of the next release of SAFE stack, and will get some more attention then! We also built a demo app to show off some of the new features.
What's New in DaisyUI 5?
You can get a full overview of what changed in DaisyUI 5 in the change log, but here are the highlights that we're most excited about:
Smaller Package Size
DaisyUI has become significantly lighter! The install size of the NPM package has decreased from 4.7 MB to 1.8 MB, and the CDN file has shrunk to just 34 kb, making it a much more feasible option for production use.
Enhanced Theming Support
DaisyUI themes have gotten even more powerful, with an intuitive online theme generator that empowers you to add custom themes to your site with ease.
New Elements!
Chances are, if you're using DaisyUI, that you don't care for putting UI elements together yourself. Some new elements added to the package make building flashy UIs even easier than before.
Elements in Our Demo
To demo some new features of DaisyUI, we built a small demo app. Apart from the elements listed below, we also tried out the new themes. Try opening the app in both a browser using light and dark mode, and see how the site changes theme!
Dock
The new Dock element makes adding a static navigation bar at the bottom of your site a breeze.
This element is used for switching between the create and todo view of the demo app.
Label
Making neat, space-saving form fields is easy as apple pie with the new label element. We really like how the floating element works, where the dummy text in the label is replaced with a label on top once you select it!
This element is used for the form elements when creating a new to-do.
Filter
Looking for a neat way to select a subset of your data? With the new filter element, that's easy!
This element is used to toggle between showing all, work or private todo items in the demo app.
List
Neatly presenting a collection of data was never so easy, with the new list element.
This element is used to list the to-do's in the demo app.
Elements Not in Our Demo
FieldSet
Apart from the label we saw earlier, there's also a new, more traditional fieldset element, where the full set is labeled, and field labels are placed outside of the input fields.
Status
Another new addition to the Daisy family are status bubbles.
Conclusion
DaisyUI and Feliz.DaisyUI provide both a boost in performance and in utility of the DaisyUI package. We really appreciate the effort put into this. In particular, we'd like to thank Roman Provazník for writing and maintaining the Feliz.DaisyUI package!
