### Install Lightning UI Kit (Bash)

Source: https://context7_llms

Instructions for installing the Lightning UI Kit gem using Bundler. This involves adding the gem to the Gemfile and running the bundle command.

```bash
bundle
```

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

### Combobox Component Examples (Autocomplete)

Source: https://context7_llms

Provides multiple examples of a combobox component, showcasing single and multiple selections, client-side and server-side filtering, and advanced usage with nested attributes for form associations. This component facilitates user input for selecting from a list of options.

```erb
<%# Single selection with client-side filtering %>
<%= render LightningUiKit::ComboboxComponent.new(
  name: :country,
  label: "Country",
  placeholder: "Search countries...",
  options: [
    { value: "us", label: "United States" },
    { value: "uk", label: "United Kingdom" },
    { value: "ca", label: "Canada" }
  ]
) %>

<%# Multiple selection %>
<%= render LightningUiKit::ComboboxComponent.new(
  name: :tags,
  label: "Tags",
  multiple: true,
  allow_custom: true,
  selected: ["ruby", "rails"],
  options: [
    { value: "ruby", label: "Ruby" },
    { value: "rails", label: "Rails" },
    { value: "javascript", label: "JavaScript" }
  ]
) %>

<%# Server-side filtering %>
<%= render LightningUiKit::ComboboxComponent.new(
  name: :user_id,
  label: "User",
  url: "/api/users/search",
  min_chars: 2,
  debounce: 300
) %>

<%# Nested attributes for has_many :through associations (SimpleForm-inspired) %>
<%# Supports: selecting existing records, creating new records, removing associations %>
<%= form_with model: @post do |f| %>
  <%= render LightningUiKit::ComboboxComponent.new(
    form: f,
    association: :post_tags,        # Join association name
    foreign_key: :tag_id,           # FK in join table for existing records
    nested_model: :tag,             # Nested model for creating new records
    collection: Tag.all,            # Or array of objects
    label_method: :name,            # Method for labels (default: :to_s)
    value_method: :id,              # Method for values (default: :id)
    allow_custom: true,             # Enable creating new tags inline
    label: "Tags",
    placeholder: "Search or create tags..."
  ) %>
<% end %>

<%# Manual nested attributes (without association helper) %>
<%= render LightningUiKit::ComboboxComponent.new(
  name: :post_tags_attributes,
  foreign_key: :tag_id,
  nested_model: :tag,
  allow_custom: true,
  options: [
    { value: 1, label: "Ruby" },
    { value: 2, label: "Rails" }
  ],
  selected: [
    { join_id: 1, value: 1 },  # Existing join record (id=1) with tag_id=1
    { join_id: 2, value: 2 }   # Existing join record (id=2) with tag_id=2
  ]
) %>
```

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

### Render Button Component (ERB)

Source: https://context7_llms

Example of rendering a simple button component from the Lightning UI Kit. This shows basic component instantiation with text content.

```erb
<%= render LightningUiKit::ButtonComponent.new(text: "Click me!") %>
```

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

### Render Modal Component with Slots (ERB)

Source: https://context7_llms

Usage example of the `ModalComponent`, demonstrating how to populate its `body` and `actions` slots using block syntax. This showcases component composition.

```erb
<%= render LightningUiKit::ModalComponent.new(id: "confirm", title: "Confirm") do |modal|
  % modal.with_body do %>
    <p>Are you sure?</p>
  <% end %>
  <% modal.with_action do %>
    <%= render LightningUiKit::ButtonComponent.new(style: :outline) { "Cancel" } %>
  <% end %>
  <% modal.with_action do %>
    <%= render LightningUiKit::ButtonComponent.new { "Confirm" } %>
  <% end %>
<% end %>
```

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

### Responsive and State Variants with `lui:` Prefix (HTML/ERB)

Source: https://context7_llms

Examples of using responsive, hover, focus, disabled, and data attribute states with the `lui:` prefix for Tailwind CSS classes.

