shadcn-ui 0.0.1 → 0.0.3

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

@@ -18,13 +18,20 @@
 <div class="w-full mx-auto flex justify-center">
   <%= render_badge text: "Ghost", variant: :ghost %>
 </div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Ghost Link", variant: :ghost, as: :link %>
-</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("badge/code/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 badge
+<% 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) %>
 
-<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>
+<%= render_usage("badge") %>

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

@@ -0,0 +1,19 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Button component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/button_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_button.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+
+<p>The method <%= code("render_button") %> defined in <%= code("app/helpers/components/button_helper.rb") %>
+accepts a first argument for the text of the button or as a <%= code("text:") %> keyword argument.</p>
+
+<p>Optional arguments for the button include:
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("variant:") %>, including <%= code(":secondary") %>, <%= code(":destructive") %>, <%= code(":outline") %>, and <%= code(":ghost") %></li>
+  <li><%= code("as:") %> which allows the button to be rendered as a <%= code("<a>") %> tag.</li>
+  <li>A <%= code("block") %> can be passed to render the text including other elements such as icons.</li>
+</ul>

data/app/views/examples/components/button/code/preview.erb

@@ -0,0 +1,13 @@
+<%= render_button "Button" %>
+
+<%= 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 %>
+
+<%= render_button text: "Destructive", variant: :destructive %>
+<%= render_button text: "Outline", variant: :outline %>
+<%= render_button text: "Ghost", variant: :ghost %>
+<%= render_button "Link", as: :link, href: "/" %>
+<%= render_button text: "Ghost Link", variant: :ghost, as: :link %>

data/app/views/examples/components/button/code/usage.erb

@@ -0,0 +1,6 @@
+<%= render_button(label, text: nil,
+      variant: :default,
+      as: :button,
+      href: nil,
+      data: {},
+      **options, &block) %>

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

@@ -5,12 +5,13 @@
   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 text: "Button" %></div>
+<div class="w-full mx-auto flex justify-center"><%= render_button "Button" %></div>
 <div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Link", as: :link, href: "/" %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Secondary", variant: :secondary %>
+  <%= 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 %>
@@ -21,13 +22,26 @@
 <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>
 <% end %>
 
+<% content_for :code, flush: true do %>
+  <%= code_partial("button/code/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 button
+<% 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) %>
 
-<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>
+<%= render_usage("button") %>

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

@@ -0,0 +1,21 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Card component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/card_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_card.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+
+<p>The method <%= code("render_card") %> defined in <%= code("app/helpers/components/card_helper.rb") %>
+accepts optional keyword arguments for each section of content in the card, offering maximum flexibility. </p>
+
+<p>The sections are.</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("title:") %>, for the header of the card, will be rendered in a large bold font.</li>
+  <li><%= code("subtitle:") %> for a muted title under the main title..</li>
+  <li>A <%= code("body:") %> The main content section. Without providing either a keyword argument or a block, an empty card will be rendered.</li>
+</ul>
+
+<p><em>Note:</em> Padding to the body is applied logically leaving you to define it when a block is passed with the presence of a title, otherwise, a default padding is provided to simplify the markup. Feel free to edit this in <%= code("app/views/components/ui/_card.html.erb") %>,

data/app/views/examples/components/card/code/_form.erb

@@ -0,0 +1,72 @@
+<%= render_card title: "Card with Form" do %>
+<div class="p-6 pt-0">
+  <form>
+    <div class="grid w-full items-center gap-4">
+      <div class="flex flex-col space-y-1.5">
+        <label
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          for="name">Name</label><input
+          class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+          id="name"
+          placeholder="Name of your project">
+      </div>
+      <div class="flex flex-col space-y-1.5">
+        <label
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+          for="name">Framework</label><button
+          type="button"
+          role="combobox"
+          aria-controls="radix-:r76:"
+          aria-expanded="false"
+          aria-autocomplete="none"
+          dir="ltr"
+          data-state="closed"
+          data-placeholder=""
+          class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
+          <span style="pointer-events: none">Select</span><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="h-4 w-4 opacity-50"
+            aria-hidden="true">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg></button><select
+          aria-hidden="true"
+          tabindex="-1"
+          style="
+            position: absolute;
+            border: 0px;
+            width: 1px;
+            height: 1px;
+            padding: 0px;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0px, 0px, 0px, 0px);
+            white-space: nowrap;
+            overflow-wrap: normal;
+          ">
+          <option value=""></option>
+          <option value="next">Next.js</option>
+          <option value="sveltekit">SvelteKit</option>
+          <option value="astro">Astro</option>
+          <option value="nuxt">Nuxt.js</option>
+        </select>
+      </div>
+    </div>
+  </form>
+</div>
+<div class="items-center p-6 pt-0 flex justify-between">
+  <button
+    class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
+    Cancel</button><button
+    class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+    Deploy
+  </button>
+</div>
+<% end %>

