ruby_ui 1.0.1 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ce568be589ba67de6a39f3bcaa0cd0edd98669a6f5f30e6d575019aedc770965
-  data.tar.gz: bf7b51464f7c1f9bea016aa4ea65c5611a1b32dd4f1b31471bd836ec696ba7ab
+  metadata.gz: ae8ccd52ccc249a9a1a409facc1883da7f87170bc5f70a0df32755e2fc5e5577
+  data.tar.gz: df99edbcb78e881e98a114c58b1e0e771180d40acc0677ab182c50e29487d33d
 SHA512:
-  metadata.gz: d46233e1bdefb829a6f80a4e885b71b5f3be871e514a50f4580afcb2ea36147d8080c5efedc2c8acea648f491fca65134560abc72e9d95a4ed5c58d5f01887e9
-  data.tar.gz: 3081e7e6e862ef359f08ddbf8ed5c6769fe28c8b1fe856fc393df4eda1b468479b6774d749a6b26133b985330e625e278d0ef14dc069bd86706f5f437fb0c7c8
+  metadata.gz: 9509f7c13c94b9f1b4767cc194e7eaeecda6ffd8eeb872c97693e7cf9ac875dbefa1457edc882df7e2ac093facf77ff856f1af3191549a7f37be8d901cb00ec6
+  data.tar.gz: 44f479fb9b95d79318e358dc4b2864a5b13cc51d1ddd958a199cd6c184ed190de8d93a07e07d416ca2d5c89e23094f1b158c187048b3030d17eadca9b23eb065

data/LICENSE.txt

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2024 RubyUI
+Copyright (c) 2025 RubyUI
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

data/README.md

