shadcn-ui 0.0.2 → 0.0.4

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

@@ -4,19 +4,101 @@
   description: "Displays a callout for user attention" %>
 
 <% 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!" %>
-</div>
+  <div class="w-full">
+    <%= render_code_preview('alert') %>
+  </div>
+<% end %>
 
-<div class="w-full">
-  <%= render_alert(variant: :error, title: "Did you know?", description: "You can wrap shadcn
-  helpers in any component library you want!") %>
-</div>
+<% content_for :code, flush: true do %>
+  <%= 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 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/usage", :erb) %>
+
+<%= render_usage("alert") %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <div role="alert" class="border-success/50 text-success dark:border-success [&amp;>svg]:text-success relative w-full rounded-lg border p-4 [&amp;:has(svg)]:pl-11 [&amp;>svg+div]:translate-y-[-3px] [&amp;>svg]:absolute [&amp;>svg]:left-4 [&amp;>svg]:top-4">
+      <svg class="h-4 w-4 text-success" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path>
+      </svg>
+      <h5 class="mb-1 font-medium leading-none tracking-tight">Success</h5>
+      <div class="text-sm [&amp;_p]:leading-relaxed">This variant is :success</div>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("alert/success", :erb) %>
+<% end %>
+<%= render_example %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <div role="alert" class="border-info/50 text-info dark:border-info [&amp;>svg]:text-info relative w-full rounded-lg border p-4 [&amp;:has(svg)]:pl-11 [&amp;>svg+div]:translate-y-[-3px] [&amp;>svg]:absolute [&amp;>svg]:left-4 [&amp;>svg]:top-4">
+      <svg class="h-4 w-4 text-info" 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>
+      <h5 class="mb-1 font-medium leading-none tracking-tight">Info</h5>
+      <div class="text-sm [&amp;_p]:leading-relaxed">This variant is :info</div>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("alert/info", :erb) %>
+<% end %>
+
+<%= render_example %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <div role="alert" class="border-attention/50 text-attention dark:border-attention [&amp;>svg]:text-attention relative w-full rounded-lg border p-4 [&amp;:has(svg)]:pl-11 [&amp;>svg+div]:translate-y-[-3px] [&amp;>svg]:absolute [&amp;>svg]:left-4 [&amp;>svg]:top-4">
+      <svg class="h-4 w-4 text-attention" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
+      </svg>
+      <h5 class="mb-1 font-medium leading-none tracking-tight">Attention</h5>
+      <div class="text-sm [&amp;_p]:leading-relaxed">This variant is :attention</div>
+    </div>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("alert/attention", :erb) %>
+<% end %>
+
+<%= render_example %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render "examples/components/alert/code/destructive" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("alert/destructive", :erb) %>
+<% end %>
+
+<%= render_example %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render "examples/components/alert/code/no_icon" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("alert/no_icon", :erb) %>
+<% end %>
+
+<%= render_example %>

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

@@ -0,0 +1,10 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Badge component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/badge_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_badge.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_badge") %> defined in <%= code("app/helpers/components/badge_helper.rb") %>
+accepts a <%= code("text:") %> required keyword argument along with an optional <%= code("variant:") %> argument for the kind of badge to render.</p>

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

@@ -0,0 +1,5 @@
+<%= render_badge text: "Badge" %>
+<%= render_badge text: "Secondary", variant: :secondary %>
+<%= render_badge text: "Destructive", variant: :destructive %>
+<%= render_badge text: "Outline", variant: :outline %>
+<%= render_badge text: "Ghost", variant: :ghost %>

data/app/views/examples/components/badge/code/_usage.erb

@@ -0,0 +1 @@
+<%= render_badge text:, variant: %>

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

@@ -5,26 +5,21 @@
   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>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Ghost Link", variant: :ghost, as: :link %>
-</div>
+  <%= render_code_preview('badge') %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("badge/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/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,29 +5,21 @@
   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 text: "Link", as: :link, href: "/" %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Secondary", variant: :secondary %>
-</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 text: "Ghost Link", variant: :ghost, as: :link %>
-</div>
+  <%= render_code_preview('button') %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("button/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/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,41 @@
   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>
+  <%= render_code_preview('card') %>
+<% end %>
 
-<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>
-  <% end %>
-</div>
+<% content_for :code, flush: true do %>
+  <%= code_partial("card/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/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/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/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:) %>