data/app/views/examples/components/card/code/_notifications.erb

@@ -0,0 +1,61 @@
+<%= render_card title: "Notifications", footer: render_button(text: "Mark all as read", class:
+"w-full") do %>
+<div class="p-6 pt-0 grid gap-4">
+  <div class="flex items-center space-x-4 rounded-md border p-4">
+    <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="lucide lucide-bell-ring">
+      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
+      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
+      <path d="M4 2C2.8 3.7 2 5.7 2 8"></path>
+      <path d="M22 8c0-2.3-.8-4.3-2-6"></path>
+    </svg>
+    <div class="flex-1 space-y-1">
+      <p class="text-sm font-medium leading-none">Push Notifications</p>
+      <p class="text-sm text-muted-foreground">Send notifications to device.</p>
+    </div>
+    <button
+      type="button"
+      role="switch"
+      aria-checked="false"
+      data-state="unchecked"
+      value="on"
+      class="peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input">
+      <span
+        data-state="unchecked"
+        class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"></span>
+    </button>
+  </div>
+  <div>
+    <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+      <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+      <div class="space-y-1">
+        <p class="text-sm font-medium leading-none">Your call has been confirmed.</p>
+        <p class="text-sm text-muted-foreground">1 hour ago</p>
+      </div>
+    </div>
+    <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+      <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+      <div class="space-y-1">
+        <p class="text-sm font-medium leading-none">You have a new message!</p>
+        <p class="text-sm text-muted-foreground">1 hour ago</p>
+      </div>
+    </div>
+    <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+      <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+      <div class="space-y-1">
+        <p class="text-sm font-medium leading-none">Your subscription is expiring soon!</p>
+        <p class="text-sm text-muted-foreground">2 hours ago</p>
+      </div>
+    </div>
+  </div>
+</div>
+<% end %>

data/app/views/examples/components/card/code/preview.erb

@@ -0,0 +1,6 @@
+<%= render_card body: "The Most Basic of Cards" %>
+
+<%= render_card title: "Did you know?",
+      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/code/usage.erb

@@ -0,0 +1,3 @@
+<%= render(title: nil, subtitle: nil, body: nil, footer: nil:) do %>
+  <!-- Optional Body Block -->
+<% end %>

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

@@ -4,153 +4,45 @@
   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." %>
-</div>
-
-<div class="w-full flex justify-center">
-  <%= render_card title: "Card with Form" do %>
-  <div class="p-6 pt-0">
-    <form>
-      <div class="grid w-full items-center gap-4">
-        <div class="flex flex-col space-y-1.5">
-          <label
-            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            for="name">Name</label><input
-            class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-            id="name"
-            placeholder="Name of your project">
-        </div>
-        <div class="flex flex-col space-y-1.5">
-          <label
-            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            for="name">Framework</label><button
-            type="button"
-            role="combobox"
-            aria-controls="radix-:r76:"
-            aria-expanded="false"
-            aria-autocomplete="none"
-            dir="ltr"
-            data-state="closed"
-            data-placeholder=""
-            class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
-            <span style="pointer-events: none">Select</span><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="h-4 w-4 opacity-50"
-              aria-hidden="true">
-              <polyline points="6 9 12 15 18 9"></polyline>
-            </svg></button><select
-            aria-hidden="true"
-            tabindex="-1"
-            style="
-              position: absolute;
-              border: 0px;
-              width: 1px;
-              height: 1px;
-              padding: 0px;
-              margin: -1px;
-              overflow: hidden;
-              clip: rect(0px, 0px, 0px, 0px);
-              white-space: nowrap;
-              overflow-wrap: normal;
-            ">
-            <option value=""></option>
-            <option value="next">Next.js</option>
-            <option value="sveltekit">SvelteKit</option>
-            <option value="astro">Astro</option>
-            <option value="nuxt">Nuxt.js</option>
-          </select>
-        </div>
-      </div>
-    </form>
-  </div>
-  <div class="items-center p-6 pt-0 flex justify-between">
-    <button
-      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
-      Cancel</button><button
-      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
-      Deploy
-    </button>
-  </div>
-  <% end %>
-</div>
-<div class="w-full flex justify-center">
-  <%= render_card title: "Notifications", footer: render_button(text: "Mark all as read", class:
-  "w-full") do %>
-  <div class="p-6 pt-0 grid gap-4">
-    <div class="flex items-center space-x-4 rounded-md border p-4">
-      <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="lucide lucide-bell-ring">
-        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
-        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
-        <path d="M4 2C2.8 3.7 2 5.7 2 8"></path>
-        <path d="M22 8c0-2.3-.8-4.3-2-6"></path>
-      </svg>
-      <div class="flex-1 space-y-1">
-        <p class="text-sm font-medium leading-none">Push Notifications</p>
-        <p class="text-sm text-muted-foreground">Send notifications to device.</p>
-      </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked="false"
-        data-state="unchecked"
-        value="on"
-        class="peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input">
-        <span
-          data-state="unchecked"
-          class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"></span>
-      </button>
-    </div>
-    <div>
-      <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
-        <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
-        <div class="space-y-1">
-          <p class="text-sm font-medium leading-none">Your call has been confirmed.</p>
-          <p class="text-sm text-muted-foreground">1 hour ago</p>
-        </div>
-      </div>
-      <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
-        <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
-        <div class="space-y-1">
-          <p class="text-sm font-medium leading-none">You have a new message!</p>
-          <p class="text-sm text-muted-foreground">1 hour ago</p>
-        </div>
-      </div>
-      <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
-        <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
-        <div class="space-y-1">
-          <p class="text-sm font-medium leading-none">Your subscription is expiring soon!</p>
-          <p class="text-sm text-muted-foreground">2 hours ago</p>
-        </div>
-      </div>
-    </div>
+  <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>
-  <% end %>
-</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("card/code/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 card
+<% 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) %>
+
+<%= render_usage("card") %>
+
+<% content_for :examples, flush: true do %>
+  <%= render "examples/components/card/code/form" %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("card/code/_form", :erb) %>
+<% end %>
+
+<%= render_example %>
+
+<% content_for :examples, flush: true do %>
+  <%= render "examples/components/card/code/notifications" %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("card/code/_notifications", :erb) %>
+<% 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>
+<%= render_example %>

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