@@ -55,6 +55,8 @@ You can generate your components using `ruby_ui:component` generator.
 bin/rails g ruby_ui:component Accordion
 ```
 
+You also can generate all components using `ruby_ui:component:all` generator
+
 ## Documentation 📖
 
 Visit https://rubyui.com/docs/introduction to view the full documentation, including:
@@ -85,4 +87,8 @@ Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.
 
 ---
 
+## Sponsors
+[![DigitalOcean Referral Badge](https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg)](https://www.digitalocean.com/?refcode=0fdaefc76c39&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
+
+
 © 2024 RubyUI. All rights reserved. 🔒

data/lib/generators/ruby_ui/component/all_generator.rb

@@ -0,0 +1,22 @@
+module RubyUI
+  module Generators
+    module Component
+      class AllGenerator < Rails::Generators::Base
+        namespace "ruby_ui:component:all"
+
+        source_root File.expand_path("../../../ruby_ui", __dir__)
+        class_option :force, type: :boolean, default: false
+
+        def generate_components
+          say "Generating all components..."
+
+          Dir.children(self.class.source_root).each do |folder_name|
+            next if folder_name.ends_with?(".rb")
+
+            run "bin/rails generate ruby_ui:component #{folder_name} --force #{options["force"]}"
+          end
+        end
+      end
+    end
+  end
+end

data/lib/generators/ruby_ui/component_generator.rb

@@ -8,6 +8,7 @@ module RubyUI
 
       source_root File.expand_path("../../ruby_ui", __dir__)
       argument :component_name, type: :string, required: true
+      class_option :force, type: :boolean, default: false
 
       def generate_component
         if component_not_found?
@@ -23,7 +24,7 @@ module RubyUI
 
         components_file_paths.each do |file_path|
           component_file_name = file_path.split("/").last
-          copy_file file_path, Rails.root.join("app/components/ruby_ui", component_folder_name, component_file_name)
+          copy_file file_path, Rails.root.join("app/components/ruby_ui", component_folder_name, component_file_name), force: options["force"]
         end
       end
 
@@ -34,7 +35,7 @@ module RubyUI
 
         js_controller_file_paths.each do |file_path|
           controller_file_name = file_path.split("/").last
-          copy_file file_path, Rails.root.join("app/javascript/controllers/ruby_ui", controller_file_name)
+          copy_file file_path, Rails.root.join("app/javascript/controllers/ruby_ui", controller_file_name), force: options["force"]
         end
 
         # Importmap doesn't have controller manifest, instead it uses `eagerLoadControllersFrom("controllers", application)`
@@ -68,7 +69,7 @@ module RubyUI
 
       def install_components_dependencies(components)
         components&.each do |component|
-          run "bin/rails generate ruby_ui:component #{component}"
+          run "bin/rails generate ruby_ui:component #{component} --force #{options["force"]}"
         end
       end
 

data/lib/generators/ruby_ui/install/docs_generator.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module RubyUI
+  module Generators
+    module Install
+      class DocsGenerator < Rails::Generators::Base
+        namespace "ruby_ui:install:docs"
+        source_root File.expand_path("../../../ruby_ui", __dir__)
+        class_option :force, type: :boolean, default: false
+
+        def copy_docs_files
+          say "Installing RubyUI documentation files..."
+
+          docs_file_paths.each do |source_path|
+            dest_filename = File.basename(source_path).sub("_docs", "")
+            copy_file source_path, Rails.root.join("app/views/docs", dest_filename), force: options["force"]
+          end
+
+          say ""
+          say "Documentation installed to app/views/docs/", :green
+        end
+
+        private
+
+        def docs_file_paths
+          Dir.glob(File.join(self.class.source_root, "*", "*_docs.rb"))
+        end
+      end
+    end
+  end
+end

data/lib/generators/ruby_ui/install/install_generator.rb

@@ -42,7 +42,7 @@ module RubyUI
 
       def add_ruby_ui_module_to_components_base
         say "Adding RubyUI Kit to Components::Base"
-        insert_into_file Rails.root.join("app/components/base.rb"), after: "include Components" do
+        insert_into_file Rails.root.join("app/components/base.rb"), after: "class Components::Base < Phlex::HTML" do
           "\n  include RubyUI"
         end
       end
@@ -62,12 +62,6 @@ module RubyUI
       def install_tailwind_plugins
         say "Installing tw-animate-css plugin"
         install_js_package("tw-animate-css")
-
-        say "Installing @tailwindcss/forms plugin"
-        install_js_package("@tailwindcss/forms")
-
-        say "Installing @tailwindcss/typography plugin"
-        install_js_package("@tailwindcss/typography")
       end
 
       def add_ruby_ui_base

data/lib/generators/ruby_ui/install/templates/tailwind.css.erb

@@ -1,8 +1,5 @@
 @import "tailwindcss";
 
-@plugin "@tailwindcss/forms";
-@plugin "@tailwindcss/typography";
-
 <% if using_importmap? %>
 @import "../../../vendor/javascript/tw-animate-css.js";
 <% else %>

data/lib/generators/ruby_ui/javascript_utils.rb

@@ -8,6 +8,8 @@ module RubyUI
           run "yarn add #{package}"
         elsif using_npm?
           run "npm install #{package}"
+        elsif using_pnpm?
+          run "pnpm install #{package}"
         else
           say "Could not detect the package manager, you need to install '#{package}' manually", :red
         end
@@ -30,6 +32,8 @@ module RubyUI
 
       def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
 
+      def using_pnpm? = File.exist?(Rails.root.join("pnpm-lock.yaml"))
+
       def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
 
       def pin_motion

data/lib/ruby_ui/accordion/accordion_docs.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+class Views::Docs::Accordion < Views::Base
+  def view_template
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      component = "Accordion"
+      render Docs::Header.new(title: component,
+        description: "A vertically stacked set of interactive headings that each reveal a section of content.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        @@code = <<~RUBY
+          div(class: "w-full") do
+            Accordion do
+              AccordionItem do
+                AccordionTrigger do
+                  p(class: "font-medium") { "What is PhlexUI?" }
+                  AccordionIcon()
+                end
+
+                AccordionContent do
+                  p(class: "text-sm pb-4") do
+                    "PhlexUI is a UI component library for Ruby devs who want to build better, faster."
+                  end
+                end
+              end
+            end
+
+            Accordion do
+              AccordionItem do
+                AccordionTrigger do
+                  p(class: "font-medium") { "Can I use it with Rails?" }
+                  AccordionIcon()
+                end
+
+                AccordionContent do
+                  p(class: "text-sm pb-4") do
+                    "Yes, PhlexUI is pure Ruby and works great with Rails. It's a Ruby gem that you can install into your Rails app."
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/alert/alert_docs.rb

@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+
+class Views::Docs::Alert < Views::Base
+  def view_template
+    component = "Alert"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Alert", description: "Displays a callout for user attention.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Alert do
+            rocket_icon
+            AlertTitle { "Pro tip" }
+            AlertDescription { "With RubyUI you'll ship faster." }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Without Icon", context: self) do
+        <<~RUBY
+          Alert do
+            AlertTitle { "Pro tip" }
+            AlertDescription { "Simply, don't include an icon and your alert will look like this." }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Warning", context: self) do
+        <<~RUBY
+          Alert(variant: :warning) do
+            info_icon
+            AlertTitle { "Ship often" }
+            AlertDescription { "Shipping is good, your users will thank you for it." }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Destructive", context: self) do
+        <<~RUBY
+          Alert(variant: :destructive) do
+            alert_icon
+            AlertTitle { "Oopsie daisy!" }
+            AlertDescription { "Your design system is non-existent." }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Success", context: self) do
+        <<~RUBY
+          Alert(variant: :success) do
+            check_icon
+            AlertTitle { "Installation successful" }
+            AlertDescription { "You're all set to start using RubyUI in your application." }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  def rocket_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 24 24",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 01.75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 019.75 22.5a.75.75 0 01-.75-.75v-4.131A15.838 15.838 0 016.382 15H2.25a.75.75 0 01-.75-.75 6.75 6.75 0 017.815-6.666zM15 6.75a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z",
+        clip_rule: "evenodd"
+      )
+      s.path(
+        d:
+          "M5.26 17.242a.75.75 0 10-.897-1.203 5.243 5.243 0 00-2.05 5.022.75.75 0 00.625.627 5.243 5.243 0 005.022-2.051.75.75 0 10-1.202-.897 3.744 3.744 0 01-3.008 1.51c0-1.23.592-2.323 1.51-3.008z"
+      )
+    end
+  end
+
+  def alert_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 24 24",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+
+  def info_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 24 24",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+
+  def check_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 24 24",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+end

data/lib/ruby_ui/alert_dialog/alert_dialog_content.rb

@@ -14,8 +14,7 @@ module RubyUI
     def background
       div(
         data_state: "open",
-        class:
-              "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        class: "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in",
         style: "pointer-events:auto",
         data_aria_hidden: "true",
         aria_hidden: "true"
@@ -26,7 +25,7 @@ module RubyUI
       div(
         role: "alertdialog",
         data_state: "open",
-        class: "flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        class: "flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
         style: "pointer-events:auto",
         &
       )

data/lib/ruby_ui/alert_dialog/alert_dialog_docs.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+class Views::Docs::AlertDialog < Views::Base
+  def view_template
+    component = "AlertDialog"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Alert Dialog", description: "A modal dialog that interrupts the user with important content and expects a response.")
+
+      Heading(level: 2) { "Usage" }
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          AlertDialog do
+            AlertDialogTrigger do
+              Button { "Show dialog" }
+            end
+            AlertDialogContent do
+              AlertDialogHeader do
+                AlertDialogTitle { "Are you absolutely sure?" }
+                AlertDialogDescription { "This action cannot be undone. This will permanently delete your account and remove your data from our servers." }
+              end
+              AlertDialogFooter do
+                AlertDialogCancel { "Cancel" }
+                AlertDialogAction { "Continue" } # Will probably be a link to a controller action (e.g. delete account)
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/aspect_ratio/aspect_ratio_docs.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+class Views::Docs::AspectRatio < Views::Base
+  def view_template
+    component = "AspectRatio"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Aspect Ratio", description: "Displays content within a desired ratio.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "16/9", context: self) do
+        <<~RUBY
+          AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border shadow-sm") do
+            img(
+              alt: "Placeholder",
+              loading: "lazy",
+              src: image_path('pattern.jpg')
+            )
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "4/3", context: self) do
+        <<~RUBY
+          AspectRatio(aspect_ratio: "4/3", class: "rounded-md overflow-hidden border shadow-sm") do
+            img(
+              alt: "Placeholder",
+              loading: "lazy",
+              src: image_path('pattern.jpg')
+            )
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "1/1", context: self) do
+        <<~RUBY
+          AspectRatio(aspect_ratio: "1/1", class: "rounded-md overflow-hidden border shadow-sm") do
+            img(
+              alt: "Placeholder",
+              loading: "lazy",
+              src: image_path('pattern.jpg')
+            )
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "21/9", context: self) do
+        <<~RUBY
+          AspectRatio(aspect_ratio: "21/9", class: "rounded-md overflow-hidden border shadow-sm") do
+            img(
+              alt: "Placeholder",
+              loading: "lazy",
+              src: image_path('pattern.jpg')
+            )
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/avatar/avatar_docs.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+class Views::Docs::Avatar < Views::Base
+  def view_template
+    component = "Avatar"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Avatar", description: "An image element with a fallback for representing the user.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Image & fallback", context: self) do
+        <<~RUBY
+          Avatar do
+            AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+            AvatarFallback { "JD" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Only fallback", context: self) do
+        <<~RUBY
+          Avatar do
+            AvatarFallback { "JD" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Sizes", context: self) do
+        <<~RUBY
+          div(class: 'flex items-center space-x-2') do
+            # size: :xs
+            Avatar(size: :xs) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
+            end
+            # size: :sm
+            Avatar(size: :sm) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
+            end
+            # size: :md
+            Avatar(size: :md) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
+            end
+            # size: :lg
+            Avatar(size: :lg) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
+            end
+            # size: :xl
+            Avatar(size: :xl) do
+              AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+              AvatarFallback { "JD" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Sizes (only fallback)", context: self) do
+        @@code = <<~RUBY
+          div(class: 'flex items-center space-x-2') do
+            # size: :xs
+            Avatar(size: :xs) do
+              AvatarFallback { "JD" }
+            end
+            # size: :sm
+            Avatar(size: :sm) do
+              AvatarFallback { "JD" }
+            end
+            # size: :md
+            Avatar(size: :md) do
+              AvatarFallback { "JD" }
+            end
+            # size: :lg
+            Avatar(size: :lg) do
+              AvatarFallback { "JD" }
+            end
+            # size: :xl
+            Avatar(size: :xl) do
+              AvatarFallback { "JD" }
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/badge/badge_docs.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+class Views::Docs::Badge < Views::Base
+  def view_template
+    component = "Badge"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Badge", description: "Displays a badge or a component that looks like a badge.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Default", context: self) do
+        <<~RUBY
+          Badge { "Badge" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Primary", context: self) do
+        <<~RUBY
+          Badge(variant: :primary) { 'Primary' }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Outline", context: self) do
+        <<~RUBY
+          Badge(variant: :outline) { 'Outline' }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Variants", context: self) do
+        <<~RUBY
+          div(class: 'flex flex-wrap gap-2 justify-center') do
+            Badge(variant: :destructive) { 'Destructive' }
+            Badge(variant: :warning) { 'Warning' }
+            Badge(variant: :success) { 'Success' }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Other Colors", context: self) do
+        <<~RUBY
+          div(class: 'flex flex-wrap gap-2 justify-center') do
+            Badge(variant: :red) { 'Red' }
+            Badge(variant: :orange) { 'Orange' }
+            Badge(variant: :amber) { 'Amber' }
+            Badge(variant: :yellow) { 'Yellow' }
+            Badge(variant: :lime) { 'Lime' }
+            Badge(variant: :green) { 'Green' }
+            Badge(variant: :emerald) { 'Emerald' }
+            Badge(variant: :teal) { 'Teal' }
+            Badge(variant: :cyan) { 'Cyan' }
+            Badge(variant: :sky) { 'Sky' }
+            Badge(variant: :blue) { 'Blue' }
+            Badge(variant: :indigo) { 'Indigo' }
+            Badge(variant: :violet) { 'Violet' }
+            Badge(variant: :purple) { 'Purple' }
+            Badge(variant: :fuchsia) { 'Fuchsia' }
+            Badge(variant: :pink) { 'Pink' }
+            Badge(variant: :rose) { 'Rose' }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Sizes", context: self) do
+        <<~RUBY
+          div(class: 'flex flex-wrap gap-2 justify-center items-center') do
+            Badge(size: :sm) { "Small" }
+            Badge(size: :md) { "Medium" }
+            Badge(size: :lg) { "Large" }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      # components
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end