better_ui 0.3.0 → 0.7.0

data/app/helpers/better_ui/application_helper.rb

@@ -1,55 +1,329 @@
+# frozen_string_literal: true
+
 module BetterUi
+  # View helpers for rendering BetterUi components with a concise API.
+  #
+  # All helpers follow the `bui_<component>` naming convention and delegate
+  # to the corresponding ViewComponent class.
+  #
+  # @example Basic button
+  #   <%= bui_button(variant: :primary) { "Click me" } %>
+  #
+  # @example Card with slots
+  #   <%= bui_card(variant: :success) do |card| %>
+  #     <% card.with_header { "Title" } %>
+  #     <% card.with_body { "Content" } %>
+  #   <% end %>
   module ApplicationHelper
-    # Inclusione dei moduli aggregatori per i componenti application
-    # Questo assicura che tutti gli helper specifici dei componenti siano disponibili.
-
-    # General Components
-    include General::Components::Accordion::AccordionHelper
-    include General::Components::Alert::AlertHelper
-    include General::Components::Avatar::AvatarHelper
-    include General::Components::Badge::BadgeHelper
-    include General::Components::Breadcrumb::BreadcrumbHelper
-    include General::Components::Button::ButtonHelper
-    include General::Components::Divider::DividerHelper
-    include General::Components::Dropdown::DropdownHelper
-    include General::Components::Dropdown::ItemHelper
-    include General::Components::Dropdown::DividerHelper
-    include General::Components::Heading::HeadingHelper
-    include General::Components::Icon::IconHelper
-    include General::Components::Link::LinkHelper
-    include General::Components::Modal::ModalHelper
-    include General::Components::Pagination::PaginationHelper
-    include General::Components::Panel::PanelHelper
-    include General::Components::Progress::ProgressHelper
-    include General::Components::Spinner::SpinnerHelper
-    include General::Components::Tag::TagHelper
-    include General::Components::Tooltip::TooltipHelper
-
-    include General::Components::Table::TableHelper
-    include General::Components::Table::TbodyHelper
-    include General::Components::Table::TdHelper
-    include General::Components::Table::TfootHelper
-    include General::Components::Table::ThHelper
-    include General::Components::Table::TheadHelper
-    include General::Components::Table::TrHelper
-  
-    include General::Components::Tabs::TabsHelper
-    include General::Components::Tabs::TabHelper
-    include General::Components::Tabs::PanelHelper
-
-    # General Form Components
-    include General::Components::Input::Checkbox::CheckboxHelper
-    include General::Components::Input::Datetime::DatetimeHelper
-    include General::Components::Input::Radio::RadioHelper
-    include General::Components::Input::RadioGroup::RadioGroupHelper
-    include General::Components::Input::Select::SelectHelper
-    include General::Components::Input::Text::TextHelper
-    include General::Components::Input::Textarea::TextareaHelper
-
-    # Application Components
-    include Application::Components::Main::MainHelper
-    include Application::Components::Navbar::NavbarHelper
-    include Application::Components::Sidebar::SidebarHelper
-    include Application::Components::Card::CardHelper
+    # ============================================
+    # Core Components
+    # ============================================
+
+    # Renders a button component.
+    #
+    # @param options [Hash] Options passed to ButtonComponent
+    # @option options [Symbol] :variant Color variant (:primary, :secondary, :accent, :success, :danger, :warning, :info, :light, :dark)
+    # @option options [Symbol] :style Button style (:solid, :outline, :ghost, :soft)
+    # @option options [Symbol] :size Size (:xs, :sm, :md, :lg, :xl)
+    # @option options [Boolean] :show_loader Show loading spinner
+    # @option options [Boolean] :show_loader_on_click Show loader on click
+    # @option options [Boolean] :disabled Disable the button
+    # @option options [Symbol] :type Button type (:button, :submit, :reset)
+    # @yield Button content
+    # @return [String] Rendered HTML
+    #
+    # @example Simple button
+    #   <%= bui_button(variant: :primary) { "Click me" } %>
+    #
+    # @example Submit button with loader
+    #   <%= bui_button(type: :submit, show_loader_on_click: true) { "Save" } %>
+    def bui_button(**options, &block)
+      render BetterUi::ButtonComponent.new(**options), &block
+    end
+
+    # Renders a card component.
+    #
+    # @param options [Hash] Options passed to CardComponent
+    # @option options [Symbol] :variant Color variant
+    # @option options [Symbol] :style Card style (:solid, :outline, :ghost, :soft, :bordered)
+    # @option options [Symbol] :size Size (:xs, :sm, :md, :lg, :xl)
+    # @option options [Boolean] :shadow Show shadow
+    # @yield [card] Block with card slots
+    # @yieldparam card [BetterUi::CardComponent] The card component for slot access
+    # @return [String] Rendered HTML
+    #
+    # @example Card with header and body
+    #   <%= bui_card(variant: :primary) do |card| %>
+    #     <% card.with_header { "Title" } %>
+    #     <% card.with_body { "Content goes here" } %>
+    #     <% card.with_footer { "Footer" } %>
+    #   <% end %>
+    def bui_card(**options, &block)
+      render BetterUi::CardComponent.new(**options), &block
+    end
+
+    # Renders action messages (alerts/flash messages).
+    #
+    # @param messages [Array<String>] Messages to display
+    # @param options [Hash] Options passed to ActionMessagesComponent
+    # @option options [Symbol] :variant Color variant
+    # @option options [Symbol] :style Alert style (:solid, :soft, :outline, :ghost)
+    # @option options [Boolean] :dismissible Allow dismissing
+    # @option options [Integer, Float, nil] :auto_dismiss Auto-dismiss after seconds
+    # @option options [String, nil] :title Alert title
+    # @return [String] Rendered HTML
+    #
+    # @example Success message
+    #   <%= bui_action_messages(["Saved successfully!"], variant: :success, dismissible: true) %>
+    #
+    # @example Error messages
+    #   <%= bui_action_messages(@errors, variant: :danger, title: "Errors occurred") %>
+    def bui_action_messages(messages = [], **options)
+      render BetterUi::ActionMessagesComponent.new(messages: messages, **options)
+    end
+
+    # ============================================
+    # Form Components
+    # ============================================
+
+    # Renders a text input component.
+    #
+    # @param name [String] Input name attribute
+    # @param options [Hash] Options passed to Forms::TextInputComponent
+    # @option options [String, nil] :value Input value
+    # @option options [String, nil] :label Label text
+    # @option options [String, nil] :hint Hint text
+    # @option options [String, nil] :placeholder Placeholder text
+    # @option options [Symbol] :size Size (:xs, :sm, :md, :lg, :xl)
+    # @option options [Boolean] :disabled Disabled state
+    # @option options [Boolean] :readonly Readonly state
+    # @option options [Boolean] :required Required field
+    # @option options [Array<String>, String, nil] :errors Error messages
+    # @yield [input] Block with input slots
+    # @return [String] Rendered HTML
+    #
+    # @example Basic text input
+    #   <%= bui_text_input("email", label: "Email", placeholder: "you@example.com") %>
+    #
+    # @example With icon
+    #   <%= bui_text_input("search") do |input| %>
+    #     <% input.with_prefix_icon { icon_svg } %>
+    #   <% end %>
+    def bui_text_input(name, **options, &block)
+      render BetterUi::Forms::TextInputComponent.new(name: name, **options), &block
+    end
+
+    # Renders a number input component.
+    #
+    # @param name [String] Input name attribute
+    # @param options [Hash] Options passed to Forms::NumberInputComponent
+    # @option options [Numeric, nil] :value Input value
+    # @option options [String, nil] :label Label text
+    # @option options [Numeric, nil] :min Minimum value
+    # @option options [Numeric, nil] :max Maximum value
+    # @option options [Numeric, nil] :step Step value
+    # @option options [Boolean] :show_spinner Show up/down arrows (default: true)
+    # @yield [input] Block with input slots
+    # @return [String] Rendered HTML
+    #
+    # @example Number input with range
+    #   <%= bui_number_input("quantity", min: 1, max: 100, label: "Quantity") %>
+    #
+    # @example Price input
+    #   <%= bui_number_input("price", step: 0.01) do |input| %>
+    #     <% input.with_prefix_icon { "$" } %>
+    #   <% end %>
+    def bui_number_input(name, **options, &block)
+      render BetterUi::Forms::NumberInputComponent.new(name: name, **options), &block
+    end
+
+    # Renders a password input component with visibility toggle.
+    #
+    # @param name [String] Input name attribute
+    # @param options [Hash] Options passed to Forms::PasswordInputComponent
+    # @option options [String, nil] :label Label text
+    # @option options [String, nil] :hint Hint text
+    # @option options [Symbol] :size Size (:xs, :sm, :md, :lg, :xl)
+    # @yield [input] Block with input slots
+    # @return [String] Rendered HTML
+    #
+    # @example Password input
+    #   <%= bui_password_input("password", label: "Password", hint: "Min 8 characters") %>
+    def bui_password_input(name, **options, &block)
+      render BetterUi::Forms::PasswordInputComponent.new(name: name, **options), &block
+    end
+
+    # Renders a textarea component.
+    #
+    # @param name [String] Input name attribute
+    # @param options [Hash] Options passed to Forms::TextareaComponent
+    # @option options [String, nil] :value Textarea content
+    # @option options [String, nil] :label Label text
+    # @option options [Integer] :rows Number of visible rows (default: 4)
+    # @option options [Integer, nil] :cols Width in characters
+    # @option options [Integer, nil] :maxlength Maximum characters
+    # @option options [Symbol] :resize Resize behavior (:none, :vertical, :horizontal, :both)
+    # @yield [textarea] Block with textarea slots
+    # @return [String] Rendered HTML
+    #
+    # @example Textarea with maxlength
+    #   <%= bui_textarea("bio", rows: 6, maxlength: 500, label: "Bio") %>
+    def bui_textarea(name, **options, &block)
+      render BetterUi::Forms::TextareaComponent.new(name: name, **options), &block
+    end
+
+    # Renders a checkbox component.
+    #
+    # @param name [String] Input name attribute
+    # @param options [Hash] Options passed to Forms::CheckboxComponent
+    # @option options [String] :value Value when checked (default: "1")
+    # @option options [Boolean] :checked Checked state
+    # @option options [String, nil] :label Label text
+    # @option options [String, nil] :hint Hint text
+    # @option options [Symbol] :variant Color variant (:primary, :secondary, etc.)
+    # @option options [Symbol] :size Size (:xs, :sm, :md, :lg, :xl)
+    # @option options [Symbol] :label_position Label position (:left, :right)
+    # @option options [Boolean] :disabled Disabled state
+    # @option options [Boolean] :readonly Readonly state
+    # @option options [Boolean] :required Required field
+    # @option options [Array<String>, String, nil] :errors Error messages
+    # @return [String] Rendered HTML
+    #
+    # @example Basic checkbox
+    #   <%= bui_checkbox("newsletter", label: "Subscribe to newsletter") %>
+    #
+    # @example Checkbox with variant
+    #   <%= bui_checkbox("active", label: "Active", variant: :success, checked: true) %>
+    def bui_checkbox(name, **options)
+      render BetterUi::Forms::CheckboxComponent.new(name: name, **options)
+    end
+
+    # Renders a checkbox group component.
+    #
+    # @param name [String] Input name attribute (will have [] appended for array submission)
+    # @param collection [Array] Collection of options (values or [label, value] pairs)
+    # @param options [Hash] Options passed to Forms::CheckboxGroupComponent
+    # @option options [Array] :selected Currently selected values
+    # @option options [String, nil] :legend Legend text for the fieldset
+    # @option options [String, nil] :hint Hint text
+    # @option options [Symbol] :variant Color variant (:primary, :secondary, etc.)
+    # @option options [Symbol] :size Size (:xs, :sm, :md, :lg, :xl)
+    # @option options [Symbol] :orientation Layout orientation (:vertical, :horizontal)
+    # @option options [Boolean] :disabled Disabled state
+    # @option options [Boolean] :required Required field
+    # @option options [Array<String>, String, nil] :errors Error messages
+    # @return [String] Rendered HTML
+    #
+    # @example Basic checkbox group
+    #   <%= bui_checkbox_group("roles", ["Admin", "Editor", "Viewer"], legend: "Roles") %>
+    #
+    # @example With label/value pairs and selected values
+    #   <%= bui_checkbox_group("permissions",
+    #     [["Read", "read"], ["Write", "write"]],
+    #     selected: ["read"],
+    #     orientation: :horizontal
+    #   ) %>
+    def bui_checkbox_group(name, collection, **options)
+      render BetterUi::Forms::CheckboxGroupComponent.new(name: name, collection: collection, **options)
+    end
+
+    # ============================================
+    # Drawer Components
+    # ============================================
+
+    # Renders a drawer layout component with header, sidebar, and main content areas.
+    #
+    # @param options [Hash] Options passed to Drawer::LayoutComponent
+    # @option options [Symbol] :sidebar_position Sidebar position (:left, :right)
+    # @option options [Symbol] :sidebar_breakpoint Desktop breakpoint (:md, :lg, :xl)
+    # @yield [layout] Block with layout slots
+    # @yieldparam layout [BetterUi::Drawer::LayoutComponent] The layout component
+    # @return [String] Rendered HTML
+    #
+    # @example Full layout
+    #   <%= bui_drawer_layout(sidebar_position: :left) do |layout| %>
+    #     <% layout.with_header { render_header } %>
+    #     <% layout.with_sidebar { render_sidebar } %>
+    #     <% layout.with_main { yield } %>
+    #   <% end %>
+    def bui_drawer_layout(**options, &block)
+      render BetterUi::Drawer::LayoutComponent.new(**options), &block
+    end
+
+    # Renders a drawer sidebar component.
+    #
+    # @param options [Hash] Options passed to Drawer::SidebarComponent
+    # @option options [Symbol] :variant Color variant (:light, :dark, :primary)
+    # @option options [Symbol] :position Position (:left, :right)
+    # @option options [Symbol] :width Width (:sm, :md, :lg)
+    # @option options [Boolean] :collapsible Allow collapsing
+    # @yield [sidebar] Block with sidebar slots
+    # @return [String] Rendered HTML
+    #
+    # @example Sidebar with navigation
+    #   <%= bui_drawer_sidebar(variant: :dark) do |sidebar| %>
+    #     <% sidebar.with_header { "App Name" } %>
+    #     <% sidebar.with_navigation { render_nav } %>
+    #     <% sidebar.with_footer { render_footer } %>
+    #   <% end %>
+    def bui_drawer_sidebar(**options, &block)
+      render BetterUi::Drawer::SidebarComponent.new(**options), &block
+    end
+
+    # Renders a drawer header component.
+    #
+    # @param options [Hash] Options passed to Drawer::HeaderComponent
+    # @option options [Symbol] :variant Color variant (:light, :dark, :transparent, :primary)
+    # @option options [Boolean] :sticky Sticky positioning (default: true)
+    # @option options [Symbol] :height Height (:sm, :md, :lg)
+    # @yield [header] Block with header slots
+    # @return [String] Rendered HTML
+    #
+    # @example Header with logo and navigation
+    #   <%= bui_drawer_header(variant: :light) do |header| %>
+    #     <% header.with_logo { image_tag("logo.svg") } %>
+    #     <% header.with_navigation { render_nav } %>
+    #     <% header.with_actions { render_actions } %>
+    #     <% header.with_mobile_menu_button { hamburger_button } %>
+    #   <% end %>
+    def bui_drawer_header(**options, &block)
+      render BetterUi::Drawer::HeaderComponent.new(**options), &block
+    end
+
+    # Renders a drawer navigation item.
+    #
+    # @param label [String] Item label text
+    # @param href [String] Link URL
+    # @param options [Hash] Options passed to Drawer::NavItemComponent
+    # @option options [Boolean] :active Active state
+    # @option options [Symbol, nil] :method HTTP method (:get, :post, :put, :patch, :delete)
+    # @option options [Symbol] :variant Color variant (:light, :dark, :primary)
+    # @yield [item] Block with item slots
+    # @return [String] Rendered HTML
+    #
+    # @example Navigation item with icon
+    #   <%= bui_drawer_nav_item("Dashboard", dashboard_path, active: true) do |item| %>
+    #     <% item.with_icon { dashboard_icon } %>
+    #   <% end %>
+    def bui_drawer_nav_item(label, href, **options, &block)
+      render BetterUi::Drawer::NavItemComponent.new(label: label, href: href, **options), &block
+    end
+
+    # Renders a drawer navigation group with title and items.
+    #
+    # @param options [Hash] Options passed to Drawer::NavGroupComponent
+    # @option options [String, nil] :title Group title
+    # @option options [Symbol] :variant Color variant (:light, :dark, :primary)
+    # @yield [group] Block with group slots
+    # @return [String] Rendered HTML
+    #
+    # @example Navigation group with items
+    #   <%= bui_drawer_nav_group(title: "Main Menu") do |group| %>
+    #     <% group.with_item(label: "Home", href: root_path) %>
+    #     <% group.with_item(label: "Settings", href: settings_path) %>
+    #   <% end %>
+    def bui_drawer_nav_group(**options, &block)
+      render BetterUi::Drawer::NavGroupComponent.new(**options), &block
+    end
   end
 end

