shadcn-ui 0.0.2 → 0.0.3

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

@@ -2,7 +2,7 @@
   role="alert"
   class="<%= alert_classes %> relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4">
   <!--prettier-ignore-->
-  <% case variant %>
+  <% case variant.to_sym %>
   <% when :default %>
   <svg
     xmlns="http://www.w3.org/2000/svg"
@@ -22,7 +22,19 @@
       y1="19"
       y2="19"></line>
   </svg>
-  <% when :error, :alert %>
+  <% when :info %>
+  <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>
+  <% when :success %>
+  <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>
+  <% when :attention %>
+  <svg class="h-4 w-4 text-yellow-400" 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>
+  <% when :error, :destructive, :danger, :alert %>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -49,7 +61,7 @@
       y1="16"
       y2="16"></line>
   </svg>
-  <% end %>
+  <% end if icon %>
   <h5 class="mb-1 font-medium leading-none tracking-tight"><%= title %></h5>
   <div class="text-sm [&_p]:leading-relaxed"><%= description %></div>
 </div>

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

@@ -8,7 +8,8 @@
       value="on"
       class="peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
       for="<%= name %>"
-      data-action="click->ui--checkbox#toggle">
+      data-action="click->ui--checkbox#toggle"
+      id="<%= options[:id] %>">
       <span
         class="flex items-center justify-center text-current hidden"
         style="pointer-events: none">

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

@@ -6,11 +6,7 @@
     class="flex items-center justify-between space-x-4 px-4"
     data-action="click->ui--collapsible#toggle">
     <h4 class="text-sm font-semibold"><%= trigger %></h4>
-    <button
-      class="inline-flex items-center justify-center 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 hover:bg-accent hover:text-accent-foreground h-9 rounded-md w-9 p-0"
-      type="button"
-      aria-expanded="false"
-      data-state="closed">
+    <%= render_button variant: :ghost, data: {state: "closed"}, aria: {expanded: false}, class: "px-[0.75em] " do %>
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="24"
@@ -26,7 +22,7 @@
         <path d="m7 9 5-5 5 5"></path>
       </svg>
       <span class="sr-only">Toggle</span>
-    </button>
+    <% end %>
   </div>
   <%= yield :preview %>
   <div

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

@@ -9,7 +9,7 @@
     data-ui--sheet-target="dialog"
     class="data-[state=closed]:hidden data-[state=open]:block fixed z-50 gap-4 bg-background p-6 shadow-lg
         transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500
-        inset-y-0 <%= options[:direction] %>-0 h-full <%= options[:width] %> border-l data-[state=closed]:slide-out-to-<%= options[:direction] %> data-[state=open]:slide-in-from-<%= options[:direction] %> sm:max-w-sm" tabindex="-1"
+        inset-y-0 <%= direction_class(options[:direction]) %> h-full <%= options[:width] %> border-l data-[state=closed]:slide-out-to-<%= options[:direction] %> data-[state=open]:slide-in-from-<%= options[:direction] %> sm:max-w-sm" tabindex="-1"
     style="pointer-events: auto">
       <div data-ui--sheet-target="content"><%= content_for(:sheet_content) %></div>
       <button

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

@@ -0,0 +1 @@
+# Component Generators

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

@@ -13,3 +13,25 @@ Pick the components you need. Copy and paste the code into your project and cust
 The code is yours.
 
 _Use this as a reference to build your own component libraries._
