diff --git a/ui/components/src/ui/components/headless/Items.scala b/ui/components/src/ui/components/headless/Items.scala
index b3c7098..a02e1b7 100644
--- a/ui/components/src/ui/components/headless/Items.scala
+++ b/ui/components/src/ui/components/headless/Items.scala
@@ -3,17 +3,18 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import com.raquo.laminar.nodes.ReactiveHtmlElement
+import org.scalajs.dom
 
 trait ItemContainer[A]:
   def contramap[B](f: B => A): ItemContainer[B]
   def map(f: A => HtmlElement => HtmlElement): ItemContainer[A]
 
 final case class Items[A](
-    frame: Seq[HtmlElement] => HtmlElement,
+    frame: ReactiveHtmlElement[dom.html.UList] => HtmlElement,
     renderItem: A => HtmlElement
 ) extends ItemContainer[A]:
   def apply(items: Seq[A]): HtmlElement = frame(
-    items.map(a => li(renderItem(a)))
+    ul(role("list"), items.map(a => li(renderItem(a))))
   )
   def contramap[B](f: B => A): Items[B] =
     Items(frame, b => renderItem(f(b)))

diff --git a/ui/components/src/ui/components/headless/Items.scala b/ui/components/src/ui/components/headless/Items.scala
index b3c7098..a02e1b7 100644
--- a/ui/components/src/ui/components/headless/Items.scala
+++ b/ui/components/src/ui/components/headless/Items.scala
@@ -3,17 +3,18 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import com.raquo.laminar.nodes.ReactiveHtmlElement
+import org.scalajs.dom
 
 trait ItemContainer[A]:
   def contramap[B](f: B => A): ItemContainer[B]
   def map(f: A => HtmlElement => HtmlElement): ItemContainer[A]
 
 final case class Items[A](
-    frame: Seq[HtmlElement] => HtmlElement,
+    frame: ReactiveHtmlElement[dom.html.UList] => HtmlElement,
     renderItem: A => HtmlElement
 ) extends ItemContainer[A]:
   def apply(items: Seq[A]): HtmlElement = frame(
-    items.map(a => li(renderItem(a)))
+    ul(role("list"), items.map(a => li(renderItem(a))))
   )
   def contramap[B](f: B => A): Items[B] =
     Items(frame, b => renderItem(f(b)))
diff --git a/ui/components/src/ui/components/tailwind/list/StackedList.scala b/ui/components/src/ui/components/tailwind/list/StackedList.scala
index b37a107..b88ec15 100644
--- a/ui/components/src/ui/components/tailwind/list/StackedList.scala
+++ b/ui/components/src/ui/components/tailwind/list/StackedList.scala
@@ -177,11 +177,11 @@
       )
     )
 
-  private def frame: Seq[HtmlElement] => Div =
+  private def frame: ReactiveHtmlElement[dom.html.UList] => Div =
     el =>
       div(
         cls("bg-white shadow overflow-hidden sm:rounded-md"),
-        ul(role("list"), cls("divide-y divide-gray-200"), el)
+        el.amend(cls("divide-y divide-gray-200"))
       )
 
   def apply[A](f: A => Item): Items[A] =

diff --git a/ui/components/src/ui/components/headless/Items.scala b/ui/components/src/ui/components/headless/Items.scala
index b3c7098..a02e1b7 100644
--- a/ui/components/src/ui/components/headless/Items.scala
+++ b/ui/components/src/ui/components/headless/Items.scala
@@ -3,17 +3,18 @@
 
 import com.raquo.laminar.api.L.{*, given}
 import com.raquo.laminar.nodes.ReactiveHtmlElement
+import org.scalajs.dom
 
 trait ItemContainer[A]:
   def contramap[B](f: B => A): ItemContainer[B]
   def map(f: A => HtmlElement => HtmlElement): ItemContainer[A]
 
 final case class Items[A](
-    frame: Seq[HtmlElement] => HtmlElement,
+    frame: ReactiveHtmlElement[dom.html.UList] => HtmlElement,
     renderItem: A => HtmlElement
 ) extends ItemContainer[A]:
   def apply(items: Seq[A]): HtmlElement = frame(
-    items.map(a => li(renderItem(a)))
+    ul(role("list"), items.map(a => li(renderItem(a))))
   )
   def contramap[B](f: B => A): Items[B] =
     Items(frame, b => renderItem(f(b)))
diff --git a/ui/components/src/ui/components/tailwind/list/StackedList.scala b/ui/components/src/ui/components/tailwind/list/StackedList.scala
index b37a107..b88ec15 100644
--- a/ui/components/src/ui/components/tailwind/list/StackedList.scala
+++ b/ui/components/src/ui/components/tailwind/list/StackedList.scala
@@ -177,11 +177,11 @@
       )
     )
 
-  private def frame: Seq[HtmlElement] => Div =
+  private def frame: ReactiveHtmlElement[dom.html.UList] => Div =
     el =>
       div(
         cls("bg-white shadow overflow-hidden sm:rounded-md"),
-        ul(role("list"), cls("divide-y divide-gray-200"), el)
+        el.amend(cls("divide-y divide-gray-200"))
       )
 
   def apply[A](f: A => Item): Items[A] =
diff --git a/ui/components/src/ui/components/tailwind/lists/grid_lists/SimpleCards.scala b/ui/components/src/ui/components/tailwind/lists/grid_lists/SimpleCards.scala
index 0cc2ebe..9c6b8d2 100644
--- a/ui/components/src/ui/components/tailwind/lists/grid_lists/SimpleCards.scala
+++ b/ui/components/src/ui/components/tailwind/lists/grid_lists/SimpleCards.scala
@@ -5,6 +5,8 @@
 import works.iterative.ui.components.tailwind.Color
 import works.iterative.ui.components.tailwind.ColorWeight
 import works.iterative.ui.components.headless.Items
+import com.raquo.laminar.nodes.ReactiveHtmlElement
+import org.scalajs.dom
 
 object SimpleCards:
 
@@ -78,14 +80,8 @@
   def frame(
       gap: String = "gap-5 sm:gap-6",
       cols: String = "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
-  )(items: Seq[HtmlElement]): HtmlElement =
-    ul(
-      role := "list",
-      cls := "mt-3 grid",
-      cls(gap),
-      cls(cols),
-      items
-    )
+  )(el: ReactiveHtmlElement[dom.html.UList]): HtmlElement =
+    el.amend(cls := "mt-3 grid", cls(gap), cls(cols))
 
   def apply[A](f: A => Item): Items[A] =
     Items(frame(), item).contramap(f)