### Install RubyUI Gem and Installer

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Add the RubyUI gem to your Gemfile and run the installer to set up Phlex, Tailwind CSS, and the base component structure in your Rails project.

```bash
# Add the gem to your Gemfile (development only - components are generated into your app)
bundle add ruby_ui --group development --require false

# Run the installer to set up Phlex, Tailwind CSS, and initialize RubyUI
bin/rails g ruby_ui:install

# Generate individual components as needed
bin/rails g ruby_ui:component Button
bin/rails g ruby_ui:component Card
bin/rails g ruby_ui:component Dialog

# Generate all components at once
bin/rails g ruby_ui:component:all

# Generate components with documentation examples
bin/rails g ruby_ui:component Accordion --with-docs
```

--------------------------------

### Run RubyUI Installer

Source: https://github.com/ruby-ui/ruby_ui/blob/main/README.md

Execute the RubyUI installer script to set up the necessary files and configurations in your Rails application.

```bash
bin/rails g ruby_ui:install
```

--------------------------------

### Skeleton Component Examples

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Provides animated loading placeholders that match content structure. Useful for indicating data is being fetched.

```ruby
class SkeletonExamples < Phlex::HTML
  include RubyUI

  def view_template
    # Basic skeleton
    Skeleton(class: "h-4 w-[250px]")

    # Card loading state
    Card do
      CardHeader do
        div(class: "flex items-center space-x-4") do
          Skeleton(class: "h-12 w-12 rounded-full")  # Avatar placeholder
          div(class: "space-y-2") do
            Skeleton(class: "h-4 w-[200px]")  # Name placeholder
            Skeleton(class: "h-4 w-[150px]")  # Email placeholder
          end
        end
      end
      CardContent(class: "space-y-2") do
        Skeleton(class: "h-4 w-full")
        Skeleton(class: "h-4 w-full")
        Skeleton(class: "h-4 w-3/4")
      end
    end

    # Table loading state
    Table do
      TableHeader do
        TableRow do
          TableHead { Skeleton(class: "h-4 w-20") }
          TableHead { Skeleton(class: "h-4 w-32") }
          TableHead { Skeleton(class: "h-4 w-24") }
        end
      end
      TableBody do
        3.times do
          TableRow do
            TableCell { Skeleton(class: "h-4 w-20") }
            TableCell { Skeleton(class: "h-4 w-32") }
            TableCell { Skeleton(class: "h-4 w-24") }
          end
        end
      end
    end

    # Article loading state
    div(class: "space-y-4") do
      Skeleton(class: "h-8 w-3/4")  # Title
      Skeleton(class: "h-4 w-1/4")  # Date
      Skeleton(class: "h-[200px] w-full rounded-lg")  # Image
      div(class: "space-y-2") do
        Skeleton(class: "h-4 w-full")
        Skeleton(class: "h-4 w-full")
        Skeleton(class: "h-4 w-2/3")
      end
    end
  end
end
```

--------------------------------

### Install RubyUI Documentation Files

Source: https://github.com/ruby-ui/ruby_ui/blob/main/CONTRIBUTING.md

Generate documentation files for RubyUI components within a Rails application. Use the --force flag to overwrite existing files.

```bash
bin/rails g ruby_ui:install:docs
```

```bash
bin/rails g ruby_ui:install:docs --force
```

--------------------------------

### Progress Component Examples

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Displays a progress bar indicating completion status. Supports custom values, labels, and styling.

```ruby
class ProgressExamples < Phlex::HTML
  include RubyUI

  def view_template
    # Basic progress (0-100)
    Progress(value: 50)

    # Different values
    Progress(value: 0)
    Progress(value: 25)
    Progress(value: 75)
    Progress(value: 100)

    # Progress with label
    div(class: "space-y-2") do
      div(class: "flex justify-between text-sm") do
        span { "Uploading..." }
        span { "66%" }
      end
      Progress(value: 66)
    end

    # Custom styling
    Progress(value: 80, class: "h-4")  # Taller progress bar

    # Progress in a card
    Card do
      CardHeader do
        CardTitle { "Storage Used" }
        CardDescription { "You've used 8.5 GB of 10 GB" }
      end
      CardContent do
        Progress(value: 85)
        p(class: "text-sm text-muted-foreground mt-2") { "1.5 GB remaining" }
      end
    end
  end
end
```

