m9sh 0.2.1 → 0.2.2

data/app/helpers/docs_helper.rb

@@ -0,0 +1,3807 @@
+# frozen_string_literal: true
+
+module DocsHelper
+  def accordion_usage_code
+    <<~'CODE'
+      <%= render M9sh::AccordionComponent.new(type: "single", collapsible: true) do |c| %>
+        <% c.with_item(value: "item-1") do |item| %>
+          <% item.with_trigger do %>
+            Is it accessible?
+          <% end %>
+          <% item.with_body do %>
+            Yes. It adheres to the WAI-ARIA design pattern.
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def accordion_example_code
+    <<~'CODE'
+      <%= render M9sh::AccordionComponent.new(type: "single", collapsible: true) do |accordion| %>
+        <% accordion.with_item(value: "item-1") do |item| %>
+          <% item.with_trigger do %>
+            Is it accessible?
+          <% end %>
+          <% item.with_body do %>
+            Yes. It adheres to the WAI-ARIA design pattern.
+          <% end %>
+        <% end %>
+
+        <% accordion.with_item(value: "item-2") do |item| %>
+          <% item.with_trigger do %>
+            Is it styled?
+          <% end %>
+          <% item.with_body do %>
+            Yes. It comes with default styles that matches the other components' aesthetic.
+          <% end %>
+        <% end %>
+
+        <% accordion.with_item(value: "item-3") do |item| %>
+          <% item.with_trigger do %>
+            Is it animated?
+          <% end %>
+          <% item.with_body do %>
+            Yes. It's animated by default with smooth height transitions.
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def accordion_multiple_code
+    <<~'CODE'
+      <%= render M9sh::AccordionComponent.new(type: "multiple") do |accordion| %>
+        <% accordion.with_item(value: "item-1") do |item| %>
+          <% item.with_trigger do %>
+            First Question
+          <% end %>
+          <% item.with_body do %>
+            This accordion allows multiple items to be open at the same time.
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def accordion_default_value_code
+    <<~'CODE'
+      <%= render M9sh::AccordionComponent.new(type: "single", default_value: "item-2") do |accordion| %>
+        <!-- Items here -->
+      <% end %>
+    CODE
+  end
+
+  def accordion_caption_code
+    <<~'CODE'
+      <%= render M9sh::AccordionComponent.new(type: "single", collapsible: true) do |accordion| %>
+        <%= render M9sh::AccordionComponent::CaptionComponent.new do %>
+          A list of your recent invoices.
+        <% end %>
+        <!-- Accordion content -->
+      <% end %>
+    CODE
+  end
+
+  # Button component helpers
+  def button_usage_code
+    <<~'CODE'
+      <%= render M9sh::ButtonComponent.new do %>
+        Button
+      <% end %>
+    CODE
+  end
+
+  def button_default_code
+    <<~'CODE'
+      <%= render M9sh::ButtonComponent.new do %>
+        Button
+      <% end %>
+    CODE
+  end
+
+  def button_variants_code
+    <<~'CODE'
+      <%= render M9sh::ButtonComponent.new(variant: :default) do %>
+        Default
+      <% end %>
+
+      <%= render M9sh::ButtonComponent.new(variant: :secondary) do %>
+        Secondary
+      <% end %>
+
+      <%= render M9sh::ButtonComponent.new(variant: :destructive) do %>
+        Destructive
+      <% end %>
+
+      <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+        Outline
+      <% end %>
+
+      <%= render M9sh::ButtonComponent.new(variant: :ghost) do %>
+        Ghost
+      <% end %>
+
+      <%= render M9sh::ButtonComponent.new(variant: :link) do %>
+        Link
+      <% end %>
+    CODE
+  end
+
+  def button_sizes_code
+    <<~'CODE'
+      <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+        Small
+      <% end %>
+
+      <%= render M9sh::ButtonComponent.new(size: :md) do %>
+        Medium
+      <% end %>
+
+      <%= render M9sh::ButtonComponent.new(size: :lg) do %>
+        Large
+      <% end %>
+    CODE
+  end
+
+  def button_disabled_code
+    <<~'CODE'
+      <%= render M9sh::ButtonComponent.new(disabled: true) do %>
+        Disabled Button
+      <% end %>
+    CODE
+  end
+
+  def button_icon_code
+    <<~'CODE'
+      <%= render M9sh::ButtonComponent.new(variant: :outline, size: :icon) do %>
+        <!-- SVG icon -->
+      <% end %>
+    CODE
+  end
+
+  # Breadcrumb component helpers
+  def breadcrumb_usage_code
+    <<~'CODE'
+      <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Home", root_path %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item(current: true) do |item| %>
+          <% item.with_page do %>
+            Current Page
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def breadcrumb_default_code
+    <<~'CODE'
+      <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Home", "#" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Components", "#" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item(current: true) do |item| %>
+          <% item.with_page do %>
+            Breadcrumb
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def breadcrumb_with_icons_code
+    <<~'CODE'
+      <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "#", class: "flex items-center gap-1" do %>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                <polyline points="9 22 9 12 15 12 15 22"/>
+              </svg>
+              Home
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Documents", "#" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item(current: true) do |item| %>
+          <% item.with_page do %>
+            README.md
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def breadcrumb_custom_separator_code
+    <<~'CODE'
+      <%= render M9sh::BreadcrumbComponent.new(class_name: "custom-breadcrumb") do |breadcrumb| %>
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Home", "#" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Library", "#" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item(current: true) do |item| %>
+          <% item.with_page do %>
+            Data
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def breadcrumb_dropdown_code
+    <<~'CODE'
+      <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Home", "#" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item do |item| %>
+          <button type="button" class="flex items-center gap-1 hover:text-foreground transition-colors">
+            <span>...</span>
+            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </button>
+        <% end %>
+
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Components", "#" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item(current: true) do |item| %>
+          <% item.with_page do %>
+            Breadcrumb
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Table component helpers
+  def table_usage_code
+    <<~'CODE'
+      <%= render M9sh::TableComponent.new do %>
+        <%= render M9sh::TableComponent::HeaderComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Name
+            <% end %>
+          <% end %>
+        <% end %>
+        <%= render M9sh::TableComponent::BodyComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              John Doe
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def table_default_code
+    <<~'CODE'
+      <%= render M9sh::TableComponent.new do %>
+        <%= render M9sh::TableComponent::HeaderComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Name
+            <% end %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Email
+            <% end %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Role
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::TableComponent::BodyComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              John Doe
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              john@example.com
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Admin
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def table_caption_code
+    <<~'CODE'
+      <%= render M9sh::TableComponent.new do %>
+        <%= render M9sh::TableComponent::CaptionComponent.new do %>
+          A list of your recent invoices.
+        <% end %>
+        <!-- Table content -->
+      <% end %>
+    CODE
+  end
+
+  def table_footer_code
+    <<~'CODE'
+      <%= render M9sh::TableComponent.new do %>
+        <!-- Header and Body -->
+        <%= render M9sh::TableComponent::FooterComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Total
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Alert component helpers
+  def alert_usage_code
+    <<~'CODE'
+      <%= render M9sh::AlertComponent.new do |alert| %>
+        <% alert.with_title do %>
+          Alert Title
+        <% end %>
+        <% alert.with_description do %>
+          This is an alert description.
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def alert_default_code
+    <<~'CODE'
+      <%= render M9sh::AlertComponent.new do |alert| %>
+        <% alert.with_title do %>
+          Heads up!
+        <% end %>
+        <% alert.with_description do %>
+          You can add components to your app using the CLI.
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def alert_destructive_code
+    <<~'CODE'
+      <%= render M9sh::AlertComponent.new(variant: :destructive) do |alert| %>
+        <% alert.with_title do %>
+          Error
+        <% end %>
+        <% alert.with_description do %>
+          Your session has expired. Please log in again.
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def alert_with_icon_code
+    <<~'CODE'
+      <%= render M9sh::AlertComponent.new do |alert| %>
+        <% alert.with_icon do %>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="12" y1="16" x2="12" y2="12"/>
+            <line x1="12" y1="8" x2="12.01" y2="8"/>
+          </svg>
+        <% end %>
+        <% alert.with_title do %>
+          Important Notice
+        <% end %>
+        <% alert.with_description do %>
+          This is an alert with an icon for better visual communication.
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Badge component helpers
+  def badge_usage_code
+    <<~'CODE'
+      <%= render M9sh::BadgeComponent.new do %>
+        Badge
+      <% end %>
+    CODE
+  end
+
+  def badge_variants_code
+    <<~'CODE'
+      <%= render M9sh::BadgeComponent.new(variant: :default) do %>
+        Default
+      <% end %>
+
+      <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+        Secondary
+      <% end %>
+
+      <%= render M9sh::BadgeComponent.new(variant: :destructive) do %>
+        Destructive
+      <% end %>
+
+      <%= render M9sh::BadgeComponent.new(variant: :outline) do %>
+        Outline
+      <% end %>
+
+      <%= render M9sh::BadgeComponent.new(variant: :success) do %>
+        Success
+      <% end %>
+
+      <%= render M9sh::BadgeComponent.new(variant: :warning) do %>
+        Warning
+      <% end %>
+    CODE
+  end
+
+  def badge_secondary_code
+    <<~'CODE'
+      <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+        Secondary
+      <% end %>
+    CODE
+  end
+
+  def badge_destructive_code
+    <<~'CODE'
+      <%= render M9sh::BadgeComponent.new(variant: :destructive) do %>
+        Destructive
+      <% end %>
+    CODE
+  end
+
+  def badge_outline_code
+    <<~'CODE'
+      <%= render M9sh::BadgeComponent.new(variant: :outline) do %>
+        Outline
+      <% end %>
+    CODE
+  end
+
+  def badge_success_code
+    <<~'CODE'
+      <%= render M9sh::BadgeComponent.new(variant: :success) do %>
+        Success
+      <% end %>
+    CODE
+  end
+
+  def badge_warning_code
+    <<~'CODE'
+      <%= render M9sh::BadgeComponent.new(variant: :warning) do %>
+        Warning
+      <% end %>
+    CODE
+  end
+
+  # Separator component helpers
+  def separator_usage_code
+    <<~'CODE'
+      <%= render M9sh::SeparatorComponent.new %>
+    CODE
+  end
+
+  def separator_vertical_code
+    <<~'CODE'
+      <%= render M9sh::SeparatorComponent.new(orientation: :vertical) %>
+    CODE
+  end
+
+  def separator_horizontal_code
+    <<~'CODE'
+      <div>
+        <div class="space-y-1">
+          <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
+          <p class="text-sm text-muted-foreground">
+            An open-source UI component library.
+          </p>
+        </div>
+        <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+        <div class="flex h-5 items-center space-x-4 text-sm">
+          <div>Blog</div>
+          <%= render M9sh::SeparatorComponent.new(orientation: :vertical) %>
+          <div>Docs</div>
+          <%= render M9sh::SeparatorComponent.new(orientation: :vertical) %>
+          <div>Source</div>
+        </div>
+      </div>
+    CODE
+  end
+
+  def separator_text_sections_code
+    <<~'CODE'
+      <div>
+        <div class="space-y-1">
+          <h4 class="text-sm font-medium leading-none">Introduction</h4>
+          <p class="text-sm text-muted-foreground">
+            An introduction to the product and its features.
+          </p>
+        </div>
+        <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+        <div class="space-y-1">
+          <h4 class="text-sm font-medium leading-none">Getting Started</h4>
+          <p class="text-sm text-muted-foreground">
+            Learn how to install and configure the components.
+          </p>
+        </div>
+      </div>
+    CODE
+  end
+
+  def separator_breadcrumb_code
+    <<~'CODE'
+      <div class="flex items-center text-sm text-muted-foreground">
+        <a href="#" class="hover:text-foreground transition-colors">Home</a>
+        <%= render M9sh::SeparatorComponent.new(orientation: :vertical, class: "mx-2 h-4") %>
+        <a href="#" class="hover:text-foreground transition-colors">Components</a>
+        <%= render M9sh::SeparatorComponent.new(orientation: :vertical, class: "mx-2 h-4") %>
+        <span class="text-foreground font-medium">Separator</span>
+      </div>
+    CODE
+  end
+
+  def separator_in_card_code
+    <<~'CODE'
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title { "Account Settings" } %>
+          <% header.with_description { "Manage your account preferences and settings." } %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <label class="text-sm font-medium leading-none">Email</label>
+              <p class="text-sm text-muted-foreground">m@example.com</p>
+            </div>
+            <%= render M9sh::SeparatorComponent.new %>
+            <div class="space-y-2">
+              <label class="text-sm font-medium leading-none">Plan</label>
+              <p class="text-sm text-muted-foreground">Pro</p>
+            </div>
+          </div>
+        <% end %>
+        <% card.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline, class: "w-full") { "Manage Account" } %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Avatar component helpers
+  def avatar_usage_code
+    <<~'CODE'
+      <%= render M9sh::AvatarComponent.new(
+        src: "https://github.com/shadcn.png",
+        alt: "User Avatar"
+      ) %>
+    CODE
+  end
+
+  def avatar_with_fallback_code
+    <<~'CODE'
+      <%= render M9sh::AvatarComponent.new(
+        fallback: "JD"
+      ) %>
+    CODE
+  end
+
+  def avatar_sizes_code
+    <<~'CODE'
+      <%= render M9sh::AvatarComponent.new(
+        src: "https://github.com/shadcn.png",
+        alt: "User Avatar",
+        size: :sm
+      ) %>
+
+      <%= render M9sh::AvatarComponent.new(
+        src: "https://github.com/shadcn.png",
+        alt: "User Avatar",
+        size: :md
+      ) %>
+
+      <%= render M9sh::AvatarComponent.new(
+        src: "https://github.com/shadcn.png",
+        alt: "User Avatar",
+        size: :lg
+      ) %>
+
+      <%= render M9sh::AvatarComponent.new(
+        src: "https://github.com/shadcn.png",
+        alt: "User Avatar",
+        size: :xl
+      ) %>
+    CODE
+  end
+
+  def avatar_with_fallback_example_code
+    <<~'CODE'
+      <%= render M9sh::AvatarComponent.new(
+        src: "https://github.com/shadcn.png",
+        alt: "User Avatar",
+        fallback: "CN"
+      ) %>
+
+      <%= render M9sh::AvatarComponent.new(
+        src: "https://invalid-image-url.png",
+        alt: "Invalid Avatar",
+        fallback: "AB"
+      ) %>
+    CODE
+  end
+
+  def avatar_fallback_sizes_code
+    <<~'CODE'
+      <%= render M9sh::AvatarComponent.new(
+        fallback: "SM",
+        size: :sm
+      ) %>
+
+      <%= render M9sh::AvatarComponent.new(
+        fallback: "MD",
+        size: :md
+      ) %>
+
+      <%= render M9sh::AvatarComponent.new(
+        fallback: "LG",
+        size: :lg
+      ) %>
+
+      <%= render M9sh::AvatarComponent.new(
+        fallback: "XL",
+        size: :xl
+      ) %>
+    CODE
+  end
+
+  def avatar_stack_code
+    <<~'CODE'
+      <div class="flex -space-x-2">
+        <%= render M9sh::AvatarComponent.new(
+          src: "https://github.com/shadcn.png",
+          alt: "Avatar 1",
+          class: "border-2 border-background"
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "JD",
+          class: "border-2 border-background"
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "AB",
+          class: "border-2 border-background"
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "CD",
+          class: "border-2 border-background"
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "+3",
+          class: "border-2 border-background"
+        ) %>
+      </div>
+    CODE
+  end
+
+  # Label component helpers
+  def label_usage_code
+    <<~'CODE'
+      <%= render M9sh::LabelComponent.new(for_id: "email") do %>
+        Email
+      <% end %>
+    CODE
+  end
+
+  def label_with_input_code
+    <<~'CODE'
+      <div class="space-y-2">
+        <%= render M9sh::LabelComponent.new(for_id: "email") do %>
+          Email
+        <% end %>
+        <input
+          id="email"
+          type="email"
+          placeholder="Enter your email"
+          class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+        />
+      </div>
+    CODE
+  end
+
+  def label_with_required_code
+    <<~'CODE'
+      <div class="space-y-2">
+        <%= render M9sh::LabelComponent.new(for_id: "username") do %>
+          Username <span class="text-destructive">*</span>
+        <% end %>
+        <input
+          id="username"
+          type="text"
+          placeholder="Enter your username"
+          required
+          class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+        />
+      </div>
+    CODE
+  end
+
+  def label_with_disabled_code
+    <<~'CODE'
+      <div class="space-y-2 group" data-disabled="true">
+        <%= render M9sh::LabelComponent.new(for_id: "disabled-input") do %>
+          Disabled Field
+        <% end %>
+        <input
+          id="disabled-input"
+          type="text"
+          placeholder="This field is disabled"
+          disabled
+          class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+        />
+      </div>
+    CODE
+  end
+
+  # Skeleton component helpers
+  def skeleton_usage_code
+    <<~'CODE'
+      <%= render M9sh::SkeletonComponent.new(class: "w-full h-12") %>
+    CODE
+  end
+
+  def skeleton_default_code
+    <<~'CODE'
+      <div class="space-y-2">
+        <%= render M9sh::SkeletonComponent.new(class: "w-full h-12") %>
+        <%= render M9sh::SkeletonComponent.new(class: "w-full h-12") %>
+        <%= render M9sh::SkeletonComponent.new(class: "w-full h-12") %>
+      </div>
+    CODE
+  end
+
+  def skeleton_variants_code
+    <<~'CODE'
+      <%= render M9sh::SkeletonComponent.new(variant: :default, class: "w-full h-12") %>
+
+      <%= render M9sh::SkeletonComponent.new(variant: :pulse, class: "w-full h-12") %>
+
+      <%= render M9sh::SkeletonComponent.new(variant: :shimmer, class: "w-full h-12") %>
+
+      <%= render M9sh::SkeletonComponent.new(variant: :none, class: "w-full h-12") %>
+    CODE
+  end
+
+  def skeleton_rounded_code
+    <<~'CODE'
+      <%= render M9sh::SkeletonComponent.new(rounded: :none, class: "w-full h-12") %>
+
+      <%= render M9sh::SkeletonComponent.new(rounded: :sm, class: "w-full h-12") %>
+
+      <%= render M9sh::SkeletonComponent.new(rounded: :md, class: "w-full h-12") %>
+
+      <%= render M9sh::SkeletonComponent.new(rounded: :lg, class: "w-full h-12") %>
+
+      <%= render M9sh::SkeletonComponent.new(rounded: :xl, class: "w-full h-12") %>
+
+      <%= render M9sh::SkeletonComponent.new(rounded: :full, class: "w-24 h-24") %>
+    CODE
+  end
+
+  def skeleton_card_code
+    <<~'CODE'
+      <div class="border rounded-lg p-6 space-y-4">
+        <div class="flex items-center space-x-4">
+          <%= render M9sh::SkeletonComponent.new(rounded: :full, class: "w-12 h-12") %>
+          <div class="flex-1 space-y-2">
+            <%= render M9sh::SkeletonComponent.new(class: "w-3/4 h-4") %>
+            <%= render M9sh::SkeletonComponent.new(class: "w-1/2 h-4") %>
+          </div>
+        </div>
+        <%= render M9sh::SkeletonComponent.new(class: "w-full h-32") %>
+        <div class="space-y-2">
+          <%= render M9sh::SkeletonComponent.new(class: "w-full h-4") %>
+          <%= render M9sh::SkeletonComponent.new(class: "w-5/6 h-4") %>
+        </div>
+      </div>
+    CODE
+  end
+
+  def skeleton_list_code
+    <<~'CODE'
+      <div class="space-y-4">
+        <% 3.times do %>
+          <div class="flex items-center space-x-4">
+            <%= render M9sh::SkeletonComponent.new(rounded: :full, class: "w-10 h-10") %>
+            <div class="flex-1 space-y-2">
+              <%= render M9sh::SkeletonComponent.new(class: "w-3/4 h-4") %>
+              <%= render M9sh::SkeletonComponent.new(class: "w-1/2 h-3") %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    CODE
+  end
+
+  def skeleton_table_code
+    <<~'CODE'
+      <div class="border rounded-lg overflow-hidden">
+        <div class="border-b p-4 space-y-2">
+          <%= render M9sh::SkeletonComponent.new(class: "w-1/4 h-6") %>
+        </div>
+        <% 5.times do %>
+          <div class="border-b last:border-b-0 p-4">
+            <div class="grid grid-cols-3 gap-4">
+              <%= render M9sh::SkeletonComponent.new(class: "w-full h-4") %>
+              <%= render M9sh::SkeletonComponent.new(class: "w-full h-4") %>
+              <%= render M9sh::SkeletonComponent.new(class: "w-full h-4") %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    CODE
+  end
+
+  # Textarea component helpers
+  def textarea_usage_code
+    <<~'CODE'
+      <%= render M9sh::TextareaComponent.new(
+        name: "message",
+        placeholder: "Type your message here."
+      ) %>
+    CODE
+  end
+
+  def textarea_with_label_code
+    <<~'CODE'
+      <div class="space-y-2">
+        <%= render M9sh::LabelComponent.new(for_id: "message") do %>
+          Your message
+        <% end %>
+        <%= render M9sh::TextareaComponent.new(
+          id: "message",
+          name: "message",
+          placeholder: "Type your message here."
+        ) %>
+      </div>
+    CODE
+  end
+
+  def textarea_disabled_code
+    <<~'CODE'
+      <%= render M9sh::TextareaComponent.new(
+        name: "disabled-textarea",
+        placeholder: "This textarea is disabled",
+        disabled: true
+      ) %>
+    CODE
+  end
+
+  def textarea_with_placeholder_code
+    <<~'CODE'
+      <%= render M9sh::TextareaComponent.new(
+        name: "bio",
+        placeholder: "Tell us a little bit about yourself"
+      ) %>
+    CODE
+  end
+
+  def textarea_sizes_code
+    <<~'CODE'
+      <!-- Small -->
+      <%= render M9sh::TextareaComponent.new(
+        name: "small",
+        placeholder: "Smaller textarea",
+        rows: 2
+      ) %>
+
+      <!-- Medium (default) -->
+      <%= render M9sh::TextareaComponent.new(
+        name: "medium",
+        placeholder: "Default textarea",
+        rows: 3
+      ) %>
+
+      <!-- Large -->
+      <%= render M9sh::TextareaComponent.new(
+        name: "large",
+        placeholder: "Larger textarea",
+        rows: 6
+      ) %>
+    CODE
+  end
+
+  def textarea_with_value_code
+    <<~'CODE'
+      <%= render M9sh::TextareaComponent.new(
+        name: "content",
+        value: "This textarea has pre-filled content that can be edited.",
+        placeholder: "Enter content"
+      ) %>
+    CODE
+  end
+
+  def textarea_readonly_code
+    <<~'CODE'
+      <%= render M9sh::TextareaComponent.new(
+        name: "readonly-textarea",
+        value: "This textarea is read-only and cannot be edited.",
+        readonly: true
+      ) %>
+    CODE
+  end
+
+  # Switch component helpers
+  def switch_usage_code
+    <<~'CODE'
+      <%= render M9sh::SwitchComponent.new %>
+    CODE
+  end
+
+  def switch_with_label_code
+    <<~'CODE'
+      <div class="flex items-center space-x-2">
+        <%= render M9sh::SwitchComponent.new(name: "notifications") %>
+        <%= render M9sh::LabelComponent.new(for_id: "notifications") do %>
+          Enable notifications
+        <% end %>
+      </div>
+    CODE
+  end
+
+  def switch_disabled_code
+    <<~'CODE'
+      <%= render M9sh::SwitchComponent.new(disabled: true) %>
+    CODE
+  end
+
+  def switch_checked_code
+    <<~'CODE'
+      <%= render M9sh::SwitchComponent.new(checked: true) %>
+    CODE
+  end
+
+  def switch_disabled_states_code
+    <<~'CODE'
+      <!-- Disabled unchecked -->
+      <%= render M9sh::SwitchComponent.new(disabled: true) %>
+
+      <!-- Disabled checked -->
+      <%= render M9sh::SwitchComponent.new(checked: true, disabled: true) %>
+    CODE
+  end
+
+  def switch_form_code
+    <<~'CODE'
+      <div class="space-y-4">
+        <div class="flex items-center justify-between">
+          <div class="space-y-0.5">
+            <div class="font-medium">Marketing emails</div>
+            <div class="text-sm text-muted-foreground">
+              Receive emails about new products and features.
+            </div>
+          </div>
+          <%= render M9sh::SwitchComponent.new(name: "marketing_emails", checked: true) %>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <div class="space-y-0.5">
+            <div class="font-medium">Security emails</div>
+            <div class="text-sm text-muted-foreground">
+              Receive emails about your account security.
+            </div>
+          </div>
+          <%= render M9sh::SwitchComponent.new(name: "security_emails", checked: true, disabled: true) %>
+        </div>
+      </div>
+    CODE
+  end
+
+  # Input component helpers
+  def input_usage_code
+    <<~'CODE'
+      <%= render M9sh::InputComponent.new(
+        type: "text",
+        placeholder: "Enter text..."
+      ) %>
+    CODE
+  end
+
+  def input_types_code
+    <<~'CODE'
+      <%= render M9sh::InputComponent.new(
+        type: "text",
+        placeholder: "Text input"
+      ) %>
+
+      <%= render M9sh::InputComponent.new(
+        type: "email",
+        placeholder: "Email input"
+      ) %>
+
+      <%= render M9sh::InputComponent.new(
+        type: "password",
+        placeholder: "Password input"
+      ) %>
+
+      <%= render M9sh::InputComponent.new(
+        type: "number",
+        placeholder: "Number input"
+      ) %>
+    CODE
+  end
+
+  def input_with_label_code
+    <<~'CODE'
+      <div class="space-y-2">
+        <%= render M9sh::LabelComponent.new(for_id: "email") do %>
+          Email
+        <% end %>
+        <%= render M9sh::InputComponent.new(
+          id: "email",
+          type: "email",
+          placeholder: "Enter your email"
+        ) %>
+      </div>
+    CODE
+  end
+
+  def input_disabled_code
+    <<~'CODE'
+      <%= render M9sh::InputComponent.new(
+        type: "text",
+        placeholder: "Disabled input",
+        disabled: true
+      ) %>
+    CODE
+  end
+
+  def input_placeholder_code
+    <<~'CODE'
+      <%= render M9sh::InputComponent.new(
+        type: "text",
+        placeholder: "This is a placeholder..."
+      ) %>
+    CODE
+  end
+
+  def input_value_code
+    <<~'CODE'
+      <%= render M9sh::InputComponent.new(
+        type: "text",
+        value: "Pre-filled value",
+        placeholder: "Enter text..."
+      ) %>
+    CODE
+  end
+
+  def input_file_code
+    <<~'CODE'
+      <%= render M9sh::InputComponent.new(
+        type: "file"
+      ) %>
+    CODE
+  end
+
+  # Checkbox component helpers
+  def checkbox_usage_code
+    <<~'CODE'
+      <%= render M9sh::CheckboxComponent.new(name: "terms") %>
+    CODE
+  end
+
+  def checkbox_with_label_code
+    <<~'CODE'
+      <div class="flex items-center space-x-2">
+        <%= render M9sh::CheckboxComponent.new(name: "terms", id: "terms") %>
+        <%= render M9sh::LabelComponent.new(for_id: "terms") do %>
+          Accept terms and conditions
+        <% end %>
+      </div>
+    CODE
+  end
+
+  def checkbox_checked_code
+    <<~'CODE'
+      <div class="flex items-center space-x-2">
+        <%= render M9sh::CheckboxComponent.new(name: "checked", id: "checked", checked: true) %>
+        <%= render M9sh::LabelComponent.new(for_id: "checked") do %>
+          This checkbox is checked by default
+        <% end %>
+      </div>
+    CODE
+  end
+
+  def checkbox_disabled_code
+    <<~'CODE'
+      <%= render M9sh::CheckboxComponent.new(name: "disabled", disabled: true) %>
+
+      <%= render M9sh::CheckboxComponent.new(
+        name: "disabled_checked",
+        checked: true,
+        disabled: true
+      ) %>
+    CODE
+  end
+
+  def checkbox_multiple_code
+    <<~'CODE'
+      <div class="space-y-3">
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "preferences[]", value: "email", id: "email_notifications") %>
+          <%= render M9sh::LabelComponent.new(for_id: "email_notifications") do %>
+            Email notifications
+          <% end %>
+        </div>
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "preferences[]", value: "sms", id: "sms_notifications", checked: true) %>
+          <%= render M9sh::LabelComponent.new(for_id: "sms_notifications") do %>
+            SMS notifications
+          <% end %>
+        </div>
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "preferences[]", value: "push", id: "push_notifications") %>
+          <%= render M9sh::LabelComponent.new(for_id: "push_notifications") do %>
+            Push notifications
+          <% end %>
+        </div>
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "preferences[]", value: "newsletter", id: "newsletter", checked: true) %>
+          <%= render M9sh::LabelComponent.new(for_id: "newsletter") do %>
+            Weekly newsletter
+          <% end %>
+        </div>
+      </div>
+    CODE
+  end
+
+  def checkbox_form_code
+    <<~'CODE'
+      <div class="border rounded-lg p-6 max-w-md">
+        <h3 class="text-lg font-semibold mb-4">Account Settings</h3>
+        <div class="space-y-4">
+          <div class="flex items-start space-x-2">
+            <%= render M9sh::CheckboxComponent.new(name: "account[two_factor]", id: "two_factor", checked: true) %>
+            <div class="grid gap-1.5 leading-none">
+              <%= render M9sh::LabelComponent.new(for_id: "two_factor", class: "font-medium") do %>
+                Enable two-factor authentication
+              <% end %>
+              <p class="text-sm text-muted-foreground">
+                Add an extra layer of security to your account.
+              </p>
+            </div>
+          </div>
+          <!-- More checkbox items... -->
+        </div>
+      </div>
+    CODE
+  end
+
+  # Tabs component helpers
+  def tabs_usage_code
+    <<~'CODE'
+      <%= render M9sh::TabsComponent.new(default_value: "tab1") do |tabs| %>
+        <% tabs.with_tabs_list do |list| %>
+          <%= render list.tabs_trigger(value: "tab1") { "Account" } %>
+          <%= render list.tabs_trigger(value: "tab2") { "Password" } %>
+        <% end %>
+
+        <% tabs.with_tabs_content(value: "tab1") do %>
+          <p>Make changes to your account here.</p>
+        <% end %>
+
+        <% tabs.with_tabs_content(value: "tab2") do %>
+          <p>Change your password here.</p>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def tabs_default_code
+    <<~'CODE'
+      <%= render M9sh::TabsComponent.new(default_value: "account") do |tabs| %>
+        <% tabs.with_tabs_list do |list| %>
+          <%= render list.tabs_trigger(value: "account") { "Account" } %>
+          <%= render list.tabs_trigger(value: "password") { "Password" } %>
+        <% end %>
+
+        <% tabs.with_tabs_content(value: "account") do %>
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <h3 class="text-lg font-medium">Account Settings</h3>
+              <p class="text-sm text-muted-foreground">
+                Make changes to your account here. Click save when you're done.
+              </p>
+            </div>
+            <div class="space-y-2">
+              <label class="text-sm font-medium">Name</label>
+              <input type="text" placeholder="Enter your name" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+            </div>
+            <div class="space-y-2">
+              <label class="text-sm font-medium">Email</label>
+              <input type="email" placeholder="Enter your email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+            </div>
+          </div>
+        <% end %>
+
+        <% tabs.with_tabs_content(value: "password") do %>
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <h3 class="text-lg font-medium">Password Settings</h3>
+              <p class="text-sm text-muted-foreground">
+                Change your password here. After saving, you'll be logged out.
+              </p>
+            </div>
+            <div class="space-y-2">
+              <label class="text-sm font-medium">Current Password</label>
+              <input type="password" placeholder="Enter current password" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+            </div>
+            <div class="space-y-2">
+              <label class="text-sm font-medium">New Password</label>
+              <input type="password" placeholder="Enter new password" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def tabs_multiple_groups_code
+    <<~'CODE'
+      <div class="space-y-8">
+        <div>
+          <h3 class="text-lg font-semibold mb-4">User Settings</h3>
+          <%= render M9sh::TabsComponent.new(default_value: "profile") do |tabs| %>
+            <% tabs.with_tabs_list do |list| %>
+              <%= render list.tabs_trigger(value: "profile") { "Profile" } %>
+              <%= render list.tabs_trigger(value: "preferences") { "Preferences" } %>
+            <% end %>
+
+            <% tabs.with_tabs_content(value: "profile") do %>
+              <p class="text-sm">Profile settings content</p>
+            <% end %>
+
+            <% tabs.with_tabs_content(value: "preferences") do %>
+              <p class="text-sm">Preferences content</p>
+            <% end %>
+          <% end %>
+        </div>
+
+        <div>
+          <h3 class="text-lg font-semibold mb-4">System Settings</h3>
+          <%= render M9sh::TabsComponent.new(default_value: "general") do |tabs| %>
+            <% tabs.with_tabs_list do |list| %>
+              <%= render list.tabs_trigger(value: "general") { "General" } %>
+              <%= render list.tabs_trigger(value: "advanced") { "Advanced" } %>
+            <% end %>
+
+            <% tabs.with_tabs_content(value: "general") do %>
+              <p class="text-sm">General settings content</p>
+            <% end %>
+
+            <% tabs.with_tabs_content(value: "advanced") do %>
+              <p class="text-sm">Advanced settings content</p>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    CODE
+  end
+
+  def tabs_simple_code
+    <<~'CODE'
+      <%= render M9sh::TabsComponent.new(default_value: "tab1") do |tabs| %>
+        <% tabs.with_tabs_list do |list| %>
+          <%= render list.tabs_trigger(value: "tab1") { "Tab 1" } %>
+          <%= render list.tabs_trigger(value: "tab2") { "Tab 2" } %>
+          <%= render list.tabs_trigger(value: "tab3") { "Tab 3" } %>
+        <% end %>
+
+        <% tabs.with_tabs_content(value: "tab1") do %>
+          <p>Content for tab 1</p>
+        <% end %>
+
+        <% tabs.with_tabs_content(value: "tab2") do %>
+          <p>Content for tab 2</p>
+        <% end %>
+
+        <% tabs.with_tabs_content(value: "tab3") do %>
+          <p>Content for tab 3</p>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Radio Group component helpers
+  def radio_group_usage_code
+    <<~'CODE'
+      <%= render M9sh::RadioGroupComponent.new(name: "option") do |radio_group| %>
+        <% radio_group.with_item(value: "option1", label: "Option 1") %>
+      <% end %>
+    CODE
+  end
+
+  def radio_group_with_label_code
+    <<~'CODE'
+      <%= render M9sh::RadioGroupComponent.new(name: "option") do |radio_group| %>
+        <% radio_group.with_item(value: "default", label: "Default", checked: true) %>
+        <% radio_group.with_item(value: "comfortable", label: "Comfortable") %>
+        <% radio_group.with_item(value: "compact", label: "Compact") %>
+      <% end %>
+    CODE
+  end
+
+  def radio_group_default_code
+    <<~'CODE'
+      <%= render M9sh::RadioGroupComponent.new(name: "default") do |radio_group| %>
+        <% radio_group.with_item(value: "option1", label: "Option 1", checked: true) %>
+        <% radio_group.with_item(value: "option2", label: "Option 2") %>
+        <% radio_group.with_item(value: "option3", label: "Option 3") %>
+      <% end %>
+    CODE
+  end
+
+  def radio_group_with_description_code
+    <<~'CODE'
+      <%= render M9sh::RadioGroupComponent.new(name: "plan") do |radio_group| %>
+        <% radio_group.with_item(
+          value: "free",
+          label: "Free",
+          description: "Perfect for personal use",
+          checked: true
+        ) %>
+        <% radio_group.with_item(
+          value: "pro",
+          label: "Pro",
+          description: "Best for professionals"
+        ) %>
+        <% radio_group.with_item(
+          value: "enterprise",
+          label: "Enterprise",
+          description: "For large organizations"
+        ) %>
+      <% end %>
+    CODE
+  end
+
+  def radio_group_disabled_code
+    <<~'CODE'
+      <%= render M9sh::RadioGroupComponent.new(name: "disabled-group") do |radio_group| %>
+        <% radio_group.with_item(value: "option1", label: "Available option", checked: true) %>
+        <% radio_group.with_item(value: "option2", label: "Disabled option", disabled: true) %>
+        <% radio_group.with_item(value: "option3", label: "Another available option") %>
+      <% end %>
+    CODE
+  end
+
+  def radio_group_horizontal_code
+    <<~'CODE'
+      <%= render M9sh::RadioGroupComponent.new(name: "horizontal", class: "flex flex-row space-x-4") do |radio_group| %>
+        <% radio_group.with_item(value: "yes", label: "Yes", checked: true) %>
+        <% radio_group.with_item(value: "no", label: "No") %>
+        <% radio_group.with_item(value: "maybe", label: "Maybe") %>
+      <% end %>
+    CODE
+  end
+
+  def radio_group_form_integration_code
+    <<~'CODE'
+      <div class="border rounded-lg p-6 max-w-md">
+        <h3 class="text-lg font-semibold mb-4">Notification Settings</h3>
+        <div class="space-y-6">
+          <div class="space-y-3">
+            <div class="font-medium">Email frequency</div>
+            <%= render M9sh::RadioGroupComponent.new(name: "email_frequency") do |radio_group| %>
+              <% radio_group.with_item(
+                value: "realtime",
+                label: "Realtime",
+                description: "Get notified immediately",
+                checked: true
+              ) %>
+              <% radio_group.with_item(
+                value: "daily",
+                label: "Daily digest",
+                description: "Once per day at 9 AM"
+              ) %>
+              <% radio_group.with_item(
+                value: "weekly",
+                label: "Weekly digest",
+                description: "Every Monday morning"
+              ) %>
+              <% radio_group.with_item(
+                value: "never",
+                label: "Never",
+                description: "Disable email notifications"
+              ) %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    CODE
+  end
+
+  # Select component helpers
+  def select_usage_code
+    <<~'CODE'
+      <%= render M9sh::SelectComponent.new(
+        name: "country",
+        options: ["USA", "Canada", "Mexico"]
+      ) %>
+    CODE
+  end
+
+  def select_with_label_code
+    <<~'CODE'
+      <div class="space-y-2">
+        <%= render M9sh::LabelComponent.new(for_id: "country") do %>
+          Select your country
+        <% end %>
+        <%= render M9sh::SelectComponent.new(
+          name: "country",
+          options: ["USA", "Canada", "Mexico"]
+        ) %>
+      </div>
+    CODE
+  end
+
+  def select_disabled_code
+    <<~'CODE'
+      <%= render M9sh::SelectComponent.new(
+        name: "disabled",
+        options: ["Option 1", "Option 2"],
+        disabled: true
+      ) %>
+    CODE
+  end
+
+  def select_with_placeholder_code
+    <<~'CODE'
+      <%= render M9sh::SelectComponent.new(
+        name: "fruit",
+        options: ["Apple", "Banana", "Orange", "Strawberry"],
+        placeholder: "Select a fruit"
+      ) %>
+    CODE
+  end
+
+  def select_custom_options_code
+    <<~'CODE'
+      <%= render M9sh::SelectComponent.new(
+        name: "country_code",
+        options: [
+          ["United States", "us"],
+          ["Canada", "ca"],
+          ["Mexico", "mx"],
+          ["United Kingdom", "uk"]
+        ]
+      ) %>
+    CODE
+  end
+
+  def select_with_selected_code
+    <<~'CODE'
+      <%= render M9sh::SelectComponent.new(
+        name: "language",
+        options: [
+          ["English", "en"],
+          ["Spanish", "es"],
+          ["French", "fr"],
+          ["German", "de"]
+        ],
+        selected: "es"
+      ) %>
+    CODE
+  end
+
+  def select_form_integration_code
+    <<~'CODE'
+      <div class="border rounded-lg p-6 max-w-md">
+        <h3 class="text-lg font-semibold mb-4">User Information</h3>
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <%= render M9sh::LabelComponent.new(for_id: "country") do %>
+              Country
+            <% end %>
+            <%= render M9sh::SelectComponent.new(
+              name: "user[country]",
+              options: [
+                ["United States", "us"],
+                ["Canada", "ca"],
+                ["Mexico", "mx"],
+                ["United Kingdom", "uk"]
+              ],
+              placeholder: "Select your country"
+            ) %>
+          </div>
+          <div class="space-y-2">
+            <%= render M9sh::LabelComponent.new(for_id: "timezone") do %>
+              Timezone
+            <% end %>
+            <%= render M9sh::SelectComponent.new(
+              name: "user[timezone]",
+              options: [
+                ["Eastern Time (ET)", "est"],
+                ["Central Time (CT)", "cst"],
+                ["Mountain Time (MT)", "mst"],
+                ["Pacific Time (PT)", "pst"]
+              ],
+              selected: "est"
+            ) %>
+          </div>
+        </div>
+      </div>
+    CODE
+  end
+
+  # Collapsible component helpers
+  def collapsible_usage_code
+    <<~'CODE'
+      <%= render M9sh::CollapsibleComponent.new do |c| %>
+        <% c.with_trigger do %>
+          Click to toggle
+        <% end %>
+        <% c.with_collapsible_content do %>
+          Content that can be collapsed
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def collapsible_default_code
+    <<~'CODE'
+      <%= render M9sh::CollapsibleComponent.new(class: "space-y-2") do |c| %>
+        <% c.with_trigger do %>
+          <button class="flex w-full items-center justify-between rounded-md bg-muted px-4 py-2 text-sm font-medium">
+            <span>@peduarte starred 3 repositories</span>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </button>
+        <% end %>
+        <% c.with_collapsible_content do %>
+          <div class="space-y-2 pt-2">
+            <div class="rounded-md border px-4 py-3 text-sm">
+              @radix-ui/primitives
+            </div>
+            <div class="rounded-md border px-4 py-3 text-sm">
+              @radix-ui/colors
+            </div>
+            <div class="rounded-md border px-4 py-3 text-sm">
+              @stitches/react
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def collapsible_open_code
+    <<~'CODE'
+      <%= render M9sh::CollapsibleComponent.new(open: true, class: "space-y-2") do |c| %>
+        <% c.with_trigger do %>
+          <button class="flex w-full items-center justify-between rounded-md bg-muted px-4 py-2 text-sm font-medium">
+            <span>Project Information</span>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          </button>
+        <% end %>
+        <% c.with_collapsible_content do %>
+          <div class="space-y-2 pt-2">
+            <div class="rounded-md border px-4 py-3 text-sm">
+              <strong>Name:</strong> m9sh Components
+            </div>
+            <div class="rounded-md border px-4 py-3 text-sm">
+              <strong>Status:</strong> Active Development
+            </div>
+            <div class="rounded-md border px-4 py-3 text-sm">
+              <strong>Version:</strong> 1.0.0
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def collapsible_button_code
+    <<~'CODE'
+      <%= render M9sh::CollapsibleComponent.new(class: "space-y-2") do |c| %>
+        <% c.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline, class: "w-full justify-between") do %>
+            <span>Show more details</span>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9"/>
+            </svg>
+          <% end %>
+        <% end %>
+        <% c.with_collapsible_content do %>
+          <div class="rounded-md border p-4 text-sm">
+            <p class="text-muted-foreground">
+              This is additional content that can be toggled.
+            </p>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def collapsible_faq_code
+    <<~'CODE'
+      <div class="space-y-4">
+        <%= render M9sh::CollapsibleComponent.new(class: "space-y-2") do |c| %>
+          <% c.with_trigger do %>
+            <button class="flex w-full items-center justify-between rounded-md border px-4 py-2 text-sm font-medium">
+              <span>What is m9sh Components?</span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </button>
+          <% end %>
+          <% c.with_collapsible_content do %>
+            <div class="border-x border-b rounded-b-md px-4 py-3 text-sm text-muted-foreground">
+              m9sh Components is a collection of reusable UI components.
+            </div>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CollapsibleComponent.new(class: "space-y-2") do |c| %>
+          <% c.with_trigger do %>
+            <button class="flex w-full items-center justify-between rounded-md border px-4 py-2 text-sm font-medium">
+              <span>How do I install it?</span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </button>
+          <% end %>
+          <% c.with_collapsible_content do %>
+            <div class="border-x border-b rounded-b-md px-4 py-3 text-sm text-muted-foreground">
+              Simply copy the component files into your Rails application.
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    CODE
+  end
+
+  # Card component helpers
+  def card_usage_code
+    <<~'CODE'
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_body do %>
+          Card content goes here
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def card_with_header_code
+    <<~'CODE'
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Card Title
+          <% end %>
+          <% header.with_description do %>
+            Card description
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          Card content goes here
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def card_with_footer_code
+    <<~'CODE'
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_body do %>
+          Card content goes here
+        <% end %>
+        <% card.with_footer do %>
+          <p class="text-sm text-muted-foreground">Card footer content</p>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def card_complete_code
+    <<~'CODE'
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Create Project
+          <% end %>
+          <% header.with_description do %>
+            Deploy your new project in one-click.
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <label class="text-sm font-medium">Name</label>
+              <input type="text" placeholder="Name of your project" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+            </div>
+            <div class="space-y-2">
+              <label class="text-sm font-medium">Framework</label>
+              <select class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+                <option>Next.js</option>
+                <option>SvelteKit</option>
+                <option>Astro</option>
+                <option>Nuxt.js</option>
+              </select>
+            </div>
+          </div>
+        <% end %>
+        <% card.with_footer do %>
+          <div class="flex justify-between w-full">
+            <button class="px-4 py-2 rounded-md text-sm">Cancel</button>
+            <button class="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm">Deploy</button>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def card_with_action_code
+    <<~'CODE'
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Notifications
+          <% end %>
+          <% header.with_description do %>
+            You have 3 unread messages.
+          <% end %>
+          <% header.with_action do %>
+            <button class="text-sm text-primary hover:underline">
+              Mark all as read
+            </button>
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          Card content goes here
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Progress component helpers
+  def progress_usage_code
+    <<~'CODE'
+      <%= render M9sh::ProgressComponent.new(value: 60) %>
+    CODE
+  end
+
+  def progress_values_code
+    <<~'CODE'
+      <%= render M9sh::ProgressComponent.new(value: 25) %>
+
+      <%= render M9sh::ProgressComponent.new(value: 50) %>
+
+      <%= render M9sh::ProgressComponent.new(value: 75) %>
+
+      <%= render M9sh::ProgressComponent.new(value: 100) %>
+    CODE
+  end
+
+  def progress_indeterminate_code
+    <<~'CODE'
+      <%= render M9sh::ProgressComponent.new(value: 0) %>
+    CODE
+  end
+
+  # Slider component helpers
+  def slider_usage_code
+    <<~'CODE'
+      <%= render M9sh::SliderComponent.new %>
+    CODE
+  end
+
+  def slider_range_code
+    <<~'CODE'
+      <%= render M9sh::SliderComponent.new(
+        min: 0,
+        max: 100,
+        step: 5,
+        value: 50
+      ) %>
+    CODE
+  end
+
+  def slider_with_label_code
+    <<~'CODE'
+      <div class="space-y-2">
+        <%= render M9sh::LabelComponent.new(for_id: "volume") do %>
+          Volume
+        <% end %>
+        <%= render M9sh::SliderComponent.new(
+          name: "volume",
+          min: 0,
+          max: 100,
+          value: 75
+        ) %>
+      </div>
+    CODE
+  end
+
+  def slider_disabled_code
+    <<~'CODE'
+      <%= render M9sh::SliderComponent.new(
+        value: 50,
+        disabled: true
+      ) %>
+    CODE
+  end
+
+  def slider_form_integration_code
+    <<~'CODE'
+      <div class="space-y-2">
+        <div class="flex items-center justify-between">
+          <%= render M9sh::LabelComponent.new(for_id: "price-range") do %>
+            Price Range
+          <% end %>
+          <span class="text-sm text-muted-foreground">$50</span>
+        </div>
+        <%= render M9sh::SliderComponent.new(
+          name: "price",
+          min: 0,
+          max: 100,
+          step: 1,
+          value: 50
+        ) %>
+      </div>
+    CODE
+  end
+
+  # Toggle component helpers
+  def toggle_usage_code
+    <<~'CODE'
+      <%= render M9sh::ToggleComponent.new do %>
+        Toggle
+      <% end %>
+    CODE
+  end
+
+  def toggle_default_code
+    <<~'CODE'
+      <%= render M9sh::ToggleComponent.new do %>
+        Toggle
+      <% end %>
+    CODE
+  end
+
+  def toggle_with_text_code
+    <<~'CODE'
+      <%= render M9sh::ToggleComponent.new do %>
+        Toggle with text
+      <% end %>
+    CODE
+  end
+
+  def toggle_with_icon_code
+    <<~'CODE'
+      <%= render M9sh::ToggleComponent.new do %>
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/>
+          <path d="m15 5 4 4"/>
+        </svg>
+      <% end %>
+    CODE
+  end
+
+  def toggle_disabled_code
+    <<~'CODE'
+      <%= render M9sh::ToggleComponent.new(disabled: true) do %>
+        Disabled
+      <% end %>
+
+      <%= render M9sh::ToggleComponent.new(pressed: true, disabled: true) do %>
+        Disabled Pressed
+      <% end %>
+    CODE
+  end
+
+  def toggle_variants_code
+    <<~'CODE'
+      <%= render M9sh::ToggleComponent.new(variant: :default) do %>
+        Default
+      <% end %>
+
+      <%= render M9sh::ToggleComponent.new(variant: :outline) do %>
+        Outline
+      <% end %>
+    CODE
+  end
+
+  def toggle_sizes_code
+    <<~'CODE'
+      <%= render M9sh::ToggleComponent.new(size: :sm) do %>
+        Small
+      <% end %>
+
+      <%= render M9sh::ToggleComponent.new(size: :default) do %>
+        Default
+      <% end %>
+
+      <%= render M9sh::ToggleComponent.new(size: :lg) do %>
+        Large
+      <% end %>
+    CODE
+  end
+
+  # ThemeToggle component helpers
+  def theme_toggle_usage_code
+    <<~'CODE'
+      <%= render M9sh::ThemeToggleComponent.new %>
+    CODE
+  end
+
+  def theme_toggle_default_code
+    <<~'CODE'
+      <%= render M9sh::ThemeToggleComponent.new %>
+    CODE
+  end
+
+  def theme_toggle_with_label_code
+    <<~'CODE'
+      <div class="flex items-center gap-3">
+        <span class="text-sm text-muted-foreground">Theme:</span>
+        <%= render M9sh::ThemeToggleComponent.new %>
+      </div>
+    CODE
+  end
+
+  def theme_toggle_in_header_code
+    <<~'CODE'
+      <div class="flex items-center justify-between border rounded-lg p-4 bg-card">
+        <div>
+          <h3 class="text-lg font-semibold">Settings</h3>
+          <p class="text-sm text-muted-foreground">Manage your preferences</p>
+        </div>
+        <%= render M9sh::ThemeToggleComponent.new %>
+      </div>
+    CODE
+  end
+
+  def theme_toggle_in_nav_code
+    <<~'CODE'
+      <nav class="flex items-center justify-between border rounded-lg p-4 bg-card">
+        <div class="flex items-center gap-4">
+          <span class="font-semibold">My App</span>
+          <a href="#" class="text-sm">Home</a>
+          <a href="#" class="text-sm">About</a>
+          <a href="#" class="text-sm">Contact</a>
+        </div>
+        <%= render M9sh::ThemeToggleComponent.new %>
+      </nav>
+    CODE
+  end
+
+  # Sheet component helpers
+  def sheet_usage_code
+    <<~'CODE'
+      <%= render M9sh::SheetComponent.new do |sheet| %>
+        <% sheet.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Open Sheet
+          <% end %>
+        <% end %>
+        <% sheet.with_title do %>
+          Sheet Title
+        <% end %>
+        <% sheet.with_description do %>
+          Sheet description goes here.
+        <% end %>
+        <% sheet.with_sheet_content do %>
+          Sheet content goes here.
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def sheet_side_code
+    <<~'CODE'
+      <%= render M9sh::SheetComponent.new(side: "left") do |sheet| %>
+        <% sheet.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Open Left
+          <% end %>
+        <% end %>
+        <% sheet.with_title do %>Left Sheet<% end %>
+        <% sheet.with_sheet_content do %>
+          Content from the left side.
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::SheetComponent.new(side: "right") do |sheet| %>
+        <% sheet.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Open Right
+          <% end %>
+        <% end %>
+        <% sheet.with_title do %>Right Sheet<% end %>
+        <% sheet.with_sheet_content do %>
+          Content from the right side.
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::SheetComponent.new(side: "top") do |sheet| %>
+        <% sheet.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Open Top
+          <% end %>
+        <% end %>
+        <% sheet.with_title do %>Top Sheet<% end %>
+        <% sheet.with_sheet_content do %>
+          Content from the top.
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::SheetComponent.new(side: "bottom") do |sheet| %>
+        <% sheet.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Open Bottom
+          <% end %>
+        <% end %>
+        <% sheet.with_title do %>Bottom Sheet<% end %>
+        <% sheet.with_sheet_content do %>
+          Content from the bottom.
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def sheet_with_form_code
+    <<~'CODE'
+      <%= render M9sh::SheetComponent.new do |sheet| %>
+        <% sheet.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Edit Profile
+          <% end %>
+        <% end %>
+        <% sheet.with_title do %>
+          Edit Profile
+        <% end %>
+        <% sheet.with_description do %>
+          Make changes to your profile here. Click save when you're done.
+        <% end %>
+        <% sheet.with_sheet_content do %>
+          <div class="space-y-4 py-4">
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "name") do %>
+                Name
+              <% end %>
+              <%= render M9sh::InputComponent.new(
+                id: "name",
+                type: "text",
+                placeholder: "Enter your name"
+              ) %>
+            </div>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "email") do %>
+                Email
+              <% end %>
+              <%= render M9sh::InputComponent.new(
+                id: "email",
+                type: "email",
+                placeholder: "Enter your email"
+              ) %>
+            </div>
+            <div class="flex justify-end gap-2 pt-4">
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Cancel
+              <% end %>
+              <%= render M9sh::ButtonComponent.new do %>
+                Save Changes
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Popover component helpers
+  def popover_usage_code
+    <<~'CODE'
+      <%= render M9sh::PopoverComponent.new do |popover| %>
+        <% popover.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Open Popover
+          <% end %>
+        <% end %>
+        <% popover.with_popover_content do %>
+          <p class="text-sm">Popover content goes here.</p>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def popover_with_form_code
+    <<~'CODE'
+      <%= render M9sh::PopoverComponent.new do |popover| %>
+        <% popover.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Settings
+          <% end %>
+        <% end %>
+        <% popover.with_popover_content do %>
+          <div class="space-y-4">
+            <h4 class="font-medium text-sm">Dimensions</h4>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "width") do %>
+                Width
+              <% end %>
+              <%= render M9sh::InputComponent.new(
+                id: "width",
+                type: "number",
+                placeholder: "100"
+              ) %>
+            </div>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "height") do %>
+                Height
+              <% end %>
+              <%= render M9sh::InputComponent.new(
+                id: "height",
+                type: "number",
+                placeholder: "100"
+              ) %>
+            </div>
+            <%= render M9sh::ButtonComponent.new(class: "w-full") do %>
+              Save
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def popover_rich_content_code
+    <<~'CODE'
+      <%= render M9sh::PopoverComponent.new do |popover| %>
+        <% popover.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            User Info
+          <% end %>
+        <% end %>
+        <% popover.with_popover_content do %>
+          <div class="space-y-3">
+            <div class="flex items-center gap-3">
+              <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center font-semibold text-primary">
+                JD
+              </div>
+              <div>
+                <h4 class="font-semibold text-sm">John Doe</h4>
+                <p class="text-xs text-muted-foreground">john@example.com</p>
+              </div>
+            </div>
+            <div class="border-t pt-3">
+              <p class="text-xs text-muted-foreground mb-2">Bio</p>
+              <p class="text-sm">Software developer passionate about building great user experiences.</p>
+            </div>
+            <div class="flex gap-2 pt-2">
+              <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm, class: "flex-1") do %>
+                View Profile
+              <% end %>
+              <%= render M9sh::ButtonComponent.new(size: :sm, class: "flex-1") do %>
+                Message
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Toast component helpers
+  def toast_usage_code
+    <<~'CODE'
+      <%= render M9sh::ToastComponent.new(
+        title: "Notification",
+        description: "Your changes have been saved."
+      ) %>
+    CODE
+  end
+
+  def toast_variants_code
+    <<~'CODE'
+      <%= render M9sh::ToastComponent.new(
+        title: "Default",
+        description: "This is a default toast.",
+        variant: :default
+      ) %>
+
+      <%= render M9sh::ToastComponent.new(
+        title: "Success",
+        description: "Your action was successful.",
+        variant: :success
+      ) %>
+
+      <%= render M9sh::ToastComponent.new(
+        title: "Error",
+        description: "An error occurred.",
+        variant: :error
+      ) %>
+
+      <%= render M9sh::ToastComponent.new(
+        title: "Warning",
+        description: "Please review your changes.",
+        variant: :warning
+      ) %>
+
+      <%= render M9sh::ToastComponent.new(
+        title: "Info",
+        description: "Here's some information.",
+        variant: :info
+      ) %>
+    CODE
+  end
+
+  def toast_default_code
+    <<~'CODE'
+      <%= render M9sh::ToastComponent.new(
+        title: "Notification",
+        description: "Your changes have been saved successfully."
+      ) %>
+    CODE
+  end
+
+  def toast_success_code
+    <<~'CODE'
+      <%= render M9sh::ToastComponent.new(
+        title: "Success",
+        description: "Your profile has been updated.",
+        variant: :success
+      ) %>
+    CODE
+  end
+
+  def toast_error_code
+    <<~'CODE'
+      <%= render M9sh::ToastComponent.new(
+        title: "Error",
+        description: "Unable to save changes. Please try again.",
+        variant: :error
+      ) %>
+    CODE
+  end
+
+  def toast_warning_code
+    <<~'CODE'
+      <%= render M9sh::ToastComponent.new(
+        title: "Warning",
+        description: "Your session will expire in 5 minutes.",
+        variant: :warning
+      ) %>
+    CODE
+  end
+
+  def toast_title_only_code
+    <<~'CODE'
+      <%= render M9sh::ToastComponent.new(
+        title: "Message sent successfully!",
+        variant: :success
+      ) %>
+    CODE
+  end
+
+  def toast_custom_duration_code
+    <<~'CODE'
+      <%= render M9sh::ToastComponent.new(
+        title: "Quick notification",
+        description: "This will disappear in 2 seconds.",
+        duration: 2000
+      ) %>
+    CODE
+  end
+
+  # Toaster component helpers
+  def toaster_usage_code
+    <<~'CODE'
+      <%= render M9sh::ToasterComponent.new %>
+    CODE
+  end
+
+  def toaster_javascript_code
+    <<~'CODE'
+      // Dispatch a toast event
+      window.dispatchEvent(new CustomEvent('hotcdn:toast', {
+        detail: {
+          title: 'Notification',
+          description: 'Your changes have been saved.',
+          variant: 'success',
+          duration: 5000
+        }
+      }));
+    CODE
+  end
+
+  def toaster_example_code
+    <<~'CODE'
+      <!-- Add this to your layout -->
+      <%= render M9sh::ToasterComponent.new %>
+
+      <!-- Then trigger toasts from JavaScript -->
+      <button
+        onclick="window.dispatchEvent(new CustomEvent('hotcdn:toast', {
+          detail: {
+            title: 'Success',
+            description: 'Operation completed successfully.',
+            variant: 'success'
+          }
+        }))"
+        class="px-4 py-2 bg-primary text-primary-foreground rounded-md"
+      >
+        Show Toast
+      </button>
+    CODE
+  end
+
+  def toaster_turbo_stream_code
+    <<~'CODE'
+      <!-- In your turbo stream template -->
+      <%= turbo_stream.append "notifications" do %>
+        <script>
+          window.dispatchEvent(new CustomEvent('hotcdn:toast', {
+            detail: {
+              title: 'Record created',
+              description: 'The record has been successfully created.',
+              variant: 'success'
+            }
+          }));
+        </script>
+      <% end %>
+    CODE
+  end
+
+  # Dialog component helpers
+  def dialog_usage_code
+    <<~'CODE'
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new { "Open Dialog" } %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title { "Dialog Title" } %>
+            <% header.with_dialog_description { "Dialog description goes here." } %>
+          <% end %>
+          <p>Dialog content goes here.</p>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def dialog_default_code
+    <<~'CODE'
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new { "Open Dialog" } %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title { "Are you absolutely sure?" } %>
+            <% header.with_dialog_description do %>
+              This action cannot be undone. This will permanently delete your account
+              and remove your data from our servers.
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def dialog_with_header_code
+    <<~'CODE'
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) { "Edit Profile" } %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title { "Edit profile" } %>
+            <% header.with_dialog_description do %>
+              Make changes to your profile here. Click save when you're done.
+            <% end %>
+          <% end %>
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(text: "Name") %>
+              <%= render M9sh::InputComponent.new(type: "text", placeholder: "Pedro Duarte") %>
+            </div>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(text: "Username") %>
+              <%= render M9sh::InputComponent.new(type: "text", placeholder: "@peduarte") %>
+            </div>
+          </div>
+          <% content.with_dialog_footer do %>
+            <%= render M9sh::ButtonComponent.new(type: "submit") { "Save changes" } %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def dialog_with_footer_code
+    <<~'CODE'
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new { "Open Dialog" } %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title { "Confirm Action" } %>
+            <% header.with_dialog_description do %>
+              This is a dialog with a footer containing action buttons.
+            <% end %>
+          <% end %>
+          <p class="text-sm">Are you sure you want to proceed with this action?</p>
+          <% content.with_dialog_footer do %>
+            <%= render M9sh::DialogCloseComponent.new(as_child: true) do %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline) { "Cancel" } %>
+            <% end %>
+            <%= render M9sh::ButtonComponent.new { "Continue" } %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def dialog_form_code
+    <<~'CODE'
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) { "Share" } %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title { "Share link" } %>
+            <% header.with_dialog_description do %>
+              Anyone who has this link will be able to view this.
+            <% end %>
+          <% end %>
+          <div class="flex items-center space-x-2">
+            <%= render M9sh::InputComponent.new(
+              value: "https://ui.shadcn.com/docs/installation",
+              readonly: true,
+              class: "flex-1"
+            ) %>
+            <%= render M9sh::ButtonComponent.new(type: "button", variant: :secondary, size: :sm) { "Copy" } %>
+          </div>
+          <% content.with_dialog_footer do %>
+            <%= render M9sh::DialogCloseComponent.new %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def dialog_scrollable_code
+    <<~'CODE'
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new { "View Terms" } %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title { "Terms and Conditions" } %>
+            <% header.with_dialog_description do %>
+              Please read and accept our terms and conditions.
+            <% end %>
+          <% end %>
+          <div class="max-h-[300px] overflow-y-auto space-y-4">
+            <p class="text-sm">Lorem ipsum dolor sit amet.</p>
+            <p class="text-sm">Ut enim ad minim veniam.</p>
+            <p class="text-sm">Duis aute irure dolor.</p>
+          </div>
+          <% content.with_dialog_footer do %>
+            <%= render M9sh::DialogCloseComponent.new(as_child: true) do %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline) { "Decline" } %>
+            <% end %>
+            <%= render M9sh::ButtonComponent.new { "Accept" } %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # AlertDialog component helpers
+  def alert_dialog_usage_code
+    <<~'CODE'
+      <%= render M9sh::AlertDialogComponent.new do |alert| %>
+        <% alert.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Show Dialog
+          <% end %>
+        <% end %>
+        <% alert.with_title do %>
+          Are you sure?
+        <% end %>
+        <% alert.with_description do %>
+          This action cannot be undone.
+        <% end %>
+        <% alert.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Cancel
+          <% end %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Continue
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def alert_dialog_default_code
+    <<~'CODE'
+      <%= render M9sh::AlertDialogComponent.new do |alert| %>
+        <% alert.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Show Dialog
+          <% end %>
+        <% end %>
+        <% alert.with_title do %>
+          Are you absolutely sure?
+        <% end %>
+        <% alert.with_description do %>
+          This action cannot be undone. This will permanently delete your account
+          and remove your data from our servers.
+        <% end %>
+        <% alert.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Cancel
+          <% end %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Continue
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def alert_dialog_destructive_code
+    <<~'CODE'
+      <%= render M9sh::AlertDialogComponent.new do |alert| %>
+        <% alert.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :destructive) do %>
+            Delete Account
+          <% end %>
+        <% end %>
+        <% alert.with_title do %>
+          Delete Account
+        <% end %>
+        <% alert.with_description do %>
+          This action cannot be undone. This will permanently delete your account
+          and all associated data.
+        <% end %>
+        <% alert.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Cancel
+          <% end %>
+          <%= render M9sh::ButtonComponent.new(variant: :destructive) do %>
+            Delete
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def alert_dialog_with_description_code
+    <<~'CODE'
+      <%= render M9sh::AlertDialogComponent.new do |alert| %>
+        <% alert.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Continue
+          <% end %>
+        <% end %>
+        <% alert.with_title do %>
+          Confirm your action
+        <% end %>
+        <% alert.with_description do %>
+          This will submit your form data. Please review your information before
+          continuing. You can still go back and make changes if needed.
+        <% end %>
+        <% alert.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Go Back
+          <% end %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Submit
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def typography_usage_code
+    <<~'CODE'
+      <%= render M9sh::TypographyComponent.new(variant: :h1) do %>
+        Your Heading Here
+      <% end %>
+    CODE
+  end
+
+  def typography_headings_code
+    <<~'CODE'
+      <%= render M9sh::TypographyComponent.new(variant: :h1) do %>
+        Taxing Laughter: The Joke Tax Chronicles
+      <% end %>
+
+      <%= render M9sh::TypographyComponent.new(variant: :h2) do %>
+        The People of the Kingdom
+      <% end %>
+
+      <%= render M9sh::TypographyComponent.new(variant: :h3) do %>
+        The Joke Tax
+      <% end %>
+
+      <%= render M9sh::TypographyComponent.new(variant: :h4) do %>
+        People stopped telling jokes
+      <% end %>
+    CODE
+  end
+
+  def typography_paragraph_code
+    <<~'CODE'
+      <%= render M9sh::TypographyComponent.new(variant: :p) do %>
+        The king, seeing how much happier his subjects were, realized the error of his ways
+        and repealed the joke tax.
+      <% end %>
+    CODE
+  end
+
+  def typography_blockquote_code
+    <<~'CODE'
+      <%= render M9sh::TypographyComponent.new(variant: :blockquote) do %>
+        "After all," he said, "everyone enjoys a good joke, so it's only fair that they should
+        pay for the privilege."
+      <% end %>
+    CODE
+  end
+
+  def typography_list_code
+    <<~'CODE'
+      <%= render M9sh::TypographyComponent.new(variant: :list) do %>
+        <li>1st level of puns: 5 gold coins</li>
+        <li>2nd level of jokes: 10 gold coins</li>
+        <li>3rd level of one-liners: 20 gold coins</li>
+      <% end %>
+    CODE
+  end
+
+  def typography_inline_code_code
+    <<~'CODE'
+      <%= render M9sh::TypographyComponent.new(variant: :inline_code) do %>
+        @radix-ui/react-alert-dialog
+      <% end %>
+    CODE
+  end
+
+  def typography_lead_code
+    <<~'CODE'
+      <%= render M9sh::TypographyComponent.new(variant: :lead) do %>
+        A modal dialog that interrupts the user with important content and expects a response.
+      <% end %>
+    CODE
+  end
+
+  def typography_variants_code
+    <<~'CODE'
+      <%= render M9sh::TypographyComponent.new(variant: :large) do %>
+        Are you absolutely sure?
+      <% end %>
+
+      <%= render M9sh::TypographyComponent.new(variant: :small) do %>
+        Email address
+      <% end %>
+
+      <%= render M9sh::TypographyComponent.new(variant: :muted) do %>
+        Enter your email address.
+      <% end %>
+    CODE
+  end
+
+  # Navigation Menu component helpers
+  def navigation_menu_usage_code
+    <<~'CODE'
+      <%= render M9sh::NavigationMenuComponent.new do |nav| %>
+        <% nav.with_item do |item| %>
+          <% item.with_trigger do %>
+            Components
+          <% end %>
+          <% item.with_menu_content do %>
+            <!-- Menu content -->
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navigation_menu_default_code
+    <<~'CODE'
+      <%= render M9sh::NavigationMenuComponent.new do |nav| %>
+        <% nav.with_item do |item| %>
+          <% item.with_trigger do %>
+            Getting started
+          <% end %>
+          <% item.with_menu_content do %>
+            <ul class="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+              <li class="row-span-3">
+                <div class="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md">
+                  <div class="mb-2 mt-4 text-lg font-medium">
+                    shadcn/ui
+                  </div>
+                  <p class="text-sm leading-tight text-muted-foreground">
+                    Beautifully designed components built with Radix UI and Tailwind CSS.
+                  </p>
+                </div>
+              </li>
+              <li>
+                <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                  <div class="text-sm font-medium leading-none">Introduction</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Re-usable components built using Radix UI and Tailwind CSS.
+                  </p>
+                </a>
+              </li>
+              <li>
+                <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                  <div class="text-sm font-medium leading-none">Installation</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    How to install dependencies and structure your app.
+                  </p>
+                </a>
+              </li>
+              <li>
+                <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                  <div class="text-sm font-medium leading-none">Typography</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Styles for headings, paragraphs, lists...etc
+                  </p>
+                </a>
+              </li>
+            </ul>
+          <% end %>
+        <% end %>
+
+        <% nav.with_item do |item| %>
+          <% item.with_trigger do %>
+            Components
+          <% end %>
+          <% item.with_menu_content do %>
+            <ul class="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+              <li>
+                <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                  <div class="text-sm font-medium leading-none">Alert Dialog</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    A modal dialog that interrupts the user with important content.
+                  </p>
+                </a>
+              </li>
+              <li>
+                <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                  <div class="text-sm font-medium leading-none">Hover Card</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    For sighted users to preview content available behind a link.
+                  </p>
+                </a>
+              </li>
+              <li>
+                <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                  <div class="text-sm font-medium leading-none">Progress</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Displays an indicator showing the completion progress.
+                  </p>
+                </a>
+              </li>
+              <li>
+                <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                  <div class="text-sm font-medium leading-none">Scroll-area</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    Visually or semantically separates content.
+                  </p>
+                </a>
+              </li>
+              <li>
+                <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                  <div class="text-sm font-medium leading-none">Tabs</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    A set of layered sections of content.
+                  </p>
+                </a>
+              </li>
+              <li>
+                <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+                  <div class="text-sm font-medium leading-none">Tooltip</div>
+                  <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                    A popup that displays information related to an element.
+                  </p>
+                </a>
+              </li>
+            </ul>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navigation_menu_simple_links_code
+    <<~'CODE'
+      <%= render M9sh::NavigationMenuComponent.new do |nav| %>
+        <% nav.with_item do |item| %>
+          <% item.with_link(href: "#docs") do %>
+            Documentation
+          <% end %>
+        <% end %>
+
+        <% nav.with_item do |item| %>
+          <% item.with_link(href: "#components") do %>
+            Components
+          <% end %>
+        <% end %>
+
+        <% nav.with_item do |item| %>
+          <% item.with_link(href: "#examples") do %>
+            Examples
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Navbar component helpers
+  def navbar_usage_code
+    <<~'CODE'
+      <%= render M9sh::NavbarComponent.new do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="font-bold text-xl">Brand</a>
+        <% end %>
+
+        <% navbar.with_navigation do %>
+          <nav class="flex items-center gap-6">
+            <a href="#">Link 1</a>
+            <a href="#">Link 2</a>
+          </nav>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Action
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navbar_simple_code
+    <<~'CODE'
+      <%= render M9sh::NavbarComponent.new do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="flex items-center space-x-2">
+            <span class="font-bold text-xl text-foreground">Brand</span>
+          </a>
+        <% end %>
+
+        <% navbar.with_navigation do %>
+          <nav class="hidden md:flex items-center gap-6">
+            <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">Features</a>
+            <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">Pricing</a>
+            <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">About</a>
+            <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">Contact</a>
+          </nav>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :sm) do %>
+            Sign In
+          <% end %>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+            Sign Up
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navbar_with_menu_code
+    <<~'CODE'
+      <%= render M9sh::NavbarComponent.new do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="flex items-center space-x-2">
+            <span class="font-bold text-xl text-foreground">m9sh/ui</span>
+          </a>
+        <% end %>
+
+        <% navbar.with_navigation do %>
+          <div class="hidden md:block">
+            <%= render M9sh::NavigationMenuComponent.new do |nav| %>
+              <% nav.with_item do |item| %>
+                <% item.with_trigger do %>
+                  Products
+                <% end %>
+                <% item.with_menu_content do %>
+                  <ul class="grid gap-3 p-4 w-[400px]">
+                    <li>
+                      <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground">
+                        <div class="text-sm font-medium leading-none">Product 1</div>
+                        <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                          Description of product 1
+                        </p>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#" class="block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground">
+                        <div class="text-sm font-medium leading-none">Product 2</div>
+                        <p class="line-clamp-2 text-sm leading-snug text-muted-foreground">
+                          Description of product 2
+                        </p>
+                      </a>
+                    </li>
+                  </ul>
+                <% end %>
+              <% end %>
+
+              <% nav.with_item do |item| %>
+                <% item.with_link(href: "#pricing") do %>
+                  Pricing
+                <% end %>
+              <% end %>
+
+              <% nav.with_item do |item| %>
+                <% item.with_link(href: "#docs") do %>
+                  Docs
+                <% end %>
+              <% end %>
+            <% end %>
+          </div>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) do %>
+            Login
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navbar_transparent_code
+    <<~'CODE'
+      <%= render M9sh::NavbarComponent.new(transparent: true) do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="flex items-center space-x-2">
+            <span class="font-bold text-xl text-foreground">Brand</span>
+          </a>
+        <% end %>
+
+        <% navbar.with_navigation do %>
+          <nav class="hidden md:flex items-center gap-6">
+            <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">Home</a>
+            <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">About</a>
+            <a href="#" class="text-sm font-medium text-foreground hover:text-foreground/80 transition-colors">Services</a>
+          </nav>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :sm) do %>
+            Get Started
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navbar_full_width_code
+    <<~'CODE'
+      <%= render M9sh::NavbarComponent.new(container: false) do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="font-bold text-xl">Full Width</a>
+        <% end %>
+
+        <% navbar.with_navigation do %>
+          <nav class="flex items-center gap-6">
+            <a href="#" class="text-sm font-medium">Features</a>
+            <a href="#" class="text-sm font-medium">Docs</a>
+          </nav>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+            Sign Up
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navbar_sizes_code
+    <<~'CODE'
+      <!-- Small navbar -->
+      <%= render M9sh::NavbarComponent.new(size: :sm) do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="font-bold">Small</a>
+        <% end %>
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+            Action
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <!-- Default navbar -->
+      <%= render M9sh::NavbarComponent.new do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="font-bold text-xl">Default</a>
+        <% end %>
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+            Action
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <!-- Large navbar -->
+      <%= render M9sh::NavbarComponent.new(size: :lg) do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="font-bold text-2xl">Large</a>
+        <% end %>
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Action
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navbar_blur_code
+    <<~'CODE'
+      <%= render M9sh::NavbarComponent.new(blur: true) do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="font-bold text-xl">Blur Effect</a>
+        <% end %>
+
+        <% navbar.with_navigation do %>
+          <nav class="flex items-center gap-6">
+            <a href="#" class="text-sm font-medium">Home</a>
+            <a href="#" class="text-sm font-medium">Products</a>
+          </nav>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) do %>
+            Contact
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navbar_no_border_code
+    <<~'CODE'
+      <%= render M9sh::NavbarComponent.new(border: false) do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="font-bold text-xl">No Border</a>
+        <% end %>
+
+        <% navbar.with_navigation do %>
+          <nav class="flex items-center gap-4">
+            <a href="#" class="text-sm">Link 1</a>
+            <a href="#" class="text-sm">Link 2</a>
+          </nav>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navbar_combined_options_code
+    <<~'CODE'
+      <%= render M9sh::NavbarComponent.new(
+        sticky: true,
+        transparent: true,
+        container: false,
+        size: :lg,
+        border: false
+      ) do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="flex items-center space-x-2">
+            <span class="font-bold text-2xl">Custom</span>
+          </a>
+        <% end %>
+
+        <% navbar.with_navigation do %>
+          <nav class="flex items-center gap-6">
+            <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Home</a>
+            <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Features</a>
+            <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Pricing</a>
+            <a href="#" class="text-sm font-medium hover:text-primary transition-colors">Contact</a>
+          </nav>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(variant: :ghost) do %>
+            Login
+          <% end %>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Get Started
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def navbar_mobile_menu_code
+    <<~'CODE'
+      <%= render M9sh::NavbarComponent.new do |navbar| %>
+        <% navbar.with_brand do %>
+          <a href="/" class="font-bold text-xl">Brand</a>
+        <% end %>
+
+        <% navbar.with_navigation do %>
+          <nav class="flex items-center gap-6">
+            <a href="#" class="text-sm font-medium">Home</a>
+            <a href="#" class="text-sm font-medium">About</a>
+            <a href="#" class="text-sm font-medium">Services</a>
+          </nav>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :sm) do %>
+            Login
+          <% end %>
+        <% end %>
+
+        <% navbar.with_actions do %>
+          <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+            Sign Up
+          <% end %>
+        <% end %>
+
+        <% navbar.with_mobile_menu do %>
+          <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+            Home
+          <% end %>
+          <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+            About
+          <% end %>
+          <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+            Services
+          <% end %>
+          <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+          <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+            Login
+          <% end %>
+          <%= render M9sh::DropdownMenuItemComponent.new(href: "#") do %>
+            Sign Up
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # Spinner component helpers
+  def spinner_usage_code
+    <<~'CODE'
+      <%= render M9sh::SpinnerComponent.new %>
+    CODE
+  end
+
+  def spinner_sizes_code
+    <<~'CODE'
+      <%= render M9sh::SpinnerComponent.new(size: :sm) %>
+      <%= render M9sh::SpinnerComponent.new %>
+      <%= render M9sh::SpinnerComponent.new(size: :md) %>
+      <%= render M9sh::SpinnerComponent.new(size: :lg) %>
+    CODE
+  end
+
+  def spinner_colors_code
+    <<~'CODE'
+      <%= render M9sh::SpinnerComponent.new(class: "text-primary") %>
+      <%= render M9sh::SpinnerComponent.new(class: "text-destructive") %>
+      <%= render M9sh::SpinnerComponent.new(class: "text-green-500") %>
+      <%= render M9sh::SpinnerComponent.new(class: "text-blue-500") %>
+    CODE
+  end
+
+  def spinner_button_code
+    <<~'CODE'
+      <%= render M9sh::ButtonComponent.new(disabled: true) do %>
+        <div class="flex items-center gap-2">
+          <%= render M9sh::SpinnerComponent.new(size: :sm) %>
+          <span>Please wait</span>
+        </div>
+      <% end %>
+    CODE
+  end
+
+  # Sidebar
+  def sidebar_usage_code
+    <<~'CODE'
+      <%= render M9sh::SidebarProviderComponent.new do %>
+        <%= render M9sh::SidebarComponent.new do |sidebar| %>
+          <% sidebar.with_sidebar_content do %>
+            <%= render M9sh::SidebarGroupComponent.new do |group| %>
+              <% group.with_group_content do %>
+                <%= render M9sh::SidebarMenuComponent.new do %>
+                  <%= render M9sh::SidebarMenuItemComponent.new do %>
+                    <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                      Home
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+        <%= render M9sh::SidebarInsetComponent.new do %>
+          <header>
+            <%= render M9sh::SidebarTriggerComponent.new %>
+          </header>
+          <div class="p-4">
+            Main content
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def sidebar_with_header_code
+    <<~'CODE'
+      <%= render M9sh::SidebarComponent.new do |sidebar| %>
+        <% sidebar.with_header do %>
+          <h2 class="font-bold text-lg">My App</h2>
+        <% end %>
+        <% sidebar.with_sidebar_content do %>
+          Navigation items...
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def sidebar_with_groups_code
+    <<~'CODE'
+      <%= render M9sh::SidebarComponent.new do |sidebar| %>
+        <% sidebar.with_sidebar_content do %>
+          <%= render M9sh::SidebarGroupComponent.new do |group| %>
+            <% group.with_label do %>
+              Application
+            <% end %>
+            <% group.with_group_content do %>
+              <%= render M9sh::SidebarMenuComponent.new do %>
+                <%= render M9sh::SidebarMenuItemComponent.new do %>
+                  <%= render M9sh::SidebarMenuButtonComponent.new(href: "#", active: true) do %>
+                    Dashboard
+                  <% end %>
+                <% end %>
+                <%= render M9sh::SidebarMenuItemComponent.new do %>
+                  <%= render M9sh::SidebarMenuButtonComponent.new(href: "#") do %>
+                    Settings
+                  <% end %>
+                <% end %>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def sidebar_collapsible_code
+    <<~'CODE'
+      <%= render M9sh::SidebarComponent.new(collapsible: :icon) do |sidebar| %>
+        <% sidebar.with_sidebar_content do %>
+          Navigation items...
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def sidebar_app_code
+    <<~'CODE'
+      <%= render M9sh::SidebarProviderComponent.new do %>
+        <%= render M9sh::SidebarComponent.new(collapsible: :none) do |sidebar| %>
+          <% sidebar.with_header do %>
+            <div class="flex items-center gap-2 px-2 py-2">
+              <div class="h-8 w-8 rounded-lg bg-sidebar-primary text-sidebar-primary-foreground flex items-center justify-center font-semibold text-sm">
+                A
+              </div>
+              <span class="text-sm font-semibold">Acme Inc.</span>
+            </div>
+          <% end %>
+          <% sidebar.with_sidebar_content do %>
+            <div class="px-3 py-2">
+              <%= render M9sh::ButtonComponent.new(variant: :default, class: "w-full justify-start gap-2 rounded-lg shadow-sm") do %>
+                Quick Create
+              <% end %>
+            </div>
+            <!-- Navigation groups -->
+          <% end %>
+          <% sidebar.with_footer do %>
+            <div class="border-t border-sidebar-border px-1 py-3">
+              <!-- Footer content -->
+            </div>
+          <% end %>
+        <% end %>
+        <%= render M9sh::SidebarInsetComponent.new do %>
+          <header class="flex h-16 items-center gap-2 border-b px-4">
+            <%= render M9sh::SidebarTriggerComponent.new %>
+            <h1 class="text-lg font-semibold">Documents</h1>
+          </header>
+          <div class="flex-1 p-6">
+            <div class="rounded-xl border border-border bg-card p-6 shadow-sm">
+              Main content
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+end
+
+  # Tooltip component helpers
+  def tooltip_usage_code
+    <<~'CODE'
+      <%= render M9sh::TooltipComponent.new do |tooltip| %>
+        <% tooltip.with_trigger do %>
+          Hover me
+        <% end %>
+        <% tooltip.with_tooltip_content do %>
+          Tooltip content
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def tooltip_default_code
+    <<~'CODE'
+      <%= render M9sh::TooltipComponent.new do |tooltip| %>
+        <% tooltip.with_trigger do %>
+          <button class="px-4 py-2 rounded-md border">Hover me</button>
+        <% end %>
+        <% tooltip.with_tooltip_content do %>
+          This is a tooltip
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def tooltip_positions_code
+    <<~'CODE'
+      <%= render M9sh::TooltipComponent.new(side: "top") do |tooltip| %>
+        <% tooltip.with_trigger do %>
+          <button class="px-4 py-2 rounded-md border">Top</button>
+        <% end %>
+        <% tooltip.with_tooltip_content do %>
+          Tooltip on top
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::TooltipComponent.new(side: "right") do |tooltip| %>
+        <% tooltip.with_trigger do %>
+          <button class="px-4 py-2 rounded-md border">Right</button>
+        <% end %>
+        <% tooltip.with_tooltip_content do %>
+          Tooltip on right
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::TooltipComponent.new(side: "bottom") do |tooltip| %>
+        <% tooltip.with_trigger do %>
+          <button class="px-4 py-2 rounded-md border">Bottom</button>
+        <% end %>
+        <% tooltip.with_tooltip_content do %>
+          Tooltip on bottom
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::TooltipComponent.new(side: "left") do |tooltip| %>
+        <% tooltip.with_trigger do %>
+          <button class="px-4 py-2 rounded-md border">Left</button>
+        <% end %>
+        <% tooltip.with_tooltip_content do %>
+          Tooltip on left
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def tooltip_rich_content_code
+    <<~'CODE'
+      <%= render M9sh::TooltipComponent.new do |tooltip| %>
+        <% tooltip.with_trigger do %>
+          <button class="px-4 py-2 rounded-md border">Hover for info</button>
+        <% end %>
+        <% tooltip.with_tooltip_content do %>
+          <div class="space-y-1">
+            <p class="font-semibold">Pro Tip</p>
+            <p class="text-xs">You can use rich content in tooltips</p>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # HoverCard component helpers
+  def hover_card_usage_code
+    <<~'CODE'
+      <%= render M9sh::HoverCardComponent.new do |card| %>
+        <% card.with_trigger do %>
+          Hover me
+        <% end %>
+        <% card.with_hover_content do %>
+          Hover card content
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def hover_card_default_code
+    <<~'CODE'
+      <%= render M9sh::HoverCardComponent.new do |card| %>
+        <% card.with_trigger do %>
+          <span class="underline cursor-pointer">@username</span>
+        <% end %>
+        <% card.with_hover_content do %>
+          <div class="space-y-2">
+            <h4 class="text-sm font-semibold">@username</h4>
+            <p class="text-sm text-muted-foreground">
+              The hover card component is a rich preview that appears when hovering over a trigger element.
+            </p>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def hover_card_with_avatar_code
+    <<~'CODE'
+      <%= render M9sh::HoverCardComponent.new do |card| %>
+        <% card.with_trigger do %>
+          <span class="underline cursor-pointer">@nextjs</span>
+        <% end %>
+        <% card.with_hover_content do %>
+          <div class="flex gap-4">
+            <%= render M9sh::AvatarComponent.new(
+              src: "https://github.com/vercel.png",
+              fallback: "VC"
+            ) %>
+            <div class="space-y-1">
+              <h4 class="text-sm font-semibold">@nextjs</h4>
+              <p class="text-sm text-muted-foreground">
+                The React Framework - created and maintained by @vercel.
+              </p>
+              <div class="flex items-center pt-2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-1">
+                  <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
+                  <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
+                </svg>
+                <span class="text-xs text-muted-foreground">Joined December 2021</span>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def hover_card_complex_code
+    <<~'CODE'
+      <%= render M9sh::HoverCardComponent.new(open_delay: 300, close_delay: 400) do |card| %>
+        <% card.with_trigger do %>
+          <span class="underline cursor-pointer text-sm font-medium">View Details</span>
+        <% end %>
+        <% card.with_hover_content do %>
+          <div class="space-y-3">
+            <div>
+              <h4 class="text-sm font-semibold mb-1">Product Information</h4>
+              <p class="text-xs text-muted-foreground">
+                Detailed information about the product.
+              </p>
+            </div>
+            <div class="border-t pt-3 space-y-2">
+              <div class="flex justify-between text-xs">
+                <span class="text-muted-foreground">Price:</span>
+                <span class="font-medium">$29.99</span>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  # DropdownMenu component helpers
+  # Main component helpers
+  def main_usage_code
+    <<~'CODE'
+      <%= render M9sh::MainComponent.new do %>
+        <header class="flex h-14 shrink-0 items-center gap-2 px-4 border-b">
+          <h1 class="text-base font-semibold">Page Title</h1>
+        </header>
+        <div class="flex-1 overflow-auto p-6">
+          <p>Your content here</p>
+        </div>
+      <% end %>
+    CODE
+  end
+
+  def main_with_cards_code
+    <<~'CODE'
+      <%= render M9sh::MainComponent.new do %>
+        <header class="flex h-14 shrink-0 items-center gap-2 px-4 border-b">
+          <h1 class="text-base font-semibold">Dashboard</h1>
+        </header>
+        <div class="flex-1 overflow-auto p-6">
+          <div class="space-y-6">
+            <div class="rounded-3xl bg-card border border-border/50 p-8 shadow-xl">
+              <h3 class="text-sm font-medium text-muted-foreground mb-3">Total Revenue</h3>
+              <p class="text-4xl font-bold mb-2">$1,250.00</p>
+              <p class="text-sm text-muted-foreground">+20.1% from last month</p>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    CODE
+  end
+
+  def main_with_sidebar_code
+    <<~'CODE'
+      <%= render M9sh::SidebarProviderComponent.new(background: :sidebar) do %>
+        <%= render M9sh::SidebarComponent.new(collapsible: :none, show_border: false) do |sidebar| %>
+          <% sidebar.with_header do %>
+            <div class="flex items-center gap-2">
+              <span class="font-semibold">My App</span>
+            </div>
+          <% end %>
+          <% sidebar.with_sidebar_content do %>
+            <!-- Sidebar navigation -->
+          <% end %>
+        <% end %>
+        <%= render M9sh::SidebarInsetComponent.new do %>
+          <%= render M9sh::MainComponent.new do %>
+            <header class="flex h-14 shrink-0 items-center gap-2 px-4 border-b">
+              <h1 class="text-base font-semibold">Welcome</h1>
+            </header>
+            <div class="flex-1 overflow-auto p-6">
+              <p>Main content area</p>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def main_with_navbar_code
+    <<~'CODE'
+      <div class="h-screen flex flex-col bg-sidebar">
+        <!-- Top Navbar -->
+        <header class="h-14 bg-sidebar flex items-center justify-between px-4">
+          <div class="flex items-center gap-4">
+            <div class="h-8 w-8 rounded-lg bg-sidebar-primary text-sidebar-primary-foreground flex items-center justify-center font-bold">
+              A
+            </div>
+            <span class="text-base font-semibold text-sidebar-foreground">Acme Inc.</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <button class="p-2 rounded-lg hover:bg-sidebar-accent transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8"/>
+                <path d="m21 21-4.35-4.35"/>
+              </svg>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-sidebar-accent transition-colors">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/>
+                <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
+              </svg>
+            </button>
+            <button class="p-2 rounded-lg hover:bg-sidebar-accent transition-colors">
+              <img src="https://github.com/shadcn.png" alt="User" class="h-7 w-7 rounded-lg object-cover" />
+            </button>
+          </div>
+        </header>
+
+        <!-- Content Area with Sidebar -->
+        <div class="flex-1 flex overflow-hidden">
+          <%= render M9sh::SidebarProviderComponent.new(background: :sidebar) do %>
+            <%= render M9sh::SidebarComponent.new(collapsible: :none, show_border: false) do |sidebar| %>
+              <% sidebar.with_sidebar_content do %>
+                <div class="px-2 py-2">
+                  <div class="space-y-1">
+                    <a href="#" class="flex items-center gap-3 px-3 py-2 text-sm font-medium rounded-lg bg-sidebar-accent">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect width="7" height="9" x="3" y="3" rx="1"/>
+                        <rect width="7" height="5" x="14" y="3" rx="1"/>
+                        <rect width="7" height="9" x="14" y="12" rx="1"/>
+                        <rect width="7" height="5" x="3" y="16" rx="1"/>
+                      </svg>
+                      <span>Dashboard</span>
+                    </a>
+                    <!-- More navigation items -->
+                  </div>
+                </div>
+              <% end %>
+            <% end %>
+            <%= render M9sh::SidebarInsetComponent.new do %>
+              <%= render M9sh::MainComponent.new do %>
+                <header class="flex h-14 shrink-0 items-center gap-2 px-4 border-b">
+                  <h1 class="text-lg font-semibold">Dashboard Overview</h1>
+                </header>
+                <div class="flex-1 overflow-auto p-6">
+                  <!-- Your content here -->
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    CODE
+  end
+
+  def dropdown_menu_usage_code
+    <<~'CODE'
+      <%= render M9sh::DropdownMenuComponent.new do %>
+        <%= render M9sh::DropdownMenuTriggerComponent.new do %>
+          Open Menu
+        <% end %>
+        <%= render M9sh::DropdownMenuContentComponent.new do %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            Menu Item
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def dropdown_menu_default_code
+    <<~'CODE'
+      <%= render M9sh::DropdownMenuComponent.new do %>
+        <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border") do %>
+          Open
+        <% end %>
+        <%= render M9sh::DropdownMenuContentComponent.new do %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            Profile
+          <% end %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            Settings
+          <% end %>
+          <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            Logout
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def dropdown_menu_with_icons_code
+    <<~'CODE'
+      <%= render M9sh::DropdownMenuComponent.new do %>
+        <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border") do %>
+          Open Menu
+        <% end %>
+        <%= render M9sh::DropdownMenuContentComponent.new do %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
+              <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
+              <circle cx="12" cy="7" r="4"/>
+            </svg>
+            Profile
+          <% end %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
+              <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+              <circle cx="12" cy="12" r="3"/>
+            </svg>
+            Settings
+          <% end %>
+          <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
+              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+              <polyline points="16 17 21 12 16 7"/>
+              <line x1="21" y1="12" x2="9" y2="12"/>
+            </svg>
+            Logout
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def dropdown_menu_with_separators_code
+    <<~'CODE'
+      <%= render M9sh::DropdownMenuComponent.new do %>
+        <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border") do %>
+          Options
+        <% end %>
+        <%= render M9sh::DropdownMenuContentComponent.new do %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            New Tab
+          <% end %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            New Window
+          <% end %>
+          <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            History
+          <% end %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            Downloads
+          <% end %>
+          <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            Settings
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def dropdown_menu_alignment_code
+    <<~'CODE'
+      <%= render M9sh::DropdownMenuComponent.new(align: "start") do %>
+        <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border") do %>
+          Align Start
+        <% end %>
+        <%= render M9sh::DropdownMenuContentComponent.new do %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            Item 1
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <%= render M9sh::DropdownMenuComponent.new(align: "end") do %>
+        <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border") do %>
+          Align End
+        <% end %>
+        <%= render M9sh::DropdownMenuContentComponent.new do %>
+          <%= render M9sh::DropdownMenuItemComponent.new do %>
+            Item 1
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end