data/app/views/layouts/better_ui/application.html.erb

@@ -9,7 +9,7 @@
 
   <%= stylesheet_link_tag    "better_ui/application", media: "all" %>
 </head>
-<body style="padding: 10px;">
+<body>
 
 <%= yield %>
 

data/config/routes.rb

@@ -1,2 +1,3 @@
 BetterUi::Engine.routes.draw do
+  mount Lookbook::Engine, at: "/lookbook"
 end

data/lib/better_ui/engine.rb

@@ -1,14 +1,43 @@
+# frozen_string_literal: true
+
 module BetterUi
   class Engine < ::Rails::Engine
     isolate_namespace BetterUi
 
-    initializer "better_ui.view_helpers" do
-      ActiveSupport.on_load :action_controller do
-        helper BetterUi::ApplicationHelper if defined?(BetterUi::ApplicationHelper)
+    # Configure Zeitwerk autoloading for the engine
+    config.autoload_paths += %W[
+      #{root}/lib
+    ]
+
+    # Ignore non-autoloadable directories
+    initializer "better_ui.autoload_ignore", before: :set_autoload_paths do
+      Rails.autoloaders.main.ignore(
+        "#{root}/lib/tasks",
+        "#{root}/lib/generators"
+      )
+    end
+
+    # Configure ViewComponent preview paths (must run before Lookbook)
+    initializer "better_ui.view_component", before: :load_config_initializers do |app|
+      # Add engine preview paths to ViewComponent using absolute paths
+      if app.config.respond_to?(:view_component)
+        # Use the correct configuration: previews.paths (not preview_paths or previews_paths)
+        app.config.view_component.previews.paths << root.join("spec/components/previews").to_s
       end