--------------------------------

### Component Test Example

Source: https://github.com/ruby-ui/ruby_ui/blob/main/AGENTS.md

Example of a Minitest test case for a RubyUI component. It uses the `phlex` helper to render the component and asserts its output.

```ruby
class RubyUI::ButtonTest < ComponentTest
  def test_render_with_all_items
    output = phlex { RubyUI.Button(variant: :primary) { "Primary" } }
    assert_match(/Primary/, output)
  end
end
```

--------------------------------

### Create a Navigation Dropdown Menu

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Use DropdownMenu to build accessible navigation dropdowns. Configure placement with the `options` hash. Includes examples for menu items, labels, separators, and shortcuts.

```ruby
class NavigationDropdown < Phlex::HTML
  include RubyUI

  def view_template
    DropdownMenu(options: { placement: "bottom-start" }) do
      DropdownMenuTrigger do
        Button(variant: :outline) do
          span { "My Account" }
          # Chevron down icon
          svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "w-4 h-4 ml-2") do |s|
            s.path(d: "m6 9 6 6 6-6")
          end
        end
      end

      DropdownMenuContent do
        DropdownMenuLabel { "My Account" }
        DropdownMenuSeparator

        DropdownMenuItem(href: "/profile") do
          user_icon
          span { "Profile" }
          DropdownMenuShortcut { "Ctrl+P" }
        end

        DropdownMenuItem(href: "/settings") do
          settings_icon
          span { "Settings" }
          DropdownMenuShortcut { "Ctrl+S" }
        end

        DropdownMenuItem(href: "/billing") do
          credit_card_icon
          span { "Billing" }
        end

        DropdownMenuSeparator

        DropdownMenuItem(href: "/logout", class: "text-destructive") do
          logout_icon
          span { "Log out" }
          DropdownMenuShortcut { "Ctrl+Q" }
        end
      end
    end
  end

  private

  def user_icon
    svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "w-4 h-4 mr-2") do |s|
      s.path(d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2")
      s.circle(cx: "12", cy: "7", r: "4")
    end
  end

  def settings_icon
    svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "w-4 h-4 mr-2") do |s|
      s.path(d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z")
      s.circle(cx: "12", cy: "12", r: "3")
    end
  end

  def credit_card_icon
    svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "w-4 h-4 mr-2") do |s|
      s.rect(width: "20", height: "14", x: "2", y: "5", rx: "2")
      s.line(x1: "2", x2: "22", y1: "10", y2: "10")
    end
  end

  def logout_icon
    svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "w-4 h-4 mr-2") do |s|
      s.path(d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4")
      s.polyline(points: "16 17 21 12 16 7")
      s.line(x1: "21", x2: "9", y1: "12", y2: "12")
    end
  end
end
```

--------------------------------

### Popover Component Examples

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Creates floating containers for additional content, triggered by click or hover. Supports custom positioning.

```ruby
class PopoverExamples < Phlex::HTML
  include RubyUI

  def view_template
    # Click-triggered popover (default)
    Popover(options: { trigger: "click" }) do
      PopoverTrigger do
        Button(variant: :outline) { "Click to open" }
      end
      PopoverContent(class: "w-80 p-4") do
        div(class: "space-y-4") do
          h4(class: "font-medium") { "Dimensions" }
          p(class: "text-sm text-muted-foreground") { "Set the dimensions for the layer." }

          div(class: "grid gap-2") do
            FormField do
              FormFieldLabel(for: "width") { "Width" }
              Input(id: "width", value: "100%")
            end
            FormField do
              FormFieldLabel(for: "height") { "Height" }
              Input(id: "height", value: "25px")
            end
          end
        end
      end
    end

    # Hover-triggered popover
    Popover(options: { trigger: "hover", placement: "top" }) do
      PopoverTrigger do
        Button(variant: :ghost) { "Hover for details" }
      end
      PopoverContent(class: "p-3") do
        p(class: "text-sm") { "Additional information appears here on hover." }
      end
    end

    # Popover with custom placement
    Popover(options: { placement: "right-start" }) do
      PopoverTrigger do
        Button { "Right-aligned" }
      end
      PopoverContent(class: "w-64 p-4") do
        p { "This popover appears to the right of the trigger." }
      end
    end
  end
end
```