+
+## What?
+
+### The Application
+
+The [repository for this library](https://github.com/aviflombaum/shadcn-rails) is both a gem and an
+example repository containing this documentation. AFAIK there is no consequence in terms of bloat to
+packaging and entire functional rails app within a gem, especially given the app has very few
+dependencies, no database, and is generally very small. The benefit is that you can run the app
+locally and see the components in action by booting up the application with `./bin/dev/` and going
+to localhost. In fact, this website is running the application within the gem right now.
+
+The benefit of this is that it gives you a working application from which to modify and copy the raw
+files for each component. The end goal of the gem is to simply copy working code from this
+application into your app so that you take ownership over the component and can customize it to your
+needs without any unnecessary abstraction.
+
+### The Gem
+
+The gem provides a generator for you to use in your application to facilitate copying the code from
+this application to yours. It also enforces some setup for you as the component files alone in
+isolation won't always work. [Learn more about the generator](/documentation/generators).

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

@@ -1,4 +1,126 @@
-# Alpha Usage/Installation
+# Installation
+
+The more automated way to install the components into your application is via the gem packaged
+within this application. The gem provides generators that will setup your applications as best as
+possible without potentially overwriting any existing code as well as copy components and their
+dependencies to your application.
+
+## Add the Gem
+
+First step is adding the gem to your gemfile.
+
+```sh
+bundle add shadcn-ui
+bundle install
+```
+
+## Install and Setup Dependencies
+
+### TailwindCSS
+
+The components need a few things in order to render and function properly
+
+1. Tailwindcss must be installed in your application. If it's not already, I recommend just using
+   the `tailwindcss-rails` gem and running its installer to bootstrap your application with
+   TailwindCSS.
+
+2. A few tailwindcss npm packages are required by the theme and the best way to get them is to add
+   them to your package.json or even if you're application doesn't use node packages because you use
+   importmaps or something else, having a package.json will still work only to allow the tailwind
+   cli to compile the themes. The easiest way I've found to include everything you need is by
+   including only one package that will include the rest of them, `tailwind-animate`. Create a
+   package.json if you need via `echo '{}' >> package.json`.
+
+```
+npm install -D tailwind-animate
+```
+
+These are the requirements if you want to add them individually:
+
+```
+@tailwindcss/forms
+@tailwindcss/aspect-ratio
+@tailwindcss/typography
+@tailwindcss/container-queries
+tailwindcss-animate
+```
+
+### shadcn CSS - Required
+
+#### shadcn.css
+
+These steps were not automated and are required to be done manually.
+
+The components also require a few CSS variables to be set in order to render properly. It's a two
+step process, first, the gem installation should have added `app/assets/stylesheets/shadcn.css` to
+your application. You need to make sure this is included within `application.tailwind.css`, which
+should have happened automatically, but double check.
+
+```
+@import "shadcn.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+#### shadcn.tailwind.js
+
+The installation also should have added a `config/shadcn.tailwind.js` file to your application. This
+file is required to be included in your `tailwind.config.js` file. The best way to include it is to
+`require` it in your `tailwind.config.js` file and expand the configuration settings. This is what a
+newly setup `tailwind.config.js` file should look like after the inclusion of the
+`shadcn.tailwind.js` settings.
+
+```js
+const defaultTheme = require("tailwindcss/defaultTheme");
+const shadcnConfig = require("./shadcn.tailwind.js");
+
+module.exports = {
+  content: [
+    "./public/*.html",
+    "./app/helpers/**/*.rb",
+    "./app/javascript/**/*.js",
+    "./app/views/**/*.{erb,haml,html,slim}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/container-queries"),
+  ],
+  ...shadcnConfig,
+};
+```
+
+You could also just use the shadcnConfig as the default Tailwind settings needed are also defined
+there..
+
+```js
+const shadcnConfig = require("./shadcn.tailwind.js");
+
+module.exports = {
+  ...shadcnConfig,
+};
+```
+
+After that feel free to add further customizatios to your tailwind config. For an existing tailwind
+config, just add shadcnConfig to the end of the config object. It will override any settings needed
+by being at the end. And obviously feel free to inspect shadcnConfig and keep only what's reui
+
+## End
+
+That's it! You are now set to start
+[installing components via the generator]("/documentation/generators") and rendering them into your
+views.
+
+# Manual Installation
 
 Prior to the initial gem release, you can use this as an alpha by cloning this repository and
 starting up the app as you would a standard rails app.
@@ -220,7 +342,7 @@ Add the following to your app/assets/stylesheets/application.tailwind.css file.
 }
 ```
 
-### Copy a a component's files to your application
+### Copy Component Files
 
 For example, if you want to use the Accordion component, you would copy the following files to your
 application:
@@ -247,3 +369,9 @@ See the component's demo page in `app/views/examples/components/accordion.html.e
 examples.
 
 This will be similar for each component.
+
+# Conclusion
+
+You can freely mix and match both styles as your application evolves. The end goal of each of them
+is to get the component code into your application so you can further customize and take ownership
+of your design system.

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