@@ -0,0 +1,9 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Checkbox component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/checkbox_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_checkbox.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/checkbox_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6"><%= code("render_checkbox") %> accepts two required arguments, one for the <%= code("name:") %> of the checkbox which will pair with <%= code("label:") %> of the checkbox. The toggle functionality is controller by <%= code("app/javascript/controllers/ui/checkbox_controller.js") %>.</p>

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/code/usage.erb

@@ -0,0 +1 @@
+<%= render_checkbox(label:, name:) %>

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

@@ -5,4 +5,18 @@
   <%= render_checkbox label: "Accept terms and conditions", name: "terms" %>
 <% end %>
 
+<% content_for :code, flush: true do %>
+  <%= code_partial("checkbox/code/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 checkbox
+<% 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) %>
+
+<%= render_usage("checkbox") %>

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

@@ -0,0 +1,16 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Collapsible component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/collapsible_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_collapsible.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/collapsible_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  Collapsible introduces the <%= code("render_collapsible") %> method that accepts an argument
+  <%= code("trigger:") %> which is the text you want to show that will trigger the collapsible menu and
+  a block. Within the block of collapsible, you can call <%= code("collapsible_preview") %> to
+  define an element that is visible from the collapsible menu via a block. Similarly, you can call
+  <%= code("collapsible_body") %> and pass it a block for the elements that are hidden that will be
+  made visible when the trigger is pressed.
+</p>

data/app/views/examples/components/collapsible/code/preview.erb

@@ -0,0 +1,9 @@
+<%= 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 %>

data/app/views/examples/components/collapsible/code/usage.erb

@@ -0,0 +1,7 @@
+<%= render_collapsible trigger: do %>
+  <% collapsible_preview do %>
+  <% end %>
+
+  <% collapsible_body do %>
+  <% end %>
+<% end %>

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

@@ -6,10 +6,10 @@
 <%= content_for :preview, flush: true do %>
 <div class="w-full flex justify-center">
   <%= render_collapsible trigger: "@peduarte starred 3 repositories" do %>
-    <% content_for :preview do %>
+    <% collapsible_preview do %>
       <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
     <% end %>
-    <% content_for :body do %>
+    <% 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 %>
@@ -17,8 +17,18 @@
 </div>
 <% end %>
 
+<% content_for :code, flush: true do %>
+  <%= code_partial("collapsible/code/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 collapsible
+<% 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) %>
 
-<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>
+<%= render_usage("collapsible") %>

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

@@ -25,7 +25,7 @@
 <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 dialog
+rails generate shadcn_ui dialog
 <% 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>

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

@@ -0,0 +1,25 @@
+<%
+  items = [{:value => "Ruby on Rails", name: "Ruby on Rails"}, {:value => "Next.js", name: "Next.js"}, {:value => "Remix.run", name: "Remix.run"}]
+%>
+
+<%= render_component_header title: "Filter",
+      description: "Displays a list that is filterable via the included input." %>
+
+<% content_for :preview, flush: true do %>
+  <div class="w-full flex justify-center">
+  <%= render_filter items, class: "p-1" do %>
+    <%= filter_icon 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 shrink-0 opacity-50 ml-2"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line></svg>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render_preview %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+  <%= render_filter items, class: "p-1" do %>
+  <% end %>
+<% end %>
+
+<%= render_example %>