--------------------------------

### Generate All RubyUI Components

Source: https://github.com/ruby-ui/ruby_ui/blob/main/README.md

Run the `ruby_ui:component:all` generator to create all available UI components at once. This is useful for a comprehensive setup.

```bash
bin/rails g ruby_ui:component:all
```

--------------------------------

### Install RubyUI Gem

Source: https://github.com/ruby-ui/ruby_ui/blob/main/README.md

Add the RubyUI gem to your project's development group. This command installs the gem and makes it available for development.

```bash
bundle add ruby_ui --group development --require false
```

--------------------------------

### Accordion Component Example

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Create collapsible content sections using the Accordion component. Supports opening the first item by default and custom icon rotation.

```ruby
class FAQAccordion < Phlex::HTML
  include RubyUI

  def view_template
    Accordion do
      AccordionItem(open: true) do  # First item open by default
        AccordionTrigger do
          span { "What is RubyUI?" }
          AccordionIcon  # Rotating chevron icon
        end
        AccordionContent do
          div(class: "pb-4") do
            p { "RubyUI is a collection of reusable UI components built for Ruby on Rails applications using the Phlex framework." }
          end
        end
      end

      AccordionItem do
        AccordionTrigger do
          span { "How do I install it?" }
          AccordionIcon
        end
        AccordionContent do
          div(class: "pb-4") do
            p { "Add the gem to your Gemfile and run the installer:" }
            pre(class: "mt-2 p-2 bg-muted rounded") do
              code { "bundle add ruby_ui && rails g ruby_ui:install" }
            end
          end
        end
      end

      AccordionItem(rotate_icon: 90) do  # Custom icon rotation angle
        AccordionTrigger do
          span { "Can I customize the components?" }
          AccordionIcon
        end
        AccordionContent do
          div(class: "pb-4") do
            p { "Yes! Components are copied into your app, giving you full control over styling and behavior." }
          end
        end
      end
    end
  end
end
```

--------------------------------

### Rendering a User Table with Badges and Actions

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

The Table component displays tabular data. This example shows how to render user data, including badges for roles and status, and a dropdown menu for actions.

```ruby
class UsersTable < Phlex::HTML
  include RubyUI

  def initialize(users:)
    @users = users
  end

  def view_template
    Table do
      TableHeader do
        TableRow do
          TableHead { "Name" }
          TableHead { "Email" }
          TableHead { "Role" }
          TableHead { "Status" }
          TableHead(class: "text-right") { "Actions" }
        end
      end

      TableBody do
        @users.each do |user|
          TableRow do
            TableCell(class: "font-medium") { user.name }
            TableCell { user.email }
            TableCell do
              Badge(variant: role_variant(user.role)) { user.role.capitalize }
            end
            TableCell do
              Badge(variant: user.active? ? :success : :secondary) do
                user.active? ? "Active" : "Inactive"
              end
            end
            TableCell(class: "text-right") do
              DropdownMenu do
                DropdownMenuTrigger do
                  Button(variant: :ghost, icon: true) do
                    # Three dots icon
                    svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "currentColor", class: "w-4 h-4") do |s|
                      s.circle(cx: "12", cy: "12", r: "1")
                      s.circle(cx: "12", cy: "5", r: "1")
                      s.circle(cx: "12", cy: "19", r: "1")
                    end
                  end
                end
                DropdownMenuContent do
                  DropdownMenuItem(href: "/users/#{user.id}/edit") { "Edit" }
                  DropdownMenuItem(href: "/users/#{user.id}") { "View" }
                  DropdownMenuSeparator
                  DropdownMenuItem(href: "/users/#{user.id}", class: "text-destructive") { "Delete" }
                end
              end
            end
          end
        end
      end

      TableCaption { "A list of all users in your organization." }
    end
  end

  private

  def role_variant(role)
    case role
    when "admin" then :destructive
    when "moderator" then :warning
    else :secondary
    end
  end
end
```