```erb
lui:sm:px-3          <%# Responsive %>
lui:hover:bg-zinc-50 <%# Hover state %>
lui:focus:ring-2     <%# Focus state %>
lui:disabled:opacity-50  <%# Disabled state %>
lui:data-invalid:border-red-500  <%# Data attribute state %>
```

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

### Render Table with Dynamic Columns (ERB)

Source: https://context7_llms

Example of rendering a `TableComponent` with dynamically defined columns and actions. This allows for flexible table structures based on data.

```erb
<%= render LightningUiKit::TableComponent.new(data: @users) do |table|
  % table.with_column("Name") { |user| user.name }
  % table.with_column("Email") { |user| user.email }
  % table.with_action { |user| link_to "Edit", edit_user_path(user) }
<% end %>
```

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

### CSS Targeting Data Slots (CSS)

Source: https://context7_llms

Example of CSS using attribute selectors to target elements based on their `data-slot` attributes, demonstrating how to style elements relative to each other.

```css
lui:[&>[data-slot=label]+[data-slot=control]]:mt-3
```

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

### Button Component Variants

Source: https://context7_llms

Shows various ways to render a button component with different styles and states, including default, outline, destructive, small size, as a link, and disabled. These examples utilize a Ruby helper for component rendering.

```erb
<%# Default button %>
<%= render LightningUiKit::ButtonComponent.new { "Submit" } %>

<%# Outline style %>
<%= render LightningUiKit::ButtonComponent.new(style: :outline) { "Cancel" } %>

<%# Destructive action %>
<%= render LightningUiKit::ButtonComponent.new(style: :destructive) { "Delete" } %>

<%# Small size %>
<%= render LightningUiKit::ButtonComponent.new(size: :small) { "Edit" } %>

<%# As link %>
<%= render LightningUiKit::ButtonComponent.new(url: "/dashboard") { "Go to Dashboard" } %>

<%# Disabled %>
<%= render LightningUiKit::ButtonComponent.new(disabled: true) { "Loading..." } %>
```

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

### Form Integration with Rails FormBuilder (ERB)

Source: https://context7_llms

Example of integrating Lightning UI Kit form components within a standard Rails `form_with` block. This demonstrates using `InputComponent` and `TextareaComponent` with a form object.

```erb
<%= form_with model: @user do |form|
  <%= render LightningUiKit::InputComponent.new(
    name: :email,
    type: :email,
    label: "Email Address",
    form: form,
    placeholder: "user@example.com"
  ) %>

  <%= render LightningUiKit::TextareaComponent.new(
    name: :bio,
    label: "Biography",
    form: form,
    rows: 4
  ) %>

  <%= render LightningUiKit::ButtonComponent.new(type: :submit) { "Save" } %>
<% end %>
```

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

### Input Component with Options

Source: https://context7_llms

Illustrates the usage of an input component with a comprehensive set of options, including name, type, label, description, placeholder, autofocus, and form association. This component is designed for flexible form input management.

```erb
<%= render LightningUiKit::InputComponent.new(
  name: :username,
  type: :text,
  label: "Username",
  description: "Choose a unique username",
  placeholder: "john_doe",
  autofocus: true,
  form: form
) %>
```

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

### Tooltip Component Usage

Source: https://context7_llms

Demonstrates how to implement a tooltip component that displays helpful information when a user hovers over an element. It accepts text content and a position for the tooltip.

```erb
<%= render LightningUiKit::TooltipComponent.new(
  text: "This is helpful information",
  position: :top
) do %>
  <button>Hover me</button>
<% end %>
```

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

### Layout Component with Sidebar and Footer

Source: https://context7_llms

Demonstrates the structure of a page layout component that includes a sidebar, a mobile header, and a footer. This component facilitates consistent page structure and content organization.