@@ -0,0 +1,15 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Accordion component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/accordion_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_accordion.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/accordion_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_accordion") %> defined in <%= code("app/helpers/components/accordion_helper.rb") %>
+accepts a <%= code("title:") %> and <%= code("description:") %> keyword arguments in the inline usage.</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">When passed only a <%= code("title") %> argument, the helper will accept a block to be rendered as the content for the description.</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">When passed no arguments, the block passed to the accordion helper must call <%= code("accordion_title") %> and <%= code("accordion_description") %> both of which accept blocks for the content for those portals within the component.</p>

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

@@ -0,0 +1,8 @@
+<%= render_accordion do %>
+  <%= accordion_title do %>
+    <em>If you need to customize the title</em>
+  <% end %>
+  <%= accordion_description do %>
+    Use the full block format.
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= render_accordion title: "Embed components in the description of an accordion" do %>
+  <%= accordion_description do %>
+    <%= render_card title: "A Simple Card", class: "w-full" do %>
+      <p class="p-6">But it could be anything really, give it a try.</p>
+    <% end %>
+  <% end %>
+<% end %>

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

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

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

@@ -0,0 +1,16 @@
+# Inline
+<%= render_accordion(title:, :description) %>
+
+# Description Block
+<%= render_accordion(title:) do %>
+
+<% end %>
+
+# Title and Description Block
+<% render_accordion do %>
+  <%= content_for :title do e%>
+  <% end %>
+
+  <%= content_for :description do e%>
+  <% end %>
+<% end %>

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

@@ -10,8 +10,44 @@
 </div>
 <% end %>
 
+<% content_for :code, flush: true do %>
+  <%= code_partial("accordion/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 accodordion
+<% 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("accordion/code/usage", :erb) %>
+
+<%= render_usage("accordion") %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render "examples/components/accordion/code/description" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("accordion/code/_description.html", :erb) %>
+<% end %>
+
+<%= render_example %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render "examples/components/accordion/code/block" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("accordion/code/_block.html", :erb) %>
+<% end %>
+
+<%= render_example %>

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

@@ -0,0 +1,10 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Alert component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/alert_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_alert.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_alert") %> defined in <%= code("app/helpers/components/alert_helper.rb") %>
+accepts a <%= code("title:") %> and <%= code("description:") %> required keyword arguments along with an optional <%= code("variant:") %> argument for the kind of alert to render. Skip the icon by setting the optional argument <%= code("icon:") %> to <%= code("false") %>.</p>

data/app/views/examples/components/alert/code/_attention.erb

@@ -0,0 +1,3 @@
+
+<%= render_alert(variant: :attention, title: "Attention",
+    description: "This variant is :attention") %>

data/app/views/examples/components/alert/code/_destructive.erb

@@ -0,0 +1,2 @@
+<%= render_alert(variant: :error, title: "Error",
+    description: "This variant is :error, :danger, :alert, :destructive") %>

data/app/views/examples/components/alert/code/_info.erb

@@ -0,0 +1,3 @@
+
+<%= render_alert(variant: :info, title: "Info",
+    description: "This variant is :info") %>

data/app/views/examples/components/alert/code/_no_icon.erb

@@ -0,0 +1,3 @@
+<% %><%= render_alert icon: false,
+      title: "Skip the Icon",
+      description: "By setting icon: to false in your render_alert call." %>

data/app/views/examples/components/alert/code/_success.erb

@@ -0,0 +1,3 @@
+
+<%= render_alert(variant: :success, title: "Success",
+    description: "This variant is :success") %>

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

@@ -0,0 +1,2 @@
+<%= render_alert title: "Did you know?",
+      description: "You can wrap shadcn helpers in any component library you want!" %>

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

@@ -0,0 +1 @@
+<%= render_alert title:, description:, variant: %>

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

@@ -4,19 +4,102 @@
   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
+  <div class="w-full">
+    <%= render_alert title: "Did you know?", description: "You can wrap shadcn helpers in any
   component library you want!" %>
-</div>
+  </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/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 accodordion
+<% 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) %>
+
+<%= 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/code/_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/code/_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/code/_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/code/_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/code/_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

@@ -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) %>