--------------------------------

### Avatar Component Examples

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Displays user profile images with fallback support for initials. Supports multiple sizes (xs, sm, md, lg, xl) and avatar stacks for group displays.

```ruby
class UserAvatar < Phlex::HTML
  include RubyUI

  def view_template
    # Basic avatar with image
    Avatar do
      AvatarImage(src: "/avatars/user.jpg", alt: "John Doe")
      AvatarFallback { "JD" }  # Shows if image fails
    end

    # Different sizes: xs, sm, md, lg, xl
    Avatar(size: :xs) do
      AvatarImage(src: "/avatars/small.jpg", alt: "User")
      AvatarFallback { "U" }
    end

    Avatar(size: :lg) do
      AvatarImage(src: "/avatars/large.jpg", alt: "User")
      AvatarFallback { "JD" }
    end

    Avatar(size: :xl) do
      AvatarImage(src: "/avatars/xlarge.jpg", alt: "User")
      AvatarFallback { "JD" }
    end

    # Avatar stack (overlapping avatars)
    div(class: "flex -space-x-4") do
      Avatar(class: "border-2 border-background") do
        AvatarImage(src: "/avatars/1.jpg", alt: "User 1")
        AvatarFallback { "U1" }
      end
      Avatar(class: "border-2 border-background") do
        AvatarImage(src: "/avatars/2.jpg", alt: "User 2")
        AvatarFallback { "U2" }
      end
      Avatar(class: "border-2 border-background") do
        AvatarImage(src: "/avatars/3.jpg", alt: "User 3")
        AvatarFallback { "U3" }
      end
      Avatar(class: "border-2 border-background") do
        AvatarFallback { "+5" }
      end
    end
  end
end
```

--------------------------------

### Building a Registration Form with Ruby UI

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Use this snippet to create a multi-field registration form. It includes examples for text, email, password inputs, textarea, checkbox, and switch components, each with associated labels, hints, and error display areas.

```ruby
class RegistrationForm < Phlex::HTML
  include RubyUI

  def view_template
    Form(action: "/register", method: :post, class: "space-y-6") do
      # Text input with label and hint
      FormField do
        FormFieldLabel(for: "username") { "Username" }
        Input(id: "username", name: "user[username]", placeholder: "johndoe", required: true)
        FormFieldHint { "This will be your unique identifier." }
        FormFieldError  # Displays validation errors
      end

      # Email input
      FormField do
        FormFieldLabel(for: "email") { "Email" }
        Input(id: "email", name: "user[email]", type: :email, placeholder: "john@example.com", required: true)
      end

      # Password input
      FormField do
        FormFieldLabel(for: "password") { "Password" }
        Input(id: "password", name: "user[password]", type: :password, required: true, minlength: 8)
        FormFieldHint { "Must be at least 8 characters." }
        FormFieldError
      end

      # Textarea
      FormField do
        FormFieldLabel(for: "bio") { "Bio" }
        Textarea(id: "bio", name: "user[bio]", rows: 4, placeholder: "Tell us about yourself...")
      end

      # Checkbox
      FormField do
        div(class: "flex items-center space-x-2") do
          Checkbox(id: "terms", name: "user[terms]", required: true)
          label(for: "terms", class: "text-sm") { "I agree to the terms and conditions" }
        end
      end

      # Switch toggle
      FormField do
        div(class: "flex items-center justify-between") do
          div do
            FormFieldLabel { "Marketing emails" }
            FormFieldHint { "Receive emails about new features." }
          end
          Switch(name: "user[marketing]", checked_value: "1", unchecked_value: "0")
        end
      end

      Button(type: :submit, class: "w-full") { "Create Account" }
    end
  end
end
```

--------------------------------

### Use CustomButton in a Phlex Component

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Demonstrates how to integrate and use the CustomButton component within a Phlex::HTML view. Shows examples of different variants and applying custom classes.