```erb
<%= render LightningUiKit::LayoutComponent.new do |layout| %>
  <% layout.with_sidebar do %>
    <div class="lui:p-4">
      <div class="lui:flex lui:items-center lui:mb-6">
        <span class="lui:text-xl lui:font-semibold">My App</span>
      </div>
      <nav class="lui:flex lui:flex-col lui:gap-1">
        <a href="#" class="lui:px-3 lui:py-2 lui:rounded-lg lui:bg-zinc-100">Home</a>
        <a href="#" class="lui:px-3 lui:py-2 lui:rounded-lg lui:hover:bg-zinc-50">Settings</a>
      </nav>
    </div>
  <% end %>

  <% layout.with_footer do %>
    <div class="lui:p-4">
      <p class="lui:text-sm lui:text-zinc-500">Logged in as user@example.com</p>
    </div>
  <% end %>

  <% layout.with_mobile_header do %>
    <span class="lui:font-semibold">My App</span>
  <% end %>

  <h1 class="lui:text-2xl lui:font-bold">Dashboard</h1>
  <p>Main content goes here</p>
<% end %>
```

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

### Binding Controllers with Data Attributes

Source: https://context7_llms

Demonstrates how to bind controllers and actions using data attributes in HTML. This is a common pattern in JavaScript frameworks for declarative UI management.

```erb
<div data-controller="lui-dropdown">
  <button data-action="click->lui-dropdown#toggle">Menu</button>
  <div data-lui-dropdown-target="menu">...</div>
</div>
```

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

### Apply Tailwind CSS Classes with `lui:` Prefix (HTML/ERB)

Source: https://context7_llms

Demonstrates the correct way to apply Tailwind CSS classes using the required `lui:` prefix. Incorrectly prefixed classes will not be processed.

```erb
<%# Correct %>
<div class="lui:px-4 lui:py-2 lui:text-blue-600 lui:hover:bg-zinc-50">

<%# WRONG - will not work %>
<div class="px-4 py-2 text-blue-600 hover:bg-zinc-50">
</div>
```

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

### Render Layout with Sidebar Sections (ERB)

Source: https://context7_llms

This ERB template demonstrates how to use the `LightningUiKit::LayoutComponent` to build a page layout. It includes sections for a header, multiple sidebar sections with links, a footer, and the main content area. The component relies on Rails, ViewComponent, and Tailwind CSS for styling.

```erb
<%= render LightningUiKit::LayoutComponent.new do |layout| %>
  <% layout.with_header do %>
    <div class="lui:flex lui:items-center lui:gap-2">
      <%= image_tag "logo.svg", class: "lui:h-6" %>
      <span class="lui:font-semibold">My App</span>
    </div>
  <% end %>

  <% layout.with_section do |section| %>
    <% section.with_link(title: "Search", url: "/search", icon: "magnifying-glass") %>
    <% section.with_link(title: "Inbox", url: "/inbox", icon: "inbox") %>
  <% end %>

  <% layout.with_section do |section| %>
    <% section.with_link(title: "Home", url: "/", icon: "home", current: true) %>
    <% section.with_link(title: "Events", url: "/events", icon: "calendar") %>
    <% section.with_link(title: "Settings", url: "/settings", icon: "cog-6-tooth") %>
  <% end %>

  <% layout.with_section(title: "Upcoming Events") do |section| %>
    <% section.with_link(title: "Bear Hug: Live in Concert", url: "/events/1") %>
    <% section.with_link(title: "Viking People", url: "/events/2") %>
  <% end %>

  <% layout.with_footer do %>
    <div class="lui:p-4">
      <%= render LightningUiKit::SidebarLinkComponent.new(title: "Support", url: "/support", icon: "question-mark-circle") %>
    </div>
  <% end %>

  <p>Main content here</p>
<% end %>
```

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

### Define Modal Component with Slots (Ruby)

Source: https://context7_llms

Demonstrates how to define a modal component using `renders_one` for the body and `renders_many` for actions. This allows for flexible content injection into modal components.

```ruby
class LightningUiKit::ModalComponent < LightningUiKit::BaseComponent
  renders_one :body
  renders_many :actions

  def initialize(id:, title:, description: nil, open: false, **options)
    # ...
  end
end
```

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

### Render Dropdown Menu Component (ERB)

Source: https://context7_llms

Shows how to render a `DropdownComponent` with multiple items. Each item is defined using a block, allowing for custom content within dropdown options.

