shadcn-ui 0.0.3 → 0.0.4

data/app/views/components/ui/_card.html.erb

@@ -8,6 +8,12 @@
     <% end %>
   </div>
   <% end %>
-  <div class="p-0 <%= "p-6 pt-0" if !block && title %> <%= "p-6" if !block && !title %> "><%= body %></div>
+  <% if !block && !title %>
+    <%= content_tag( :div, class: "p-6" ){ body } %>
+  <% elsif !block %>
+    <%= content_tag( :div, class: "px-6" ){ body } %>
+  <% else %>
+    <%= body %>
+  <% end %>
   <% if footer %><footer class="mx-6 mb-6"><%= footer %></footer><% end %>
 </div>

data/app/views/components/ui/_filter.html.erb

@@ -1,7 +1,7 @@
 <div data-controller="ui--filter">
 <%= render_card do %>
   <div class="flex items-center">
-    <%= content_for :filter_icon %>
+  <%= content_for :filter_icon %>
   <%= render_input name: "filter", placeholder: "Filter items...", style: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %></div>
   <%= render_separator %>
   <div class="<%= options[:class] %>">
@@ -12,3 +12,4 @@
     end %>
   </div>
 <% end %>
+</div>

data/app/views/documentation/generators.html.md

@@ -1 +1,21 @@
 # Component Generators
+
+The gem adds generators to your application to help you copy the code from this application into
+yours.
+
+Each time you run the generator it will check to make sure you have the prerequisites, like Tailwind
+and the shadcn stylesheet, and if not, do its best to reconcile that for you.
+
+After that it will copy the component files into your application. If you edit the component,
+re-running the generator for it will remove your edits. **Re-running a component generator is
+basically reinstalling it and overwriting any changes you might have made.**
+
+The generator will show up in `rails g` and it is called `shadcn-ui`
+
+## Usage
+
+```
+rails generate shadcn-ui <component_name>
+```
+
+You can list out the available components from `rails g shadcn-ui`.

data/app/views/documentation/helpers.html.md

@@ -0,0 +1,54 @@
+# Component Helpers
+
+The main entry point to using the component is always a `render_<component>` method defined in the
+helper located in `app/helpers/components/<component>_helper.rb`.
+
+The main responsibility of the component's render method is to ultimatelly render the component's
+partial, located in `app/views/components/ui/_<component>.html.erb`.
+
+The component partial generally will integrate all the content passed to the component helper,
+whether through arguments or blocks.
+
+The render helper generally takes a hash of arguments, and a block. The arguments are used for
+required values for the HTML or for the content. Blocks generally correspond to inner content or
+sections for the component.
+
+<%= code_partial("dialog/usage", :erb) %>
+
+Here the `render_dialog` helper takes a block, and the block is used to render the `dialog_trigger`
+within the corresponding DOM along with the `dialog_content` as a sibling.
+
+Inner content is generally rendered with a `content_for` call, and the component render method will
+yield to the block, capture the content, and pass it along to the main partial.
+
+```ruby
+module Components::DialogHelper
+  def render_dialog(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/dialog", content: content, **options
+  end
+
+  def dialog_trigger(&block)
+    content_for :dialog_trigger, capture(&block), flush: true
+  end
+
+  def dialog_content(&block)
+    content_for :dialog_content, capture(&block), flush: true
+  end
+end
+```
+
+That is a pretty standard example of how the components work. The component partial is responsible
+for the end result HTML.
+
+## Options
+
+Most of the components accept a variaty of DOM/HTML/Data related options. Sometimes these are
+explcitly defined in the render method, and sometimes they are globed as an `**options` argument.
+This should be standardized. As much as possible, I've tried to ensure that these are correctly
+accounted for and passed along to the final html/dom elements, but I imagine that is not the case
+everywhere. **Would love it if you raised an issue when you find this.**
+
+## Standardiziation
+
+As I add more components and see edge cases, I will move to standardizing the API.