```ruby
class MyPage < Phlex::HTML
  include RubyUI

  def view_template
    CustomButton(variant: :gradient) { "Gradient Button" }
    CustomButton(variant: :default, class: "w-full") { "Full Width" }
  end
end
```

--------------------------------

### Tabs Component Example

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Implement a tabbed interface with multiple content panels. Supports setting a default active tab and organizing content within TabsList and TabsContent blocks.

```ruby
class AccountSettings < Phlex::HTML
  include RubyUI

  def view_template
    Tabs(default: "account") do  # Set default active tab
      TabsList do
        TabsTrigger(value: "account") { "Account" }
        TabsTrigger(value: "password") { "Password" }
        TabsTrigger(value: "notifications") { "Notifications" }
      end

      TabsContent(value: "account") do
        Card do
          CardHeader do
            CardTitle { "Account" }
            CardDescription { "Make changes to your account here." }
          end
          CardContent(class: "space-y-4") do
            FormField do
              FormFieldLabel(for: "name") { "Name" }
              Input(id: "name", value: "John Doe")
            end
            FormField do
              FormFieldLabel(for: "email") { "Email" }
              Input(id: "email", value: "john@example.com", type: :email)
            end
          end
          CardFooter do
            Button { "Save Changes" }
          end
        end
      end

      TabsContent(value: "password") do
        Card do
          CardHeader do
            CardTitle { "Password" }
            CardDescription { "Change your password here." }
          end
          CardContent(class: "space-y-4") do
            FormField do
              FormFieldLabel(for: "current") { "Current Password" }
              Input(id: "current", type: :password)
            end
            FormField do
              FormFieldLabel(for: "new") { "New Password" }
              Input(id: "new", type: :password)
            end
          end
          CardFooter do
            Button { "Update Password" }
          end
        end
      end

      TabsContent(value: "notifications") do
        Card do
          CardHeader do
            CardTitle { "Notifications" }
            CardDescription { "Configure your notification preferences." }
          end
          CardContent do
            div(class: "flex items-center justify-between") do
              span { "Email notifications" }
              Switch(name: "email_notifications")
            end
          end
        end
      end
    end
  end
end
```

--------------------------------

### RubyUI Card Component Structure

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Illustrates how to compose the Card component and its sub-components (CardHeader, CardTitle, CardDescription, CardContent, CardFooter) to create a user profile card. This example requires a user object with name, email, created_at, and bio attributes.

```ruby
class UserProfileCard < Phlex::HTML
  include RubyUI

  def initialize(user:)
    @user = user
  end

  def view_template
    Card do
      CardHeader do
        CardTitle { @user.name }
        CardDescription { @user.email }
      end

      CardContent do
        p { "Member since #{@user.created_at.strftime('%B %Y')}" }
        p(class: "text-muted-foreground") { @user.bio }
      end

      CardFooter do
        Button(variant: :outline) { "Edit Profile" }
        Button(variant: :primary) { "View Activity" }
      end
    end
  end
end
```

--------------------------------

### Badge Component Examples

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Displays small status indicators or labels with various color variants and sizes. Supports semantic colors and all Tailwind CSS color palettes.

```ruby
class StatusBadges < Phlex::HTML
  include RubyUI

  def view_template
    # Semantic variants
    Badge(variant: :primary) { "Primary" }
    Badge(variant: :secondary) { "Secondary" }
    Badge(variant: :outline) { "Outline" }
    Badge(variant: :destructive) { "Destructive" }
    Badge(variant: :success) { "Success" }
    Badge(variant: :warning) { "Warning" }

    # Size variants: sm, md, lg
    Badge(size: :sm) { "Small" }
    Badge(size: :md) { "Medium" }
    Badge(size: :lg) { "Large" }

    # Color variants (all Tailwind colors)
    Badge(variant: :blue) { "Blue" }
    Badge(variant: :green) { "Green" }
    Badge(variant: :red) { "Red" }
    Badge(variant: :yellow) { "Yellow" }
    Badge(variant: :purple) { "Purple" }
    Badge(variant: :pink) { "Pink" }
    Badge(variant: :indigo) { "Indigo" }
    Badge(variant: :teal) { "Teal" }

    # Usage in context
    div(class: "flex items-center gap-2") do
      span { "Status:" }
      Badge(variant: :success) { "Active" }
    end

    # With icon
    Badge(variant: :warning) do
      svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "currentColor", class: "w-3 h-3 mr-1") do |s|
        s.path(d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z")
      end
      span { "Warning" }
    end
  end
end
```