```erb
<%= render LightningUiKit::DropdownComponent.new(trigger_text: "Options") do |dropdown|
  % dropdown.with_item do %>
    <%= link_to "Edit", "#", class: "lui:block lui:px-4 lui:py-2" %>
  <% end %>
  <% dropdown.with_item do %>
    <%= link_to "Delete", "#", class: "lui:block lui:px-4 lui:py-2" %>
  <% end %>
<% end %>
```

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

### JavaScript Stimulus Controller for Interactivity

Source: https://context7_llms

Illustrates a basic Stimulus controller for managing interactive UI elements. It defines targets and values, and includes lifecycle methods like `connect`. This pattern is used by LightningUiKit components for dynamic behavior.

```javascript
// app/javascript/lightning_ui_kit/controllers/example_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["element"]
  static values = { active: Boolean, position: String }

  connect() {
    // Setup logic
  }

  toggle() {
    // Action logic
  }
}
```

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

### Registering Stimulus Controllers in Rails

Source: https://context7_llms

Shows how to register a Stimulus controller within a Rails application's JavaScript entry point. This makes the controller available for use with HTML elements that declare the corresponding data attributes.

```javascript
application.register(`${namespace}-example`, ExampleController)
```

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

### Add Lightning UI Kit Assets (ERB)

Source: https://context7_llms

How to include the Lightning UI Kit's stylesheet and JavaScript assets in your application's main layout file.

```erb
<%= stylesheet_link_tag "lightning_ui_kit" %>
<%= javascript_include_tag "lightning_ui_kit" %>
```

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

### Data Slots for Semantic Structure (HTML)

Source: https://context7_llms

Illustrates the use of `data-slot` attributes for defining semantic areas within HTML elements, enabling targeted styling and JavaScript interactions.

```html
<label data-slot="label">Email</label>
<p data-slot="description">We'll never share your email</p>
<span data-slot="control"><input /></span>
<p data-slot="error">Invalid email</p>
```

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

### Input Component with Error Handling (Ruby/ERB)

Source: https://context7_llms

Illustrates how to display validation errors with Lightning UI Kit components. Errors can be automatically detected from the form object or explicitly passed.

```ruby
# Errors are automatically extracted from form object
<%= render LightningUiKit::InputComponent.new(
  name: :email,
  form: form,
  error: @user.errors[:email].first  # Or omit for auto-detection
) %>
```

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

### Merge CSS Classes with `merge_classes()` (Ruby)

Source: https://context7_llms

Shows how to use the `merge_classes()` helper method to intelligently merge CSS class strings, resolving conflicts and handling user overrides. This is useful for dynamic class generation.

```ruby
def classes
  class_list = ["lui:px-4 lui:py-2"]
  class_list << "lui:bg-blue-500" if @primary
  class_list << @options[:class]  # User overrides
  merge_classes(class_list.compact.join(" "))
end
```

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

### Toast Notification Component

Source: https://context7_llms

Shows how to render a toast notification component, which provides temporary feedback to the user. The component accepts a timeout duration and content to display.

```erb
<%= render LightningUiKit::ToastComponent.new(timeout: 5000) do %>
  <p>Your changes have been saved!</p>
<% end %>
```

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

### Ruby Component Structure with ViewComponent

Source: https://context7_llms

Defines the structure for a ViewComponent in Rails, including initialization, class merging with Tailwind CSS, and Stimulus data attributes. It leverages `LightningUiKit::BaseComponent` and `merge_classes` for styling and interactivity.

```ruby
# app/components/lightning_ui_kit/example_component.rb
class LightningUiKit::ExampleComponent < LightningUiKit::BaseComponent
  def initialize(required_param:, optional_param: default_value, **options)
    @required_param = required_param
    @optional_param = optional_param
    @options = options  # Captures extra attributes for flexibility
  end

  def classes
    merge_classes(["lui:base-classes", @options[:class]].compact.join(" "))
  end

  def data_attributes
    { controller: "lui-example" }.merge(@options[:data] || {})
  end
end
```

```erb
<%# app/components/lightning_ui_kit/example_component.html.erb %>
<%= tag.div(class: classes, data: data_attributes) do %>
  <%= content %>
<% end %>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.