+    end
+
+    # Configure Lookbook for component previews (must run before Lookbook scans for previews)
+    initializer "better_ui.lookbook", before: "lookbook.set_autoload_paths" do |app|
+      # Only configure Lookbook if it's available
+      if defined?(Lookbook)
+        # Add engine preview paths to Lookbook with absolute path
+        Lookbook.config.preview_paths << root.join("spec/components/previews").to_s
+
+        # Configure Lookbook to work with the engine namespace
+        Lookbook.config.project_name = "BetterUi Components"
 
-      ActiveSupport.on_load :action_view do
-        include BetterUi::ApplicationHelper if defined?(BetterUi::ApplicationHelper)
+        # Enable syntax highlighting for code examples
+        Lookbook.config.preview_srcdoc = true
       end
     end
   end

data/lib/better_ui/version.rb

@@ -1,3 +1,3 @@
 module BetterUi
-  VERSION = "0.3.0"
+  VERSION = "0.7.0"
 end

data/lib/better_ui.rb

@@ -1,9 +1,37 @@
+# frozen_string_literal: true
+
+require "view_component"
+require "tailwind_merge"
+require "lookbook"
 require "better_ui/version"
 require "better_ui/engine"
-require "better_ui/railtie"
-
-require "font-awesome-sass"
 
 module BetterUi