--------------------------------

### Creating a Country Selector with Ruby UI

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Implement a dropdown for country selection using the Select component. This example shows how to structure options and includes a hidden input for form submission, integrating with Stimulus.js.

```ruby
class CountrySelector < Phlex::HTML
  include RubyUI

  def view_template
    FormField do
      FormFieldLabel { "Country" }

      Select do
        SelectTrigger do
          SelectValue(placeholder: "Select a country")
        end

        SelectContent do
          SelectItem(value: "us") { "United States" }
          SelectItem(value: "uk") { "United Kingdom" }
          SelectItem(value: "ca") { "Canada" }
          SelectItem(value: "au") { "Australia" }
          SelectItem(value: "de") { "Germany" }
          SelectItem(value: "fr") { "France" }
        end
      end

      # Hidden input for form submission
      input(type: "hidden", name: "country", data: { ruby_ui__select_target: "input" })
    end
  end
end
```

--------------------------------

### Implement Tooltip with Various Placements

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Use the Tooltip component for contextual information. Supports different placements like top, bottom, left, and right, controlled via the `placement` prop.

```ruby
class TooltipExamples < Phlex::HTML
  include RubyUI

  def view_template
    # Basic tooltip
    Tooltip do
      TooltipTrigger do
        Button(variant: :outline) { "Hover me" }
      end
      TooltipContent { "This is a helpful tooltip" }
    end

    # Different placements: top, bottom, left, right
    Tooltip(placement: "top") do
      TooltipTrigger do
        Button(variant: :outline) { "Top" }
      end
      TooltipContent { "Tooltip on top" }
    end

    Tooltip(placement: "bottom") do
      TooltipTrigger do
        Button(variant: :outline) { "Bottom" }
      end
      TooltipContent { "Tooltip on bottom" }
    end

    Tooltip(placement: "left") do
      TooltipTrigger do
        Button(variant: :outline) { "Left" }
      end
      TooltipContent { "Tooltip on left" }
    end

    Tooltip(placement: "right") do
      TooltipTrigger do
        Button(variant: :outline) { "Right" }
      end
      TooltipContent { "Tooltip on right" }
    end

    # Tooltip with rich content
    Tooltip do
      TooltipTrigger do
        Button(variant: :outline, icon: true) do
          svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "w-4 h-4") do |s|
            s.circle(cx: "12", cy: "12", r: "10")
            s.path(d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3")
            s.path(d: "M12 17h.01")
          end
        end
      end
      TooltipContent do
        p(class: "font-semibold") { "Help" }
        p { "Click for more information" }
      end
    end
  end
end
```

--------------------------------

### Create Programmatically Controlled Dialog

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Demonstrates a dialog that can be controlled programmatically via the 'open' attribute. Includes a form for editing profile information.

```ruby
class EditProfileDialog < Phlex::HTML
  include RubyUI

  def view_template
    Dialog(open: false) do  # Can be controlled via open: true/false
      DialogTrigger do
        Button { "Edit Profile" }
      end

      DialogContent(size: :lg) do
        DialogHeader do
          DialogTitle { "Edit Profile" }
          DialogDescription { "Make changes to your profile here." }
        end

        Form(action: "/profile", method: :patch) do
          FormField do
            FormFieldLabel(for: "name") { "Name" }
            Input(id: "name", name: "name", placeholder: "Enter your name")
            FormFieldHint { "This is your public display name." }
          end

          FormField do
            FormFieldLabel(for: "email") { "Email" }
            Input(id: "email", name: "email", type: :email, placeholder: "email@example.com")
          end

          div(class: "flex justify-end gap-2 mt-4") do
            Button(variant: :outline, type: :button) { "Cancel" }
            Button(type: :submit) { "Save Changes" }
          end
        end
      end
    end
  end
end
```