data/app/views/documentation/javascript.html.md

@@ -0,0 +1,8 @@
+# Stimulus Controllers
+
+Many components are paired with a stimulus controller that lives in
+`app/javascript/controllers/ui/<component>_controller.js`. As much as possible I try to avoid adding
+depedencies and currently this application is managing them with importmaps and I'm pretty sure if
+you're not using importmaps, this breaks.
+
+The Stimulus controllers frankly need a lot of work.

data/app/views/examples/components/accordion.html.erb

@@ -4,14 +4,12 @@
 
 <% content_for :preview, flush: true do %>
 <div class="w-full">
-  <%= render_accordion title: "Did you know?", description: "You can wrap shadcn helpers in any
-  component library you want!" %>
-  <%= render_accordion title: "Use the generators.", description: "Add components with #{code("rails g shadcn_ui add accordion")}".html_safe %>
+  <%= render_code_preview('accordion') %>
 </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("accordion/code/preview", :erb) %>
+  <%= code_partial("accordion/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -24,7 +22,7 @@ rails generate shadcn-ui accodordion
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage"><a href="/docs/components/dialog#usage">Usage</a></h2>
 
-<%= code_partial("accordion/code/usage", :erb) %>
+<%= code_partial("accordion/usage", :erb) %>
 
 <%= render_usage("accordion") %>
 
@@ -35,7 +33,7 @@ rails generate shadcn-ui accodordion
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("accordion/code/_description.html", :erb) %>
+  <%= code_partial("accordion/description.html", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -47,7 +45,7 @@ rails generate shadcn-ui accodordion
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("accordion/code/_block.html", :erb) %>
+  <%= code_partial("accordion/block.html", :erb) %>
 <% end %>
 
 <%= render_example %>

data/app/views/examples/components/alert-dialog/code/_preview.erb

@@ -0,0 +1,6 @@
+<%= render_alert_dialog(
+  trigger: render_button("Open Dialog", variant: :outline, data: {action: "ui--dialog#open" }),
+  continue: render_button("Continue"),
+  label: "Are you absolutely sure?",
+  description: "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
+) %>

data/app/views/examples/components/alert-dialog.html.erb

@@ -3,22 +3,19 @@
   title: "Alert Dialog",
   description: "A modal dialog that interrupts the user with important content and expects a response." %>
 
-<%= content_for :preview, flush: true do %>
-<div class="w-full flex justify-center">
-  <!--prettier-ignore-->
+<% content_for :preview, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('alert-dialog') %>
+  </div>
+<% end %>
 
-  <!--prettier-ignore-->
-  <%= render_alert_dialog(
-    trigger: render_button("Open Dialog", variant: :outline, data: {action: "ui--dialog#open" }),
-    continue: render_button("Continue"),
-    label: "Are you absolutely sure?",
-    description: "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
-  ) %>
-</div>
+<% content_for :code, flush: true do %>
+  <%= code_partial("alert-dialog/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
 
+
 <h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage"><a href="/docs/components/dialog#usage">Usage</a></h2>

data/app/views/examples/components/alert.html.erb

@@ -5,25 +5,24 @@
 
 <% content_for :preview, flush: true do %>
   <div class="w-full">
-    <%= render_alert title: "Did you know?", description: "You can wrap shadcn helpers in any
-  component library you want!" %>
+    <%= render_code_preview('alert') %>
   </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/preview", :erb) %>
+  <%= code_partial("alert/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
 
 <h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
 <%= code_sample(language: "sh") do %>
-  rails generate shadcn-ui accodordion
+rails generate shadcn-ui alert
 <% end %>
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage"><a href="/docs/components/dialog#usage">Usage</a></h2>
 
-<%= code_partial("alert/code/usage", :erb) %>
+<%= code_partial("alert/usage", :erb) %>
 
 <%= render_usage("alert") %>
 
@@ -40,7 +39,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_success", :erb) %>
+  <%= code_partial("alert/success", :erb) %>
 <% end %>
 <%= render_example %>
 
@@ -57,7 +56,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_info", :erb) %>
+  <%= code_partial("alert/info", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -75,7 +74,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_attention", :erb) %>
+  <%= code_partial("alert/attention", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -87,7 +86,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_destructive", :erb) %>
+  <%= code_partial("alert/destructive", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -99,7 +98,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_no_icon", :erb) %>
+  <%= code_partial("alert/no_icon", :erb) %>
 <% end %>
 
 <%= render_example %>

data/app/views/examples/components/badge.html.erb

@@ -5,23 +5,11 @@
   description: "Displays a badge or a component that looks like a badge." %>
 
 <%= content_for :preview, flush: true do %>
-<div class="w-full mx-auto flex justify-center"><%= render_badge text: "Badge" %></div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Secondary", variant: :secondary %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Destructive", variant: :destructive %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Outline", variant: :outline %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Ghost", variant: :ghost %>
-</div>
+  <%= render_code_preview('badge') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("badge/code/preview", :erb) %>
+  <%= code_partial("badge/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -32,6 +20,6 @@
 <% end %>
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage">Usage</h2>
-<%= code_partial("badge/code/usage", :erb) %>
+<%= code_partial("badge/usage", :erb) %>
 
 <%= render_usage("badge") %>

data/app/views/examples/components/button.html.erb

@@ -5,33 +5,11 @@
   description: "Displays a button or a component that looks like a button." %>
 
 <%= content_for :preview, flush: true do %>
-<div class="w-full mx-auto flex justify-center"><%= render_button "Button" %></div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button variant: :secondary do %>
-  <svg class="h-4 w-4 mr-2 text-primary" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
-    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path>
-  </svg> Secondary with Icon
-  <% end %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Destructive", variant: :destructive %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Outline", variant: :outline %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Ghost", variant: :ghost %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button "Link", as: :link, href: "/" %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Ghost Link", variant: :ghost, as: :link %>
-</div>
+  <%= render_code_preview('button') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("button/code/preview", :erb) %>
+  <%= code_partial("button/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -42,6 +20,6 @@
 <% end %>
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage">Usage</h2>
-<%= code_partial("button/code/usage", :erb) %>
+<%= code_partial("button/usage", :erb) %>
 
 <%= render_usage("button") %>

data/app/views/examples/components/card/code/{preview.erb → _preview.erb}

@@ -1,6 +1,6 @@
 <%= render_card body: "The Most Basic of Cards" %>
 
 <%= render_card title: "Did you know?",
-      subtitle: "This is kinda cool."
+      subtitle: "This is kinda cool.",
       body: "You can embed any HTML in the body with a block.",
       footer: "Have a great day!" %>

data/app/views/examples/components/card.html.erb

@@ -4,15 +4,11 @@
   description: "Displays a card with header, content, and footer." %>
 
 <%= content_for :preview, flush: true do %>
-  <div class="w-full flex justify-center"><%= render_card body: "The Most Basic of Cards" %></div>
-  <div class="w-full flex justify-center">
-    <%= render_card title: "Did you know?", body: "You can embed any HTML in the body of a card by
-    yielding to a block for the body?", subtitle: "This is important.", footer: "Have a great day!" %>
-  </div>
+  <%= render_code_preview('card') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("card/code/preview", :erb) %>
+  <%= code_partial("card/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -23,7 +19,7 @@
 <% end %>
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage">Usage</h2>
-<%= code_partial("card/code/usage", :erb) %>
+<%= code_partial("card/usage", :erb) %>
 
 <%= render_usage("card") %>
 
@@ -32,7 +28,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("card/code/_form", :erb) %>
+  <%= code_partial("card/form", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -42,7 +38,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("card/code/_notifications", :erb) %>
+  <%= code_partial("card/notifications", :erb) %>
 <% end %>
 
 <%= render_example %>

data/app/views/examples/components/checkbox/code/_preview.erb

@@ -0,0 +1,2 @@
+<%= render_checkbox name: "terms",
+      label: "Accept terms and conditions" %>

data/app/views/examples/components/checkbox.html.erb

@@ -2,11 +2,11 @@
       description: "A control that allows the user to toggle between checked and not checked." %>
 
 <%= content_for :preview, flush: true do %>
-  <%= render_checkbox label: "Accept terms and conditions", name: "terms" %>
+  <%= render_code_preview('checkbox') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("checkbox/code/preview", :erb) %>
+  <%= code_partial("checkbox/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -17,6 +17,6 @@
 <% end %>
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage">Usage</h2>
-<%= code_partial("checkbox/code/usage", :erb) %>
+<%= code_partial("checkbox/usage", :erb) %>
 
 <%= render_usage("checkbox") %>

data/app/views/examples/components/collapsible.html.erb

@@ -5,20 +5,12 @@
 
 <%= content_for :preview, flush: true do %>
 <div class="w-full flex justify-center">
-  <%= render_collapsible trigger: "@peduarte starred 3 repositories" do %>
-    <% collapsible_preview do %>
-      <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
-    <% end %>
-    <% collapsible_body do %>
-      <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
-      <div class="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
-    <% end %>
-  <% end %>
+  <%= render_code_preview('collapsible') %>
 </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("collapsible/code/preview", :erb) %>
+  <%= code_partial("collapsible/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -29,6 +21,6 @@
 <% end %>
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage">Usage</h2>
-<%= code_partial("collapsible/code/usage", :erb) %>
+<%= code_partial("collapsible/usage", :erb) %>
 
 <%= render_usage("collapsible") %>

data/app/views/examples/components/dialog.html.erb

@@ -3,21 +3,12 @@
 
 <% content_for :preview, flush: true do %>
   <div class="w-full flex justify-center">
-    <%= render_dialog do %>
-      <%= dialog_trigger do %>
-        <%= render_button("Open Typography", variant: :outline) %>
-      <% end %>
-      <%= dialog_content do %>
-        <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">The King's Plan</h2>
-        <p class="leading-7 [&:not(:first-child)]:mt-6">The king thought long and hard, and finally came up with <a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>: he would tax the jokes in the kingdom.</p>
-        <blockquote class="mt-6 border-l-2 pl-6 italic">"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."</blockquote>
-      <% end %>
-    <% end %>
+    <%= render_code_preview('dialog') %>
   </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("dialog/code/preview", :erb) %>
+  <%= code_partial("dialog/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -30,7 +21,7 @@ rails generate shadcn_ui dialog
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage"><a href="/docs/components/dialog#usage">Usage</a></h2>
 
-<%= code_partial("dialog/code/usage", :erb) %>
+<%= code_partial("dialog/usage", :erb) %>
 
 <%= render_usage("dialog") %>
 
@@ -81,7 +72,7 @@ rails generate shadcn_ui dialog
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("dialog/code/notifications", :erb) %>
+  <%= code_partial("dialog/notifications", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -139,7 +130,7 @@ rails generate shadcn_ui dialog
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("dialog/code/form", :erb) %>
+  <%= code_partial("dialog/form", :erb) %>
 <% end %>
 
 <%= render_example %>

data/app/views/examples/components/dropdown-menu/_usage.html.erb

@@ -0,0 +1,19 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Dropdown Menu component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/dropdown_menu_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_dropdown_menu.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/dropdown-menu_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_dropdown_menu") %> defined in <%= code("app/helpers/components/dropdown_menu_helper.rb") %>
+accepts a block for the two inner components, <%= code("dropdown_menu_trigger") %> and <%= code("dropdown_menu_content") %>. Each of those accepts a block for their respective content.</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+Within the <%= code("dropdown_menu_content") %> block, you can use the following methods:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("dropdown_menu_label") %> - accepts an argument for the label section of the dropdown menu. This is optional.</li>
+  <li><%= code("dropdown_menu_item") %> - an arbitrary amount of these can be used for each menu item you want to include. This method either accepts a string or a block for the content you want.</li>
+</ul>

data/app/views/examples/components/dropdown-menu/code/_preview.erb

@@ -0,0 +1,19 @@
+<% render_dropdown_menu do %>
+  <%= dropdown_menu_trigger do %>
+    <%= render_button "Open Dropdown", variant: :outline %>
+  <% end %>
+
+  <%= dropdown_menu_content do %>
+    <%= dropdown_menu_label "My Account" %>
+    <%= render_separator class: "my-1" %>
+    <%= dropdown_menu_item "Profile" %>
+    <%= dropdown_menu_item  do %>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
+        <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
+      </svg>
+      <span>Billing</span>
+      <span class="ml-auto text-xs tracking-widest opacity-60">⌘B</span>
+    <% end %>
+    <%= dropdown_menu_item "Settings" %>
+  <% end %>
+<% end %>

data/app/views/examples/components/dropdown-menu/code/_usage.erb

@@ -0,0 +1,13 @@
+<% render_dropdown_menu do %>
+  <%= dropdown_menu_trigger do %>
+  <% end %>
+
+  <%= dropdown_menu_content do %>
+    <%= dropdown_menu_label %>
+
+    <%= dropdown_menu_item %>
+    <%= dropdown_menu_item do %>
+    <% end %>
+    <%= dropdown_menu_item %>
+  <% end %>
+<% end %>

data/app/views/examples/components/dropdown-menu.html.erb

@@ -3,24 +3,38 @@
 
 <%= content_for :preview, flush: true do %>
   <% render_dropdown_menu do %>
-      <%= dropdown_menu_trigger do %>
-        <%= render_button "Open Dropdown", variant: :outline %>
-      <% end %>
+    <%= dropdown_menu_trigger do %>
+      <%= render_button "Open Dropdown", variant: :outline %>
+    <% end %>
 
-      <%= dropdown_menu_content do %>
-        <%= dropdown_menu_label "My Account" %>
-        <%= render_separator class: "my-1" %>
-        <%= dropdown_menu_item "Profile" %>
-        <%= dropdown_menu_item  do %>
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
-            <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
-          </svg>
-          <span>Billing</span>
-          <span class="ml-auto text-xs tracking-widest opacity-60">⌘B</span>
-        <% end %>
-        <%= dropdown_menu_item "Settings" %>
+    <%= dropdown_menu_content do %>
+      <%= dropdown_menu_label "My Account" %>
+      <%= render_separator class: "my-1" %>
+      <%= dropdown_menu_item "Profile" %>
+      <%= dropdown_menu_item  do %>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 h-4 w-4">
+          <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
+        </svg>
+        <span>Billing</span>
+        <span class="ml-auto text-xs tracking-widest opacity-60">⌘B</span>
       <% end %>
+      <%= dropdown_menu_item "Settings" %>
     <% end %>
+  <% end %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("dropdown-menu/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
+
+<h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui dropdown-menu
+<% end %>
+
+<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage">Usage</h2>
+<%= code_partial("dropdown-menu/usage", :erb) %>
+
+<%= render_usage("dropdown-menu") %>

data/app/views/examples/components/filter/_usage.html.erb

@@ -0,0 +1,14 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Filter component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/filter_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_filter.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/filter_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_filter") %> method accepts one mandtory argument, an array of hashes that each have a <%= code("value") %> and name <%= code("name") %>.</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">You can optionally also call <%= code("filter_icon") %> within a block passed to <%= code("render_filter") %> to render an icon to the left of the filter input.</p>
+
+<p>This component gets used in the Combobox and Command components as well as potentially others.</p>