-  # Your code goes here...
+  # Returns an array of paths where BetterUi templates are located.
+  # This is useful for debugging and documentation purposes.
+  #
+  # @return [Array<String>] Array of absolute paths to template directories
+  #
+  # @example
+  #   BetterUi.template_paths
+  #   # => ["/path/to/gem/app/views", "/path/to/gem/app/components"]
+  def self.template_paths
+    root = Engine.root
+    [
+      root.join("app", "views").to_s,
+      root.join("app", "components").to_s
+    ].select { |path| Dir.exist?(path) }
+  end
+
+  # Returns the root path of the BetterUi gem.
+  # This is useful when you need to reference gem assets or files.
+  #
+  # @return [Pathname] The root path of the gem
+  #
+  # @example
+  #   BetterUi.root
+  #   # => #<Pathname:/path/to/better_ui>
+  def self.root
+    Engine.root
+  end
 end

data/lib/generators/better_ui/install/USAGE

@@ -0,0 +1,44 @@
+Description:
+    The install generator sets up BetterUi in your Rails application by creating
+    the necessary theme file and configuring Tailwind CSS v4 to work with the gem.
+
+Example:
+    bin/rails generate better_ui:install
+
+    This will create:
+        app/assets/stylesheets/better_ui_theme.css
+        app/assets/stylesheets/application.postcss.css (or update existing)
+
+What it does:
+    1. Creates a theme file (better_ui_theme.css) with:
+       - 9 color variants (primary, secondary, accent, success, danger, warning, info, light, dark)
+       - Full OKLCH color scales (50-950) for each variant
+       - Typography tokens (font families)
+       - Spacing and sizing tokens
+       - Border radius tokens
+       - Shadow tokens
+       - Utility classes for common patterns
+
+    2. Creates or updates application.postcss.css to:
+       - Import Tailwind CSS v4
+       - Import the BetterUi theme
+       - Configure @source directives to scan:
+         * Gem templates in vendor/bundle
+         * Application views and templates
+         * JavaScript files
+
+Post-installation:
+    1. Install Tailwind CSS v4:
+       npm install tailwindcss@next @tailwindcss/postcss@next
+
+    2. Configure PostCSS (postcss.config.js):
+       module.exports = {
+         plugins: [
+           require('@tailwindcss/postcss')
+         ]
+       }
+
+    3. Customize your theme in app/assets/stylesheets/better_ui_theme.css
+
+    4. Use BetterUi components in your views:
+       <%= render BetterUi::ButtonComponent.new(label: "Click me") %>

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