--------------------------------

### Create Notification Card

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Renders a notification card with a title, description, and a switch for push notifications. Includes a button to mark all as read.

```ruby
class NotificationCard < Phlex::HTML
  include RubyUI

  def view_template
    Card(class: "w-[380px]") do
      CardHeader do
        CardTitle { "Notifications" }
        CardDescription { "You have 3 unread messages." }
      end

      CardContent(class: "grid gap-4") do
        div(class: "flex items-center space-x-4 rounded-md border p-4") do
          # Notification item content
          div(class: "flex-1 space-y-1") do
            p(class: "text-sm font-medium leading-none") { "Push Notifications" }
            p(class: "text-sm text-muted-foreground") { "Send notifications to device." }
          end
          Switch(name: "push_notifications")
        end
      end

      CardFooter do
        Button(class: "w-full") { "Mark all as read" }
      end
    end
  end
end
```

--------------------------------

### Run All Tests and Linter (Rake)

Source: https://github.com/ruby-ui/ruby_ui/blob/main/AGENTS.md

Execute the default rake task to run all tests and the linter. This is the primary command for ensuring code quality.

```bash
bundle exec rake
```

--------------------------------

### Run Linter in RubyUI

Source: https://github.com/ruby-ui/ruby_ui/blob/main/CONTRIBUTING.md

Apply the Standard Ruby linter to maintain consistent code formatting. This is a required step before submitting changes.

```bash
bundle exec rake standard
```

--------------------------------

### RubyUI Button Component Usage

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Demonstrates various ways to use the Button component, including different variants, sizes, icon-only buttons, buttons with text, disabled states, and custom class overrides. Ensure Phlex and RubyUI are included in your component.

```ruby
# Basic button usage in a Phlex component
class MyComponent < Phlex::HTML
  include RubyUI

  def view_template
    # Default primary button
    Button { "Click me" }

    # Different variants
    Button(variant: :primary) { "Primary" }
    Button(variant: :secondary) { "Secondary" }
    Button(variant: :destructive) { "Delete" }
    Button(variant: :outline) { "Outline" }
    Button(variant: :ghost) { "Ghost" }
    Button(variant: :link) { "Link" }

    # Different sizes
    Button(size: :sm) { "Small" }
    Button(size: :md) { "Medium" }
    Button(size: :lg) { "Large" }
    Button(size: :xl) { "Extra Large" }

    # Icon button (square, same width and height)
    Button(variant: :outline, icon: true) do
      svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 20 20", fill: "currentColor", class: "w-5 h-5") do |s|
        s.path(fill_rule: "evenodd", d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z", clip_rule: "evenodd")
      end
    end

    # Button with icon and text
    Button(variant: :primary) do
      svg(xmlns: "http://www.w3.org/2000/svg", fill: "none", viewbox: "0 0 24 24", stroke_width: "1.5", stroke: "currentColor", class: "w-4 h-4 mr-2") do |s|
        s.path(stroke_linecap: "round", stroke_linejoin: "round", d: "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75")
      end
      span { "Login with Email" }
    end

    # Disabled and loading states
    Button(disabled: true) { "Disabled" }
    Button(aria: { disabled: "true" }) { "Aria Disabled" }

    # Submit button for forms
    Button(variant: :primary, type: :submit) { "Submit Form" }

    # Custom class override (merged with defaults using TailwindMerge)
    Button(class: "w-full rounded-full") { "Full Width Rounded" }
  end
end
```

--------------------------------

### Run Tests in RubyUI

Source: https://github.com/ruby-ui/ruby_ui/blob/main/CONTRIBUTING.md

Execute the test suite to ensure changes do not introduce regressions. This command is part of the contribution process.

```bash
bundle exec rake test
```

--------------------------------

### Run Single Test File (Rake)

Source: https://github.com/ruby-ui/ruby_ui/blob/main/AGENTS.md

Execute a specific test file using the rake task by specifying the TEST environment variable.

