### Start Dummy App for Testing (Bash)
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Provides instructions to navigate to the dummy application directory and start the development server. This is used for testing the implemented components.
```bash
# Start the dummy app
cd test/dummy
bin/dev
```
--------------------------------
### Install Fernandes UI Gem and Dependencies (Bash)
Source: https://context7.com/fernandes/ui/llms.txt
Installs the fernandes-ui gem, runs the installation generator, and sets up JavaScript dependencies using Bun. This includes building CSS with Tailwind 4 and starting the development server.
```bash
# Add to Gemfile
bundle add fernandes-ui
# Run the install generator
rails generate ui:install
# Install JavaScript dependencies
bun install
# Build CSS with Tailwind 4
bun run build:css
# Start development server with live reload
bin/dev
```
--------------------------------
### Install Dependencies and Configure Lookbook
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Installs necessary development dependencies like `tailwind_merge` and `lookbook`, then configures Lookbook for the dummy application, specifying preview paths and UI theme. This setup is crucial for previewing and testing components during migration.
```bash
# Add to ui.gemspec
spec.add_development_dependency "tailwind_merge", "~> 0.13"
spec.add_development_dependency "lookbook", "~> 2.3"
# Run bundle install
bundle install
```
```ruby
# test/dummy/config/initializers/lookbook.rb
if defined?(Lookbook) && Rails.env.development?
Lookbook.configure do |config|
config.project_name = "UI Engine Components"
config.preview_paths = [
Rails.root.join("test/components/previews"),
Rails.root.join("../../test/components/previews") # Engine previews
]
config.ui_theme = "indigo"
config.auto_refresh = true
end
end
```
--------------------------------
### Phlex Button Component Examples
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Demonstrates the implementation of a Button component using Phlex. Includes default rendering, showcasing various variants, different sizes, and an interactive playground with configurable options.
```ruby
class ButtonPhlexPreview < Lookbook::Preview
# @label Default
# @display bg_color "#f5f5f5"
# @display padding "2rem"
def default
render DefaultExample.new
end
# @label All Variants
# @display bg_color "#f5f5f5"
# @display padding "2rem"
def variants
render VariantsExample.new
end
# @label All Sizes
# @display bg_color "#f5f5f5"
# @display padding "2rem"
def sizes
render SizesExample.new
end
# @label Interactive Playground
# @param variant select { choices: [default, destructive, outline, secondary, ghost, link] }
# @param size select { choices: [default, sm, lg, icon, icon-sm, icon-lg] }
# @param disabled toggle
# @param text text "Button"
def playground(variant: "default", size: "default", disabled: false, text: "Button")
render PlaygroundExample.new(variant: variant, size: size, disabled: disabled, text: text)
end
class DefaultExample < Phlex::HTML
def view_template
render ::UI::Button::Button.new { "Click me" }
end
end
class VariantsExample < Phlex::HTML
def view_template
div(class: "flex flex-wrap gap-4") do
render ::UI::Button::Button.new(variant: "default") { "Default" }
render ::UI::Button::Button.new(variant: "secondary") { "Secondary" }
render ::UI::Button::Button.new(variant: "destructive") { "Destructive" }
render ::UI::Button::Button.new(variant: "outline") { "Outline" }
render ::UI::Button::Button.new(variant: "ghost") { "Ghost" }
render ::UI::Button::Button.new(variant: "link") { "Link" }
end
end
end
class SizesExample < Phlex::HTML
def view_template
div(class: "flex flex-wrap items-center gap-4") do
render ::UI::Button::Button.new(size: "sm") { "Small" }
render ::UI::Button::Button.new(size: "default") { "Default" }
render ::UI::Button::Button.new(size: "lg") { "Large" }
end
end
end
class PlaygroundExample < Phlex::HTML
def initialize(variant:, size:, disabled:, text:)
@variant, @size, @disabled, @text = variant, size, disabled, text
end
def view_template
render ::UI::Button::Button.new(variant: @variant, size: @size, disabled: @disabled) { @text }
end
end
end
```
--------------------------------
### ViewComponent Button Examples
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Illustrates the integration of a Button component within the ViewComponent framework. It provides examples for default rendering, showcasing all available variants, and an interactive playground where users can customize button properties.
```ruby
# frozen_string_literal: true
# @label Button (ViewComponent)
# @logical_path view_component/button
class ButtonComponentPreview < Lookbook::Preview
# @label Default
def default
render_with_template
end
# @label All Variants
def variants
render_with_template
end
# @label Interactive Playground
# @param variant select { choices: [default, destructive, outline, secondary, ghost, link] }
# @param size select { choices: [default, sm, lg, icon] }
# @param disabled toggle
# @param text text "Button"
def playground(variant: "default", size: "default", disabled: false, text: "Button")
render_with_template(locals: { variant: variant, size: size, disabled: disabled, text: text })
end
end
```
--------------------------------
### Install Dependencies for Button Migration
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Installs necessary development dependencies for Tailwind CSS merging and Lookbook preview generation. This step ensures that the project has the required tools for component styling and documentation.
```bash
# Edit ui.gemspec, add:
spec.add_development_dependency "tailwind_merge", "~> 0.13"
spec.add_development_dependency "lookbook", "~> 2.3"
# Install
bundle install
```
--------------------------------
### Run Development Environment
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Commands to start the local development server for the UI Rails project. This involves changing the directory and running the bin/dev script, followed by opening the Lookbook and component documentation URLs in the browser.
```bash
open http://localhost:4000/lookbook
open http://localhost:4000/components/button
cd ~/src/ui-rails
bin/dev
open http://localhost:3000/lookbook
open http://localhost:3000/docs/components/button
```
--------------------------------
### Installing and Linking the UI Package with Bun/npm
Source: https://context7.com/fernandes/ui/llms.txt
Commands to install the '@fernandes/ui' package using npm or Bun, and instructions for linking it locally during development.
```bash
# Install as npm package
bun add @fernandes/ui
# or
npm install @fernandes/ui
# Link for local development
cd /path/to/fernandes-ui
bun link
cd /path/to/your-app
bun link @fernandes/ui
```
--------------------------------
### JavaScript Bundler Installation (Bun/npm)
Source: https://github.com/fernandes/ui/blob/main/README.md
Steps to install the Fernandes UI Engine package for projects using JavaScript bundlers like Bun or npm.
```bash
bun add @fernandes/ui
# or
npm install @fernandes/ui
```
--------------------------------
### Verify Component Migration
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Provides steps to verify the successful migration of components. This involves starting the dummy application, accessing Lookbook to check all previews, visiting the component showcase route, and visually comparing the results with the source library.
```bash
# Start dummy app
cd test/dummy && bin/dev
# Visit Lookbook
http://localhost:4000/lookbook
# Visit showcase route
http://localhost:4000/components/button
```
--------------------------------
### Create Button Preview File for Lookbook
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
A placeholder file for creating Lookbook previews of a Button component. This file is intended to be extended with specific examples and configurations for showcasing the Button component's different states and variations within the Lookbook interface.
```ruby
# frozen_string_literal: true
# @label Button (Phlex)
```
--------------------------------
### Button Component Documentation Page Structure
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Illustrates the structure of a documentation page for the button component. It includes a title, description, and examples of how to embed component previews and their corresponding code. This serves as a template for documenting other components.
```erb
Button
Trigger actions and events with button variants
<%= render "documentation/component_example", title: "Default" do %>
<%= render "documentation/component_preview" do %>
<%= render "ui/button", content: "Button" %>
<% end %>
<%= render "documentation/component_code" do %>
<%%= render "ui/button", content: "Button" %>
<% end %>
<% end %>
```
--------------------------------
### Context Menu with Items, Separator, and Shortcuts in Ruby
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/context_menu.md
Illustrates a more complex context menu setup with standard menu items, a separator, and associated keyboard shortcuts displayed using the Shortcut sub-component. This example showcases how to add visual cues for keyboard navigation. It requires the Phlex UI gem.
```ruby
render UI::ContextMenu::ContextMenu.new do
render UI::ContextMenu::Trigger.new do
"Right click here"
end
render UI::ContextMenu::Content.new(classes: "w-64") do
render UI::ContextMenu::Item.new do
"Back"
render UI::ContextMenu::Shortcut.new { "⌘[" }
end
render UI::ContextMenu::Item.new do
"Forward"
render UI::ContextMenu::Shortcut.new { "⌘]" }
end
render UI::ContextMenu::Separator.new
render UI::ContextMenu::Item.new do
"Reload"
render UI::ContextMenu::Shortcut.new { "⌘R" }
end
end
end
```
--------------------------------
### Phlex Alert Component Simple Text Example
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/alert.md
A simple example of rendering the UI::Alert::Alert component with only a title and description, without any icons or specific variants.
```ruby
render UI::Alert::Alert.new do
render UI::Alert::Title.new { "Note" }
render UI::Alert::Description.new do
"This feature is currently in beta."
end
end
```
--------------------------------
### Button Component Showcase Route (Ruby/ERB)
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Sets up a showcase route for the Button component within a dummy application. It renders an ERB view that includes examples of the button implemented in Phlex, ViewComponent, and ERB partials, along with size variants.
```ruby
# frozen_string_literal: true
class ComponentsController < ApplicationController
def button
# Renders app/views/components/button.html.erb
end
end
```
```erb
Button Component Showcase
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>
```
--------------------------------
### Avatar Component Examples (Erb)
Source: https://context7.com/fernandes/ui/llms.txt
Demonstrates the usage of the Avatar component with image loading states and fallbacks. Includes examples for a basic avatar, custom-sized avatar, and an avatar list.
```erb
<%= render "ui/avatar" do %>
<%= render "ui/avatar_image", src: "https://github.com/shadcn.png", alt: "@shadcn" %>
<%= render "ui/avatar_fallback", content: "CN" %>
<% end %>
<%= render "ui/avatar", classes: "h-16 w-16" do %>
<%= render "ui/avatar_image", src: current_user.avatar_url, alt: current_user.name %>
<%= render "ui/avatar_fallback", content: current_user.initials %>
<% end %>
<% @team_members.each do |member| %>
<%= render "ui/avatar" do %>
<%= render "ui/avatar_image", src: member.avatar_url, alt: member.name %>
<%= render "ui/avatar_fallback", content: member.initials %>
<% end %>
<% end %>
```
--------------------------------
### Context Menu ViewComponent Example with Labels and Shortcuts
Source: https://github.com/fernandes/ui/blob/main/docs/llm/vc/context_menu.md
Illustrates how to enhance a context menu with labels and separators for better organization. This example includes a 'My Account' label, separators, regular items, and a destructive action item.
```erb
<%= render(UI::ContextMenu::ContextMenuComponent.new) do %>
<%= render(UI::ContextMenu::TriggerComponent.new) do %>
Right click for options
<% end %>
<%= render(UI::ContextMenu::ContentComponent.new(classes: "w-56")) do %>
<%= render(UI::ContextMenu::LabelComponent.new) { "My Account" } %>
<%= render(UI::ContextMenu::SeparatorComponent.new) %>
<%= render(UI::ContextMenu::ItemComponent.new) { "Profile" } %>
<%= render(UI::ContextMenu::ItemComponent.new) { "Team" } %>
<%= render(UI::ContextMenu::SeparatorComponent.new) %>
<%= render(UI::ContextMenu::ItemComponent.new(variant: "destructive")) { "Delete Account" } %>
<% end %>
<% end %>
```
--------------------------------
### Component Migration Infrastructure: Quick Start
Source: https://github.com/fernandes/ui/blob/main/CLAUDE.md
Provides a quick command to initiate the component migration process using a slash command. This is the fastest way to begin migrating a component.
```bash
# Use the slash command
/migrate tooltip
```
--------------------------------
### Bundled JavaScript Setup with UI Controllers
Source: https://context7.com/fernandes/ui/llms.txt
Demonstrates initializing the Stimulus application and registering UI controllers when using a bundler like Bun. It shows both global registration and selective registration for tree-shaking.
```javascript
// app/javascript/bundled.js
import { Application } from "@hotwired/stimulus"
import { registerControllers, AccordionController, DialogController } from "@fernandes/ui"
const application = Application.start()
// Option 1: Register all controllers
registerControllers(application)
// Option 2: Selective registration for tree-shaking
import { registerControllersInto } from "@fernandes/ui"
registerControllersInto(application, {
"ui--accordion": AccordionController,
"ui--dialog": DialogController
})
```
--------------------------------
### Sheet Overlay Configuration Example in Ruby
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/sheet.md
Demonstrates the usage of the UI::Sheet::Overlay component in Ruby, including its `open` state parameter. This example shows how to render the overlay, which typically contains the Sheet::Content.
```ruby
render UI::Sheet::Overlay.new(open: false) do
render UI::Sheet::Content.new do
# Content here
end
end
```
--------------------------------
### Stimulus Controller JavaScript Example
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Provides an example of a Stimulus controller file for UI components within a Rails Engine. Controllers are located in `app/javascript/ui/controllers/` and follow a `component_controller.js` naming convention.
```javascript
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
connect() {
console.log("Hello, Stimulus!", this.element)
}
}
```
--------------------------------
### Install Engine from NPM Package Command Line Instructions
Source: https://github.com/fernandes/ui/blob/main/CLAUDE.md
Shows how host applications can install the UI engine as an NPM package using either Bun or NPM package managers. This enables the integration of the engine's UI components and styles into the host application.
```bash
bun add @ui/engine
# or
npm install @ui/engine
```
--------------------------------
### Basic Phlex Dialog Usage Example
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/dialog.md
Demonstrates the fundamental structure for rendering a Phlex UI Dialog, including its trigger, overlay, content, header, title, description, and footer. This example shows how to assemble the various dialog sub-components.
```ruby
render UI::Dialog::Dialog.new do
render UI::Dialog::Trigger.new do
"Open Dialog"
end
render UI::Dialog::Overlay.new do
render UI::Dialog::Content.new do
render UI::Dialog::Header.new do
render UI::Dialog::Title.new do
"Dialog Title"
end
render UI::Dialog::Description.new do
"Dialog description goes here"
end
end
# Your content here
render UI::Dialog::Footer.new do
render UI::Dialog::Close.new do
"Close"
end
end
end
end
end
```
--------------------------------
### Popover with Custom Placement (ERB)
Source: https://github.com/fernandes/ui/blob/main/docs/llm/erb/popover.md
Shows how to customize the popover's position using the `placement` and `offset` parameters. This example places the popover above and to the start of the trigger.
```erb
<%= render "ui/popover/popover", placement: "top-start", offset: 8 do %>
<%# ... trigger and content %>
<% end %>
```
--------------------------------
### Development Commands for UI Engine Dummy App
Source: https://github.com/fernandes/ui/blob/main/CLAUDE.md
A collection of bash commands for setting up and running the UI engine's dummy application. This includes dependency installation, linking the engine locally for development, building CSS and JavaScript assets, and running the development server with watch modes enabled.
```bash
# Dummy app commands (from test/dummy directory)
cd test/dummy
# Install dependencies
bun install
# Link engine locally for bundler testing
cd .. && bun link && cd test/dummy && bun link @ui/engine
# Build CSS (one-time)
bun run build:css
# Build bundled JS (one-time)
bun run build:js
# Watch mode for CSS
bun run build:css:watch
# Watch mode for bundled JS
bun run build:js:watch
# Run dummy app with Rails + CSS + JS watch (all processes)
bin/dev
```
--------------------------------
### Render Calendar with Combined Options (Ruby)
Source: https://github.com/fernandes/ui/blob/main/docs/llm/vc/calendar.md
An example combining multiple options for the Calendar Component, including selection mode, dropdowns, week start day, date constraints, and number of months.
```ruby
<%= render UI::Calendar::CalendarComponent.new(
mode: :range,
show_dropdowns: true,
week_starts_on: 1,
min_date: Date.today,
number_of_months: 2
) %>
```
--------------------------------
### Phlex Component Usage Example
Source: https://github.com/fernandes/ui/blob/main/CLAUDE.md
Demonstrates the correct way to instantiate a Phlex UI component, highlighting the difference between module and component class names. This pattern is crucial for avoiding common instantiation errors.
```ruby
UI::Button::Button.new
```
--------------------------------
### Display Command Palette Hint with Kbd Components - Ruby
Source: https://github.com/fernandes/ui/blob/main/docs/llm/vc/kbd.md
Provides an example of how to use KbdComponent and GroupComponent to visually indicate a shortcut for opening a command palette. This is useful for guiding users to application features.
```ruby
Open command palette
<%= render(UI::Kbd::GroupComponent.new) do %>
<%= render(UI::Kbd::KbdComponent.new) { "⌘" } %>
<%= render(UI::Kbd::KbdComponent.new) { "K" } %>
<% end %>
```
--------------------------------
### Vertical Carousel Orientation (Ruby)
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/carousel.md
Demonstrates the implementation of a vertical carousel. This example sets the orientation to 'vertical', defines a fixed height for the content, and uses Embla Carousel options to align items to the start.
```ruby
render UI::Carousel::Carousel.new(orientation: "vertical", classes: "w-full max-w-xs", opts: { align: "start" }) do
render UI::Carousel::Content.new(classes: "-mt-1 h-[200px]") do
5.times do |i|
render UI::Carousel::Item.new(classes: "pt-1 md:basis-1/2") do
div(class: "p-1") do
div(class: "flex items-center justify-center p-6 border rounded-lg min-h-[120px]") do
span(class: "text-3xl font-semibold") { (i + 1).to_s }
end
end
end
end
end
render UI::Carousel::Previous.new
render UI::Carousel::Next.new
end
```
--------------------------------
### Rendering Phlex Components
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex.md
Demonstrates how to render Phlex components, including passing options, block content, and using the `as_child` composition pattern with keyword arguments.
```ruby
# Rendering a component
render UI::ComponentName::SubComponent.new(**options) do
# Block content
end
# With parameters
render UI::Button::Button.new(variant: :outline, size: :lg) do
"Click me"
end
# With asChild composition
render UI::Dialog::Trigger.new(as_child: true) do |attrs|
render UI::Button::Button.new(**attrs, variant: :destructive) do
"Delete"
end
end
```
```ruby
# When receiving attributes from asChild
render ComponentName.new(as_child: true) do |attrs|
# Use ** to spread hash into keyword arguments
button(**attrs) do
"Content"
end
end
```
--------------------------------
### ERB Button Partial Preview
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Defines the Ruby class for a Button component preview using ERB partials. This serves as a placeholder or a basic setup for creating previews with ERB.
```ruby
# test/components/previews/button_partial_preview.rb
# frozen_string_literal: true
# @label Button (ERB)
```
--------------------------------
### Input Group with Icon Addon - ERB
Source: https://github.com/fernandes/ui/blob/main/docs/llm/erb/input_group.md
This example shows how to create an input group with an icon addon positioned at the start. It includes the main input group, an addon containing an SVG icon, and the input field itself.
```erb
<%= render "ui/input_group/input_group" do %>
<%= render "ui/input_group/input_group_addon", align: "inline-start" do %>
<% end %>
<%= render "ui/input_group/input_group_input", placeholder: "Search..." %>
<% end %>
```
--------------------------------
### Run Component Migration Command
Source: https://github.com/fernandes/ui/blob/main/docs/migration/README.md
Executes the component migration process, optionally specifying a component name. This is the recommended way to start a migration.
```bash
# Use the slash command (recommended)
/migrate tooltip
# Or manually follow the skill workflow
# See .claude/skills/component-migration.md
```
--------------------------------
### Calendar with Combined Options
Source: https://github.com/fernandes/ui/blob/main/docs/llm/erb/calendar.md
An example showcasing the combination of multiple parameters to customize the calendar's appearance and behavior, including selection mode, dropdowns, week start day, date constraints, and multi-month display.
```erb
<%= render "ui/calendar/calendar",
mode: :range,
show_dropdowns: true,
week_starts_on: 1,
min_date: Date.today,
number_of_months: 2
%>
```
--------------------------------
### Running the Dummy App for Testing
Source: https://github.com/fernandes/ui/blob/main/README.md
Navigates to the dummy Rails application directory and starts the development server with the Tailwind CSS watcher enabled. This is useful for testing engine functionality in isolation.
```bash
cd test/dummy
bin/dev
```
--------------------------------
### Common Mistakes When Using Tooltip Components
Source: https://github.com/fernandes/ui/blob/main/docs/llm/vc/tooltip.md
Highlights incorrect ways to use the Tooltip component, such as missing the trigger, attempting to render a module directly, or using an incorrect component class. These examples serve as a guide to avoid common pitfalls.
```erb
<%# Wrong: Missing Trigger %>
<%= render UI::Tooltip::TooltipComponent.new do %>
<%= render UI::Tooltip::ContentComponent.new do %>Text<% end %>
<% end %>
<%# Wrong: Using UI::Tooltip (it's a module, not a component) %>
<%= render UI::Tooltip.new %>
<%# Wrong: Incorrect component class %>
<%= render UI::TooltipComponent.new %>
```
--------------------------------
### ViewComponent Button Preview Templates
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Contains the HTML ERB templates for rendering Button components within ViewComponent previews. These templates define the structure and content for the default, variants, and playground examples.
```erb
<%= render ::UI::Button::ButtonComponent.new do %>
Click me
<% end %>
```
```erb
```
```erb
<%= render ::UI::Button::ButtonComponent.new(
variant: local_assigns[:variant],
size: local_assigns[:size],
disabled: local_assigns[:disabled]
) do %>
<%= local_assigns[:text] %>
<% end %>
```
--------------------------------
### ViewComponent Usage Example
Source: https://github.com/fernandes/ui/blob/main/CLAUDE.md
Illustrates the correct syntax for initializing a ViewComponent. This pattern ensures proper integration within the Rails application and avoids common mistakes related to component instantiation.
```ruby
UI::Button::ButtonComponent.new
```
--------------------------------
### UI Component Instantiation Errors in LLM Usage
Source: https://github.com/fernandes/ui/blob/main/docs/llm/README.md
Demonstrates common mistakes LLMs make when instantiating UI Engine components and provides the correct syntax. This helps prevent errors related to module vs. class instantiation and missing suffixes.
```text
Wrong Instantiation:
- ❌ UI::Button.new (module, not a class)
- ✅ UI::Button::Button.new (correct)
Missing Component Suffix:
- ❌ UI::Button::Button.new (Phlex in ViewComponent context)
- ✅ UI::Button::ButtonComponent.new (correct for ViewComponent)
```
--------------------------------
### Example: Default UI AlertDialog Confirmation
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/alert_dialog.md
Demonstrates a typical alert dialog with a confirmation action. It includes a trigger button, overlay, content, header with title and description, and a footer with Cancel and Action buttons. This setup is suitable for general confirmations.
```ruby
render UI::AlertDialog::AlertDialog.new do
render UI::AlertDialog::Trigger.new do
render UI::Button::Button.new { "Show Dialog" }
end
render UI::AlertDialog::Overlay.new do
render UI::AlertDialog::Content.new do
render UI::AlertDialog::Header.new do
render UI::AlertDialog::Title.new { "Are you absolutely sure?" }
render UI::AlertDialog::Description.new do
"This action cannot be undone. This will permanently delete your account."
end
end
render UI::AlertDialog::Footer.new do
render UI::AlertDialog::Cancel.new { "Cancel" }
render UI::AlertDialog::Action.new { "Continue" }
end
end
end
end
```
--------------------------------
### Correct Usage of UI::Drawer::Drawer Component
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/drawer.md
Highlights the correct way to instantiate the UI Drawer component, emphasizing the use of the full class path `UI::Drawer::Drawer` instead of just the module `UI::Drawer`.
```ruby
render UI::Drawer::Drawer.new do # UI::Drawer::Drawer is the component
# ...
end
```
--------------------------------
### Progress Component Loading States in ERB
Source: https://github.com/fernandes/ui/blob/main/docs/llm/vc/progress.md
Shows examples of the Progress Component in various loading states: indeterminate (no value provided), starting (value 0), and complete (value 100). These states are useful for indicating ongoing processes or initial/final conditions.
```erb
<%# Indeterminate (no value) %>
<%= render UI::Progress::ProgressComponent.new %>
<%# Starting state %>
<%= render UI::Progress::ProgressComponent.new(value: 0) %>
<%# Complete %>
<%= render UI::Progress::ProgressComponent.new(value: 100) %>
```
--------------------------------
### Create Project Directories
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Creates essential directories for UI components, helpers, views, and component previews within the project structure. These directories are necessary for organizing and accessing migrated component files.
```bash
mkdir -p app/components/ui
mkdir -p app/helpers/ui
mkdir -p app/views/ui
mkdir -p test/dummy/test/components/previews
```
--------------------------------
### JavaScript Examples for Drawer Snap Point Patterns
Source: https://github.com/fernandes/ui/blob/main/dev/snap-points.md
Illustrates common configuration patterns for the drawer's snap points and fade behavior using JavaScript objects. These examples demonstrate 'Peek and Expand', 'Three-Stage Drawer', and 'Maps-Style Bottom Sheet' configurations.
```javascript
snapPoints: ['200px', 1] // Peek at 200px, expand to full
fadeFromIndex: 0 // Start fading immediately
```
```javascript
snapPoints: [0.25, 0.75, 1] // Collapsed, normal, expanded
fadeFromIndex: 1 // Fade only in last stage
```
```javascript
snapPoints: ['100px', 0.5, 1] // Minimal, half, full
snapToSequentialPoint: true // Each position is important
```
--------------------------------
### ERB Partial Button Preview with Lookbook
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Defines a Lookbook preview class for an ERB partial button. It includes a default example rendered using `render_with_template`. This allows for visual testing and documentation of the ERB partial implementation.
```ruby
# test/components/previews/button_partial_preview.rb
# @label Button
# @logical_path erb/button
class ButtonPartialPreview < Lookbook::Preview
def default
render_with_template
end
end
```
```erb
<%= render "ui/button", content: "Click me" %>
```
--------------------------------
### Create Button Component Preview Structure
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Sets up the directory structure for Lookbook previews for the Button component, including subdirectories for both Phlex and ERB partial variations. This is essential for organizing and previewing different implementations of the component.
```bash
mkdir -p test/components/previews
mkdir -p test/components/previews/button_component_preview
mkdir -p test/components/previews/button_partial_preview
```
--------------------------------
### Accordion with Initially Open Item
Source: https://github.com/fernandes/ui/blob/main/docs/llm/erb/accordion.md
Shows how to make a specific accordion item start in an open state by passing `initial_open: true` to the `accordion_item` partial. This is useful for highlighting important information or guiding the user's attention upon initial page load.
```erb
<%= render "ui/accordion/accordion" do %>
<%= render "ui/accordion/accordion_item", value: "item-1", initial_open: true do %>
<%= render "ui/accordion/accordion_trigger", content: "Already Open" %>
<%= render "ui/accordion/accordion_content" do %>
This item starts in the open state.
<% end %>
<% end %>
<% end %>
```
--------------------------------
### Phlex Component Implementation
Source: https://github.com/fernandes/ui/blob/main/docs/migration/README.md
Example of a Phlex component for a UI Tooltip, including behavior inclusion and attribute handling. It renders a `div` with dynamic attributes.
```ruby
# Example: UI::Tooltip::Tooltip
module UI
module Tooltip
class Tooltip < Phlex::HTML
include UI::Tooltip::TooltipBehavior
def initialize(open: false, **attributes)
@open = open
@attributes = attributes
end
def view_template(&block)
div(**tooltip_html_attributes) do
yield if block_given?
end
end
end
end
end
```
--------------------------------
### Phlex UI Textarea With Button Example (Ruby)
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/textarea.md
Shows a common pattern of placing a Phlex UI Textarea above a Phlex UI Button. This setup is typical for input fields that trigger an action, such as sending a message or submitting data. The `grid` layout ensures proper alignment.
```ruby
div(class: "grid w-full gap-2") do
render UI::Textarea::Textarea.new(
placeholder: "Type your message here."
)
render UI::Button::Button.new { "Send message" }
end
```
--------------------------------
### Phlex Dialog Main Component Configuration
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/dialog.md
Shows how to configure the main `UI::Dialog::Dialog` component with optional parameters like initial open state, close behavior on escape key or overlay click, and custom CSS classes. This example illustrates setting up the dialog's core behavior.
```ruby
render UI::Dialog::Dialog.new(
open: false,
close_on_escape: true,
close_on_overlay_click: true
) do
# Sub-components here
end
```
--------------------------------
### ViewComponent Button Preview with Lookbook
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Defines a Lookbook preview class for a ViewComponent button. It includes examples for a default button and an interactive playground that allows customization of variant, size, disabled state, and text. This facilitates visual testing and documentation for the ViewComponent implementation.
```ruby
# test/components/previews/button_component_preview.rb
# @label Button
# @logical_path view_component/button
class ButtonComponentPreview < Lookbook::Preview
# @label Default
def default
render_with_template
end
# @label Interactive Playground
# @param variant select { choices: [default, destructive, outline] }
def playground(variant: "default", size: "default", disabled: false, text: "Button")
render_with_template(locals: { variant: variant, size: size, disabled: disabled, text: text })
end
end
```
```erb
<%= render ::UI::Button::ButtonComponent.new do %>
Click me
<% end %>
```
--------------------------------
### Stimulus Application Setup with UI Controllers
Source: https://context7.com/fernandes/ui/llms.txt
Initializes the Stimulus application and registers UI controllers. It shows both automatic registration of all UI controllers and selective registration for specific components like Button and Accordion.
```javascript
// app/javascript/application.js
import { Application } from "@hotwired/stimulus"
import * as UI from "ui"
const application = Application.start()
// Register all UI controllers
UI.registerControllers(application)
// Or register selectively
import { ButtonController, AccordionController } from "ui"
application.register("ui--button", ButtonController)
application.register("ui--accordion", AccordionController)
```
--------------------------------
### Progress Component Loading States in ERB
Source: https://github.com/fernandes/ui/blob/main/docs/llm/erb/progress.md
Illustrates different loading states for the Progress Component in ERB. This includes an indeterminate state (no value provided), a starting state (value: 0), and a complete state (value: 100). These examples show how the component behaves without a specific progress value.
```erb
<%# Indeterminate (no value) %>
<%= render "ui/progress/progress" %>
<%# Starting state %>
<%= render "ui/progress/progress", value: 0 %>
<%# Complete %>
<%= render "ui/progress/progress", value: 100 %>
```
--------------------------------
### Basic Usage Example
Source: https://github.com/fernandes/ui/blob/main/docs/llm/phlex/dialog.md
Demonstrates the fundamental structure for rendering a Dialog component with its essential sub-components.
```APIDOC
## Basic Usage
```ruby
render UI::Dialog::Dialog.new do
render UI::Dialog::Trigger.new do
"Open Dialog"
end
render UI::Dialog::Overlay.new do
render UI::Dialog::Content.new do
render UI::Dialog::Header.new do
render UI::Dialog::Title.new do
"Dialog Title"
end
render UI::Dialog::Description.new do
"Dialog description goes here"
end
end
# Your content here
render UI::Dialog::Footer.new do
render UI::Dialog::Close.new do
"Close"
end
end
end
end
end
```
```
--------------------------------
### Publish Engine to NPM Command Line Instructions
Source: https://github.com/fernandes/ui/blob/main/CLAUDE.md
Provides the necessary bash commands to publish the UI engine as an NPM package. It includes steps for updating the version and executing the publish command, emphasizing the need to update the package scope if necessary.
```bash
# Update version in package.json
bun version patch|minor|major
# Publish to npm (update @ui/engine to your npm scope)
npm publish --access public
```
--------------------------------
### Phlex Button Preview with Lookbook
Source: https://github.com/fernandes/ui/blob/main/dev/COMPONENT_MIGRATION_GUIDE.md
Defines a Lookbook preview class for a Phlex-based button component. It includes examples for a default button and an interactive playground allowing users to customize variant, size, disabled state, and text. This enables visual testing and documentation for the Phlex implementation.
```ruby
# test/components/previews/button_phlex_preview.rb
# @label Button
# @logical_path phlex/button
class ButtonPhlexPreview < Lookbook::Preview
# @label Default
# @display bg_color "#f5f5f5"
# @display padding "2rem"
def default
render DefaultExample.new
end
# @label Interactive Playground
# @param variant select { choices: [default, destructive, outline, secondary, ghost, link] }
# @param size select { choices: [default, sm, lg, icon] }
# @param disabled toggle
# @param text text "Button"
def playground(variant: "default", size: "default", disabled: false, text: "Button")
render PlaygroundExample.new(variant: variant, size: size, disabled: disabled, text: text)
end
class DefaultExample < Phlex::HTML
def view_template
render ::UI::Button::Button.new { "Click me" }
end
end
class PlaygroundExample < Phlex::HTML
def initialize(variant:, size:, disabled:, text:)
@variant, @size, @disabled, @text = variant, size, disabled, text
end
def view_template
render ::UI::Button::Button.new(variant: @variant, size: @size, disabled: @disabled) { @text }
end
end
end
```
--------------------------------
### Vertical Slider Example (ERB)
Source: https://github.com/fernandes/ui/blob/main/docs/llm/erb/slider.md
Provides an example of rendering the slider in a vertical orientation. This requires the parent container to have a defined height, as shown in the example.
```erb
<%= render "ui/slider/slider", default_value: [50], orientation: "vertical" do %>
<%= render "ui/slider/slider_track" do %>
<%= render "ui/slider/slider_range" %>
<% end %>
<%= render "ui/slider/slider_thumb" %>
<% end %>
```
--------------------------------
### Basic Drawer Component Usage (ERB)
Source: https://github.com/fernandes/ui/blob/main/docs/llm/vc/drawer.md
Demonstrates the fundamental implementation of the Drawer Component in ERB. It shows how to integrate the trigger, overlay, content, header, footer, and close components within the root Drawer component. This example assumes the availability of UI::Button::ButtonComponent.
```erb
<%= render UI::Drawer::DrawerComponent.new do %>
<%= render UI::Drawer::TriggerComponent.new do %>
Open Drawer
<% end %>
<%= render UI::Drawer::OverlayComponent.new %>
<%= render UI::Drawer::ContentComponent.new do %>
<%= render UI::Drawer::HandleComponent.new %>
<%= render UI::Drawer::HeaderComponent.new do %>
<%= render UI::Drawer::TitleComponent.new do %>
Drawer Title
<% end %>
<%= render UI::Drawer::DescriptionComponent.new do %>
Drawer description text.
<% end %>
<% end %>
<%= render UI::Drawer::FooterComponent.new do %>
<%= render UI::Button::ButtonComponent.new do %>
Submit
<% end %>
<%= render UI::Drawer::CloseComponent.new do %>
Cancel
<% end %>
<% end %>
<% end %>
<% end %>
```
--------------------------------
### Render Vertical Carousel with Options - ERB
Source: https://github.com/fernandes/ui/blob/main/docs/llm/erb/carousel.md
Implements a vertical carousel using Embla Carousel options. The `carousel` partial is configured with `orientation: "vertical"`, `classes: "w-full max-w-xs"`, and `opts: { align: "start" }`. The `content` partial is styled with `-mt-1 h-[200px]`. This example renders 5 content items with responsive item widths.
```erb
<%= render "ui/carousel/carousel", orientation: "vertical", classes: "w-full max-w-xs", opts: { align: "start" } do %>
<%= render "ui/carousel/content", classes: "-mt-1 h-[200px]" do %>
<% 5.times do |i| %>
<%= render "ui/carousel/item", classes: "pt-1 md:basis-1/2" do %>
<%= i + 1 %>
<% end %>
<% end %>
<% end %>
<%= render "ui/carousel/previous" %>
<%= render "ui/carousel/next" %>
<% end %>
```