@@ -0,0 +1,87 @@
+# frozen_string_literal: true
+
+require "rails/generators/base"
+
+module BetterUi
+  module Generators
+    class InstallGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      class_option :copy_theme, type: :boolean, default: false,
+        desc: "Copy theme CSS file for customization instead of using npm package default"
+
+      desc "Installs BetterUi npm package and configures your Rails application"
+
+      def install_npm_package
+        say "Installing @pandev-srl/better-ui npm package...", :green
+
+        if File.exist?(File.join(destination_root, "yarn.lock"))
+          run "yarn add @pandev-srl/better-ui"
+        elsif File.exist?(File.join(destination_root, "pnpm-lock.yaml"))
+          run "pnpm add @pandev-srl/better-ui"
+        else
+          run "npm install @pandev-srl/better-ui"
+        end
+      end
+
+      def copy_theme_file
+        return unless options[:copy_theme]
+
+        say "Copying BetterUi theme file for customization...", :green
+        template "better_ui_theme.css.tt", "app/assets/stylesheets/better_ui_theme.css"
+      end
+
+      def show_post_install_message
+        say "\n"
+        say "=" * 80, :green
+        say "BetterUi installation complete!", :green
+        say "=" * 80, :green
+        say "\n"
+
+        say "JavaScript Setup:", :cyan
+        say "  Add to your JavaScript entry point (e.g., app/javascript/application.js):"
+        say ""
+        say "    import { Application } from \"@hotwired/stimulus\""
+        say "    import { registerControllers } from \"@pandev-srl/better-ui\""
+        say ""
+        say "    const application = Application.start()"
+        say "    registerControllers(application)"
+        say "\n"
+
+        say "CSS Setup:", :cyan
+
+        if options[:copy_theme]
+          say "  Theme file copied to: app/assets/stylesheets/better_ui_theme.css"
+          say "  Import in your main CSS file:"
+          say ""
+          say "    @import \"tailwindcss\";"
+          say "    @import \"./better_ui_theme.css\";"
+        else
+          say "  Add to your main CSS file (e.g., app/assets/stylesheets/application.css):"
+          say ""
+          say "    /* Option 1: Import pre-built CSS */"
+          say "    @import \"@pandev-srl/better-ui/css\";"
+          say ""
+          say "    /* Option 2: Import individual modules for customization */"
+          say "    @import \"tailwindcss\";"
+          say "    @import \"@pandev-srl/better-ui/theme\";       /* Design tokens */"
+          say "    @import \"@pandev-srl/better-ui/typography\";  /* Typography utilities */"
+          say "    @import \"@pandev-srl/better-ui/utilities\";   /* General utilities */"
+        end
+
+        say "\n"
+        say "Tailwind Configuration:", :cyan
+        say "  Ensure Tailwind scans BetterUi components for classes:"
+        say "  Add to your CSS file:"
+        say ""
+        say "    @source \"../../../vendor/bundle/**/*.{rb,erb}\";"
+        say "\n"
+
+        say "Usage:", :cyan
+        say "  <%= render BetterUi::ButtonComponent.new(label: \"Click me\") %>"
+        say "\n"
+        say "=" * 80, :green
+      end
+    end
+  end
+end