```bash
bundle exec rake test TEST=test/ruby_ui/button_test.rb
```

--------------------------------

### Create Confirmation Dialog

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Implements a confirmation dialog with a trigger button, title, description, and action buttons for cancellation and destructive actions. Includes size variants and backdrop.

```ruby
class ConfirmationDialog < Phlex::HTML
  include RubyUI

  def view_template
    Dialog do
      DialogTrigger do
        Button(variant: :outline) { "Open Dialog" }
      end

      DialogContent(size: :md) do  # sizes: :xs, :sm, :md, :lg, :xl, :full
        DialogHeader do
          DialogTitle { "Confirm Action" }
          DialogDescription { "Are you sure you want to proceed? This action cannot be undone." }
        end

        div(class: "py-4") do
          p { "This will permanently delete your account and all associated data." }
        end

        DialogFooter do
          DialogClose do
            Button(variant: :outline) { "Cancel" }
          end
          Button(variant: :destructive) { "Delete Account" }
        end
      end
    end
  end
end
```

--------------------------------

### Add RubyUI Gem to Gemfile

Source: https://github.com/ruby-ui/ruby_ui/blob/main/README.md

Alternatively, add the RubyUI gem to your Gemfile. Ensure it's in the development group and not required at boot.

```ruby
gem "ruby_ui", group: :development, require: false
```

--------------------------------

### Generate a Single RubyUI Component

Source: https://github.com/ruby-ui/ruby_ui/blob/main/README.md

Use the `ruby_ui:component` generator to create a specific UI component, such as an Accordion. This allows for modular component creation.

```bash
bin/rails g ruby_ui:component Accordion
```

--------------------------------

### Displaying Alerts with Different Variants

Source: https://context7.com/ruby-ui/ruby_ui/llms.txt

Use the Alert component to display important messages. It supports default, warning, success, and destructive variants, along with custom icons and titles.

```ruby
class NotificationAlerts < Phlex::HTML
  include RubyUI

  def view_template
    # Default alert
    Alert do
      info_icon
      AlertTitle { "Heads up!" }
      AlertDescription { "You can add components to your app using the CLI." }
    end

    # Warning alert
    Alert(variant: :warning) do
      warning_icon
      AlertTitle { "Warning" }
      AlertDescription { "Your session will expire in 5 minutes." }
    end

    # Success alert
    Alert(variant: :success) do
      check_icon
      AlertTitle { "Success!" }
      AlertDescription { "Your changes have been saved successfully." }
    end

    # Destructive/error alert
    Alert(variant: :destructive) do
      error_icon
      AlertTitle { "Error" }
      AlertDescription { "Something went wrong. Please try again." }
    end
  end

  private

  def info_icon
    svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "h-4 w-4") do |s|
      s.circle(cx: "12", cy: "12", r: "10")
      s.path(d: "M12 16v-4")
      s.path(d: "M12 8h.01")
    end
  end

  def warning_icon
    svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "h-4 w-4") do |s|
      s.path(d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z")
      s.line(x1: "12", y1: "9", x2: "12", y2: "13")
      s.line(x1: "12", y1: "17", x2: "12.01", y2: "17")
    end
  end

  def check_icon
    svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "h-4 w-4") do |s|
      s.path(d: "M22 11.08V12a10 10 0 1 1-5.93-9.14")
      s.polyline(points: "22 4 12 14.01 9 11.01")
    end
  end

  def error_icon
    svg(xmlns: "http://www.w3.org/2000/svg", viewbox: "0 0 24 24", fill: "none", stroke: "currentColor", stroke_width: "2", class: "h-4 w-4") do |s|
      s.circle(cx: "12", cy: "12", r: "10")
      s.line(x1: "15", y1: "9", x2: "9", y2: "15")
      s.line(x1: "9", y1: "9", x2: "15", y2: "15")
    end
  end
end
```

--------------------------------

### Auto-fix Lint Issues (StandardRB)

Source: https://github.com/ruby-ui/ruby_ui/blob/main/AGENTS.md

Automatically fix linting issues detected by StandardRB. Use this command to resolve style violations.

```bash
standardrb --fix
```