shadcn-ui 0.0.1 → 0.0.3

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

@@ -0,0 +1,377 @@
+# 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.
+
+```sh
+git clone https://github.com/aviflombaum/shadcn-rails.git
+cd shadcn-rails
+bundle install
+./bin/dev
+```
+
+There are very few dependencies and no database so it should just boot up. Visit
+http://localhost:3000 to see the demo app which is also the documentation. You'll be able to browse
+the components at http://localhost:3000/components.
+
+If there's a component you want to try in your app, you will be copying the code from this app to
+yours. There's a few other steps you'll need.
+
+## Installing a Component
+
+### Add Tailwind CSS
+
+Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
+
+[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)
+
+### Add dependencies
+
+If you haven't already, install Tailwind into your rails application by adding `tailwindcss-rails`
+to your `Gemfile` and install tailwind into your app:
+
+```sh
+./bin/bundle add tailwindcss-rails
+./bin/rails tailwindcss:install
+```
+
+Then install ./bin/rails tailwindcss:install
+
+### Configure tailwind.config.js
+
+Here's what my `tailwind.config.js` file looks like:
+
+```js
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./public/*.html",
+    "./app/helpers/**/*.rb",
+    "./app/javascript/**/*.js",
+    "./app/views/**/*.{erb,haml,html,slim}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/container-queries"),
+    require("tailwindcss-animate"),
+  ],
+};
+```
+
+### Configure styles
+
+Add the following to your app/assets/stylesheets/application.tailwind.css file.
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+}
+```
+
+### Copy Component Files
+
+For example, if you want to use the Accordion component, you would copy the following files to your
+application:
+
+- `app/javascript/controllers/components/ui/accordion_controller.js` The Stimulus controller for any
+  component that requires javascript.
+- `app/helpers/components/accordion_helper.rb` The helper for the component that allows for easy
+  rendering within views.
+- `app/views/components/ui/_accordion.html.erb` The html for the component.
+
+Once those are copied in your application you can render an accordion with:
+
+```
+<%%= render_accordion title: "Did you know?",
+                      description: "You can wrap shadcn helpers in any
+                                    component library you want!" %>
+```
+
+Result:
+
+<img src="/accordion.png" alt="Example of Accordion" />
+
+See the component's demo page in `app/views/examples/components/accordion.html.erb` for more
+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: %>