zoolutions · mhenrixon · Jul 1, 2026 · Jul 1, 2026
diff --git a/docs/app/assets/stylesheets/application.tailwind.css b/docs/app/assets/stylesheets/application.tailwind.css
@@ -49,6 +49,16 @@
   background-image: none !important;
 }
 
+/* FAB uses position:fixed — contain it within the preview panel */
+.fab-preview-container {
+  position: relative;
+  min-height: 16rem;
+}
+
+.fab-preview-container .fab {
+  position: absolute;
+}
+
 /* Responsive drawer-open - outside layers for highest specificity */
 @media (width >= 1024px) {
   .lg\:drawer-open {

diff --git a/docs/app/models/component_doc.rb b/docs/app/models/component_doc.rb
@@ -9,42 +9,79 @@
 # Only components that have at least one example class are linked in the sidebar
 # and the landing page, so there are never dead links while the reference is
 # being authored.
+#
+# Category order matches official DaisyUI docs:
+# Actions → Data display → Navigation → Feedback → Data input → Layout → Mockup
 class ComponentDoc
+  CATEGORIES = [
+    "Actions",
+    "Data display",
+    "Navigation",
+    "Feedback",
+    "Data input",
+    "Layout",
+    "Mockup",
+  ].freeze
+
   REGISTRY = [
-    # Actions
+    # ── Actions ──────────────────────────────────────────────────────────
     { slug: "button", title: "Button", category: "Actions" },
     { slug: "dropdown", title: "Dropdown", category: "Actions" },
-    { slug: "fab", title: "FAB", category: "Actions" },
-    { slug: "filter", title: "Filter", category: "Actions" },
+    { slug: "fab", title: "FAB / Speed Dial", category: "Actions" },
     { slug: "modal", title: "Modal", category: "Actions" },
     { slug: "swap", title: "Swap", category: "Actions" },
     { slug: "theme-controller", title: "Theme Controller", category: "Actions" },
 
-    # Data display
+    # ── Data display ─────────────────────────────────────────────────────
     { slug: "accordion", title: "Accordion", category: "Data display" },
-    { slug: "aura", title: "Aura", category: "Data display" },
     { slug: "avatar", title: "Avatar", category: "Data display" },
+    { slug: "avatar-group", title: "Avatar Group", category: "Data display" },
+    { slug: "aura", title: "Aura", category: "Data display" },
     { slug: "badge", title: "Badge", category: "Data display" },
     { slug: "card", title: "Card", category: "Data display" },
     { slug: "carousel", title: "Carousel", category: "Data display" },
-    { slug: "chat", title: "Chat", category: "Data display" },
+    { slug: "chat", title: "Chat bubble", category: "Data display" },
     { slug: "collapse", title: "Collapse", category: "Data display" },
     { slug: "countdown", title: "Countdown", category: "Data display" },
     { slug: "diff", title: "Diff", category: "Data display" },
+    { slug: "hover-3d", title: "Hover 3D card", category: "Data display" },
     { slug: "hover-gallery", title: "Hover Gallery", category: "Data display" },
     { slug: "kbd", title: "Kbd", category: "Data display" },
     { slug: "list", title: "List", category: "Data display" },
     { slug: "stat", title: "Stat", category: "Data display" },
+    { slug: "status", title: "Status", category: "Data display" },
     { slug: "table", title: "Table", category: "Data display" },
+    { slug: "text-rotate", title: "Text Rotate", category: "Data display" },
     { slug: "timeline", title: "Timeline", category: "Data display" },
 
-    # Data input
+    # ── Navigation ───────────────────────────────────────────────────────
+    { slug: "breadcrumbs", title: "Breadcrumbs", category: "Navigation" },
+    { slug: "dock", title: "Dock", category: "Navigation" },
+    { slug: "link", title: "Link", category: "Navigation" },
+    { slug: "megamenu", title: "Megamenu", category: "Navigation" },
+    { slug: "menu", title: "Menu", category: "Navigation" },
+    { slug: "navbar", title: "Navbar", category: "Navigation" },
+    { slug: "pagination", title: "Pagination", category: "Navigation" },
+    { slug: "steps", title: "Steps", category: "Navigation" },
+    { slug: "tabs", title: "Tabs", category: "Navigation" },
+
+    # ── Feedback ─────────────────────────────────────────────────────────
+    { slug: "alert", title: "Alert", category: "Feedback" },
+    { slug: "loading", title: "Loading", category: "Feedback" },
+    { slug: "progress", title: "Progress", category: "Feedback" },
+    { slug: "radial-progress", title: "Radial Progress", category: "Feedback" },
+    { slug: "skeleton", title: "Skeleton", category: "Feedback" },
+    { slug: "toast", title: "Toast", category: "Feedback" },
+    { slug: "tooltip", title: "Tooltip", category: "Feedback" },
+
+    # ── Data input ───────────────────────────────────────────────────────
     { slug: "calendar", title: "Calendar", category: "Data input" },
     { slug: "checkbox", title: "Checkbox", category: "Data input" },
     { slug: "fieldset", title: "Fieldset", category: "Data input" },
     { slug: "file-input", title: "File Input", category: "Data input" },
+    { slug: "filter", title: "Filter", category: "Data input" },
     { slug: "form-control", title: "Form Control", category: "Data input" },
-    { slug: "input", title: "Input", category: "Data input" },
+    { slug: "input", title: "Text Input", category: "Data input" },
     { slug: "label", title: "Label", category: "Data input" },
     { slug: "otp", title: "OTP", category: "Data input" },
     { slug: "radio", title: "Radio", category: "Data input" },
@@ -55,47 +92,21 @@ class ComponentDoc
     { slug: "toggle", title: "Toggle", category: "Data input" },
     { slug: "validator", title: "Validator", category: "Data input" },
 
-    # Feedback
-    { slug: "alert", title: "Alert", category: "Feedback" },
-    { slug: "loading", title: "Loading", category: "Feedback" },
-    { slug: "progress", title: "Progress", category: "Feedback" },
-    { slug: "radial-progress", title: "Radial Progress", category: "Feedback" },
-    { slug: "skeleton", title: "Skeleton", category: "Feedback" },
-    { slug: "status", title: "Status", category: "Feedback" },
-    { slug: "toast", title: "Toast", category: "Feedback" },
-    { slug: "tooltip", title: "Tooltip", category: "Feedback" },
-
-    # Layout
+    # ── Layout ───────────────────────────────────────────────────────────
     { slug: "divider", title: "Divider", category: "Layout" },
-    { slug: "drawer", title: "Drawer", category: "Layout" },
+    { slug: "drawer", title: "Drawer sidebar", category: "Layout" },
     { slug: "footer", title: "Footer", category: "Layout" },
     { slug: "hero", title: "Hero", category: "Layout" },
     { slug: "indicator", title: "Indicator", category: "Layout" },
-    { slug: "join", title: "Join", category: "Layout" },
+    { slug: "join", title: "Join (group items)", category: "Layout" },
     { slug: "mask", title: "Mask", category: "Layout" },
     { slug: "stack", title: "Stack", category: "Layout" },
 
-    # Mockup
-    { slug: "mockup-browser", title: "Mockup Browser", category: "Mockup" },
-    { slug: "mockup-code", title: "Mockup Code", category: "Mockup" },
-    { slug: "mockup-phone", title: "Mockup Phone", category: "Mockup" },
-    { slug: "mockup-window", title: "Mockup Window", category: "Mockup" },
-
-    # Navigation
-    { slug: "breadcrumbs", title: "Breadcrumbs", category: "Navigation" },
-    { slug: "dock", title: "Dock", category: "Navigation" },
-    { slug: "link", title: "Link", category: "Navigation" },
-    { slug: "megamenu", title: "Megamenu", category: "Navigation" },
-    { slug: "menu", title: "Menu", category: "Navigation" },
-    { slug: "navbar", title: "Navbar", category: "Navigation" },
-    { slug: "pagination", title: "Pagination", category: "Navigation" },
-    { slug: "steps", title: "Steps", category: "Navigation" },
-    { slug: "tabs", title: "Tabs", category: "Navigation" },
-
-    # Special effects
-    { slug: "avatar-group", title: "Avatar Group", category: "Data display" },
-    { slug: "hover-3d", title: "Hover 3D", category: "Data display" },
-    { slug: "text-rotate", title: "Text Rotate", category: "Data display" },
+    # ── Mockup ───────────────────────────────────────────────────────────
+    { slug: "mockup-browser", title: "Browser", category: "Mockup" },
+    { slug: "mockup-code", title: "Code", category: "Mockup" },
+    { slug: "mockup-phone", title: "Phone", category: "Mockup" },
+    { slug: "mockup-window", title: "Window", category: "Mockup" },
   ].freeze
 
   attr_reader :slug, :title, :category
@@ -115,7 +126,10 @@ def self.from_slug(slug)
   end
 
   def self.grouped
-    all.group_by(&:category)
+    result = all.group_by(&:category)
+    CATEGORIES.each_with_object({}) do |cat, hash|
+      hash[cat] = result[cat] if result[cat]
+    end
   end
 
   # The example namespace module for this component (e.g.

diff --git a/docs/app/models/docs_nav.rb b/docs/app/models/docs_nav.rb
@@ -33,9 +33,13 @@ def doc_group
   end
 
   # Only components with at least one authored example are linkable.
+  # Uses ComponentDoc.grouped to preserve official DaisyUI category ordering.
   def component_group
-    ComponentDoc.all.select(&:example_class).group_by(&:category).transform_values do |items|
-      items.map { |c| DocsKit::NavItem.new(href: "/components/#{c.slug}", label: c.title) }
-    end
+    ComponentDoc.grouped.transform_values do |items|
+      linkable = items.select(&:example_class)
+      next nil if linkable.empty?
+
+      linkable.map { |c| DocsKit::NavItem.new(href: "/components/#{c.slug}", label: c.title) }
+    end.compact
   end
 end
diff --git a/docs/app/views/components/examples/accordion/arrow.rb b/docs/app/views/components/examples/accordion/arrow.rb
@@ -13,15 +13,15 @@ class Arrow < Views::Components::Example
           def example
             Accordion(:arrow, name: "accordion-arrow", checked: true, class: "bg-base-100 border border-base-300") do |a|
               a.title(class: "font-semibold") { "How do I create an account?" }
-              p(class: "text-sm") { %(Click the "Sign Up" button in the top right corner and follow the registration process.) }
+              span(class: "text-sm") { %(Click the "Sign Up" button in the top right corner and follow the registration process.) }
             end
             Accordion(:arrow, name: "accordion-arrow", class: "bg-base-100 border border-base-300") do |a|
               a.title(class: "font-semibold") { "I forgot my password. What should I do?" }
-              p(class: "text-sm") { %(Click on "Forgot Password" on the login page and follow the instructions sent to your email.) }
+              span(class: "text-sm") { %(Click on "Forgot Password" on the login page and follow the instructions sent to your email.) }
             end
             Accordion(:arrow, name: "accordion-arrow", class: "bg-base-100 border border-base-300") do |a|
               a.title(class: "font-semibold") { "How do I update my profile information?" }
-              p(class: "text-sm") { %(Go to "My Account" settings and select "Edit Profile" to make changes.) }
+              span(class: "text-sm") { %(Go to "My Account" settings and select "Edit Profile" to make changes.) }
             end
           end
         end

diff --git a/docs/app/views/components/examples/accordion/plus.rb b/docs/app/views/components/examples/accordion/plus.rb
@@ -13,15 +13,15 @@ class Plus < Views::Components::Example
           def example
             Accordion(:plus, name: "accordion-plus", checked: true, class: "bg-base-100 border border-base-300") do |a|
               a.title(class: "font-semibold") { "How do I create an account?" }
-              p(class: "text-sm") { %(Click the "Sign Up" button in the top right corner and follow the registration process.) }
+              span(class: "text-sm") { %(Click the "Sign Up" button in the top right corner and follow the registration process.) }
             end
             Accordion(:plus, name: "accordion-plus", class: "bg-base-100 border border-base-300") do |a|
               a.title(class: "font-semibold") { "I forgot my password. What should I do?" }
-              p(class: "text-sm") { %(Click on "Forgot Password" on the login page and follow the instructions sent to your email.) }
+              span(class: "text-sm") { %(Click on "Forgot Password" on the login page and follow the instructions sent to your email.) }
             end
             Accordion(:plus, name: "accordion-plus", class: "bg-base-100 border border-base-300") do |a|
               a.title(class: "font-semibold") { "How do I update my profile information?" }
-              p(class: "text-sm") { %(Go to "My Account" settings and select "Edit Profile" to make changes.) }
+              span(class: "text-sm") { %(Go to "My Account" settings and select "Edit Profile" to make changes.) }
             end
           end
         end

diff --git a/docs/app/views/components/examples/accordion/radio.rb b/docs/app/views/components/examples/accordion/radio.rb
@@ -13,15 +13,15 @@ class Radio < Views::Components::Example
           def example
             Accordion(name: "accordion-radio", checked: true, class: "bg-base-100 border border-base-300") do |a|
               a.title(class: "font-semibold") { "How do I create an account?" }
-              p(class: "text-sm") { %(Click the "Sign Up" button in the top right corner and follow the registration process.) }
+              span(class: "text-sm") { %(Click the "Sign Up" button in the top right corner and follow the registration process.) }
             end
             Accordion(name: "accordion-radio", class: "bg-base-100 border border-base-300") do |a|
               a.title(class: "font-semibold") { "I forgot my password. What should I do?" }
-              p(class: "text-sm") { %(Click on "Forgot Password" on the login page and follow the instructions sent to your email.) }
+              span(class: "text-sm") { %(Click on "Forgot Password" on the login page and follow the instructions sent to your email.) }
             end
             Accordion(name: "accordion-radio", class: "bg-base-100 border border-base-300") do |a|
               a.title(class: "font-semibold") { "How do I update my profile information?" }
-              p(class: "text-sm") { %(Go to "My Account" settings and select "Edit Profile" to make changes.) }
+              span(class: "text-sm") { %(Go to "My Account" settings and select "Edit Profile" to make changes.) }
             end
           end
         end

diff --git a/docs/app/views/components/examples/fab/basic.rb b/docs/app/views/components/examples/fab/basic.rb
@@ -11,8 +11,10 @@ class Basic < Views::Components::Example
           order 1
 
           def example
-            Fab do
-              Button(:lg, :circle, :primary) { "F" }
+            div(class: "fab-preview-container w-full") do
+              Fab do
+                Button(:lg, :circle, :primary) { "F" }
+              end
             end
           end
         end

diff --git a/docs/app/views/components/examples/fab/close.rb b/docs/app/views/components/examples/fab/close.rb
@@ -11,23 +11,25 @@ class Close < Views::Components::Example
           order 4
 
           def example
-            Fab do |f|
-              div(tabindex: 0, role: :button, class: "btn btn-lg btn-circle btn-info") { "F" }
-              f.close do
-                plain "Close "
-                span(class: "btn btn-circle btn-lg btn-error") { "✕" }
-              end
-              div do
-                plain "Label A "
-                Button(:lg, :circle) { "A" }
-              end
-              div do
-                plain "Label B "
-                Button(:lg, :circle) { "B" }
-              end
-              div do
-                plain "Label C "
-                Button(:lg, :circle) { "C" }
+            div(class: "fab-preview-container w-full") do
+              Fab do |f|
+                div(tabindex: 0, role: :button, class: "btn btn-lg btn-circle btn-info") { "F" }
+                f.close do
+                  plain "Close "
+                  span(class: "btn btn-circle btn-lg btn-error") { "✕" }
+                end
+                div do
+                  plain "Label A "
+                  Button(:lg, :circle) { "A" }
+                end
+                div do
+                  plain "Label B "
+                  Button(:lg, :circle) { "B" }
+                end
+                div do
+                  plain "Label C "
+                  Button(:lg, :circle) { "C" }
+                end
               end
             end
           end

diff --git a/docs/app/views/components/examples/fab/flower.rb b/docs/app/views/components/examples/fab/flower.rb
@@ -11,13 +11,15 @@ class Flower < Views::Components::Example
           order 5
 
           def example
-            Fab(:flower) do
-              div(tabindex: 0, role: :button, class: "btn btn-lg btn-circle btn-success") { "F" }
-              Button(:circle, :lg, class: "fab-main-action") { "M" }
-              Button(:lg, :circle) { "A" }
-              Button(:lg, :circle) { "B" }
-              Button(:lg, :circle) { "C" }
-              Button(:lg, :circle) { "D" }
+            div(class: "fab-preview-container w-full") do
+              Fab(:flower) do
+                div(tabindex: 0, role: :button, class: "btn btn-lg btn-circle btn-success") { "F" }
+                Button(:circle, :lg, class: "fab-main-action") { "M" }
+                Button(:lg, :circle) { "A" }
+                Button(:lg, :circle) { "B" }
+                Button(:lg, :circle) { "C" }
+                Button(:lg, :circle) { "D" }
+              end
             end
           end
         end

diff --git a/docs/app/views/components/examples/fab/main_action.rb b/docs/app/views/components/examples/fab/main_action.rb
@@ -11,23 +11,25 @@ class MainAction < Views::Components::Example
           order 3
 
           def example
-            Fab do |f|
-              div(tabindex: 0, role: :button, class: "btn btn-lg btn-circle btn-primary") { "F" }
-              f.main_action do
-                plain "Main Action "
-                Button(:lg, :circle, :secondary) { "M" }
-              end
-              div do
-                plain "Label A "
-                Button(:lg, :circle) { "A" }
-              end
-              div do
-                plain "Label B "
-                Button(:lg, :circle) { "B" }
-              end
-              div do
-                plain "Label C "
-                Button(:lg, :circle) { "C" }
+            div(class: "fab-preview-container w-full") do
+              Fab do |f|
+                div(tabindex: 0, role: :button, class: "btn btn-lg btn-circle btn-primary") { "F" }
+                f.main_action do
+                  plain "Main Action "
+                  Button(:lg, :circle, :secondary) { "M" }
+                end
+                div do
+                  plain "Label A "
+                  Button(:lg, :circle) { "A" }
+                end
+                div do
+                  plain "Label B "
+                  Button(:lg, :circle) { "B" }
+                end
+                div do
+                  plain "Label C "
+                  Button(:lg, :circle) { "C" }
+                end
               end
             end
           end