Use daisyui

build.mill

@@ -21,7 +21,6 @@ trait ScalaCommon extends ScalaModule:
   )
 
 object core extends ScalaCommon:
-  // TODO Replace with ujson, core shouldn't depend on ZIO
   def mvnDeps = Seq(mvn"dev.zio::zio-json:0.7.44")
 
   def generatedSources = Task {
@@ -76,5 +75,6 @@ object example extends ScalaCommon:
 
   object js extends TypeScriptModule:
     def mainFileName = "app.js"
-    def npmDeps      = Seq("phoenix@1.7.21", "phoenix_live_view@1.1.8", "topbar@3.0.0")
+    def npmDeps = Seq("phoenix@1.7.21", "phoenix_live_view@1.1.8", "topbar@3.0.0", "daisyui@5.1.12")
+    def bundleFlags = super.bundleFlags() ++ Map("minify" -> ujson.Bool(false))
 end example

example/src/CounterLiveView.scala

@@ -24,15 +24,17 @@ class CounterLiveView() extends LiveView[Msg, Model]:
 
   def view(model: Dyn[Model]) =
     div(
-      cls := "max-w-2xl mx-auto bg-white shadow rounded-2xl p-6 space-y-6",
+      cls := "mx-auto card bg-base-100 max-w-2xl shadow-xl space-y-6",
+      div(
+        cls := "card-body",
         h1(
-        cls := "text-2xl font-semibold tracking-tight text-gray-900",
+          cls := "card-title",
           "Counter with auto increment every second"
         ),
         div(
           cls := "flex flex-wrap items-center gap-3",
           button(
-          cls := "inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium ring-1 ring-inset ring-gray-300 text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400/30",
+            cls       := "btn btn-default",
             phx.click := Msg.ToggleCounter,
             model(_.isVisible match
               case true  => "Hide counter"
@@ -40,21 +42,19 @@ class CounterLiveView() extends LiveView[Msg, Model]:
           )
         ),
         model.when(_.isVisible)(
-        div(
-          cls := "rounded-xl border border-gray-200 p-4 bg-gray-50",
           div(
             cls := "flex items-center justify-center gap-4",
             button(
-              cls := "inline-flex items-center justify-center h-9 w-9 rounded-lg ring-1 ring-inset ring-gray-300 text-gray-700 hover:bg-white focus:outline-none focus:ring-2 focus:ring-gray-400/30",
+              cls       := "btn btn-neutral",
               phx.click := Msg.DecCounter,
               "-"
             ),
             div(
-              cls := "min-w-[4rem] text-center text-lg font-semibold text-gray-900",
+              cls := "min-w-[4rem] text-center text-lg font-semibold",
               model(_.counter.toString)
             ),
             button(
-              cls := "inline-flex items-center justify-center h-9 w-9 rounded-lg bg-gray-900 text-white shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-900/30",
+              cls       := "btn btn-neutral",
               phx.click := Msg.IncCounter,
               "+"
             )

example/src/HomeLiveView.scala

@@ -14,14 +14,10 @@ class HomeLiveView() extends LiveView[String, Unit]:
 
   def view(model: Dyn[Unit]) =
     ul(
-      cls := "space-y-2",
+      cls := "mx-auto menu bg-base-100 rounded-box shadow-xl w-56",
       links.map((path, name) =>
         li(
-          link.navigate(
+          link.navigate(path, name)
-            path,
-            cls := "block px-4 py-2 rounded-lg text-gray-700 hover:bg-gray-100 hover:text-gray-900 font-medium transition",
-            name
-          )
         )
       )
     )

example/src/ListLiveView.scala

@@ -23,44 +23,44 @@ class ListLiveView(someParam: String) extends LiveView[Msg, Model]:
 
   def view(model: Dyn[Model]) =
     div(
-      h1(
+      cls := "mx-auto card bg-base-100 max-w-2xl shadow-xl space-y-6",
-        cls := "text-2xl font-semibold tracking-tight text-gray-900",
+      div(
-        someParam
+        cls := "card-body",
-      ),
+        h1(cls := "card-title", someParam),
-      cls    := "max-w-2xl mx-auto bg-white shadow rounded-2xl p-6 space-y-6",
-      idAttr := "42",
         ul(
-        cls := "divide-y divide-gray-200",
+          cls := "divide-y divide-base-200",
           model(_.elems).splitByIndex((_, elem) =>
             li(
               cls := "py-3 flex flex-wrap items-center justify-between gap-2",
               span(
-              cls := "text-gray-700",
+                cls := "text-base-content",
                 "Nom: ",
-              span(cls := "font-medium", elem(_.name))
+                span(cls := "font-semibold", elem(_.name))
               ),
               span(
-              cls := "text-sm text-gray-500",
+                cls := "text-sm opacity-70",
                 "Age: ",
-              span(cls := "font-semibold text-gray-700", elem(_.age.toString))
+                span(cls := "font-bold", elem(_.age.toString))
               )
             )
           )
         ),
         div(
-        cls := "flex flex-wrap items-center gap-3",
+          cls := "card-actions",
           button(
-          cls := "inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium bg-gray-900 text-white shadow hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-gray-900/30",
+            cls       := "btn btn-default",
             phx.click := Msg.IncAge(1),
             "Inc age"
           ),
           span(cls := "grow"),
           button(
-          phx.click := JS.toggleClass("bg-red-500 border-5"),
+            cls       := "btn btn-neutral",
+            phx.click := JS.toggleClass("btn-neutral btn-accent"),
             "Toggle color"
           )
         )
       )
+    )
 
   def subscriptions(model: Model) = ZStream.empty
 

example/src/RootLayout.scala

@@ -4,6 +4,7 @@ object RootLayout:
   def apply(content: HtmlElement): HtmlElement =
     htmlRootTag(
       lang              := "en",
+      dataAttr("theme") := "business",
       headTag(
         metaTag(charset  := "utf-8"),
         metaTag(nameAttr := "viewport", contentAttr := "width=device-width, initial-scale=1"),

example/tailwind.css

@@ -5,3 +5,6 @@
 @plugin '@tailwindcss/aspect-ratio';
 
 @source './src/**/*.scala';
+@plugin "daisyui" {
+  themes: business;
+}