Popover

An overlaid panel, triggered by a button, for showing rich content.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add popover --yes

The popover registry item installs these files:

app/components/ui_component.rb
app/components/ui/popover_component.rb
app/components/ui/popover/trigger_component.rb
app/components/ui/popover/content_component.rb
app/components/ui/button_component.rb
app/helpers/ui/popover_helper.rb
app/helpers/ui/button_helper.rb
app/javascript/controllers/ui_popover_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

The ui-popover controller toggles the panel, moves focus into it on open, and hands focus back to the trigger on closing with Esc. Clicking outside closes it too. Positioning is utilities only (side/align), with no floating-ui.

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Open" } %>
  <%= ui_popover_content do %>
    Popover content.
  <% end %>
<% end %>

Or render the components directly:

<%= render Ui::PopoverComponent.new do %>
  <%= render Ui::Popover::TriggerComponent.new do %>
    Open
  <% end %>
  <%= render Ui::Popover::ContentComponent.new(side: :bottom, align: :start) do %>
    Content
  <% end %>
<% end %>

Composition

Popover (data-controller="ui-popover", relative)
|-- Popover::Trigger (Button, aria-expanded)
`-- Popover::Content (absolute, side: + align:)

Examples

Default

A non-modal panel: it opens on click, focuses its content, and closes on an outside click or Esc.

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Open dimensions" } %>
  <%= ui_popover_content do %>
    <div class="grid gap-4">
      <div class="space-y-1">
        <h4 class="font-medium leading-none">Dimensions</h4>
        <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
      </div>

<%= ui_popover do %>
  <%= ui_popover_trigger(variant: :outline) { "Open dimensions" } %>
  <%= ui_popover_content do %>
    <div class="grid gap-4">
      <div class="space-y-1">
        <h4 class="font-medium leading-none">Dimensions</h4>
        <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
      </div>
      <div class="grid gap-2">
        <div class="grid grid-cols-3 items-center gap-4">
          <%= ui_label(for: "popover-width") { "Width" } %>
          <%= ui_input(id: "popover-width", value: "100%", class: "col-span-2 h-8") %>
        </div>
        <div class="grid grid-cols-3 items-center gap-4">
          <%= ui_label(for: "popover-height") { "Height" } %>
          <%= ui_input(id: "popover-height", value: "25px", class: "col-span-2 h-8") %>
        </div>
      </div>
    </div>
  <% end %>
<% end %>

Alignment

align: :start, :center or :end shifts the panel along the cross axis.

<% %i[start center end].each do |align| %>
  <%= ui_popover do %>
    <%= ui_popover_trigger(variant: :outline) { "align: #{align}" } %>
    <%= ui_popover_content(side: :bottom, align: align, class: "w-48") do %>
      <p class="text-sm">Aligned to the <strong><%= align %></strong> on the horizontal axis.</p>
    <% end %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Popover::Trigger`	`variant`, `size`	`:outline`	The Button that opens and closes it; keeps `aria-expanded` current.
`Popover::Content`	`side`	`:bottom`	`:top`, `:right`, `:bottom`, `:left`.
`Popover::Content`	`align`	`:center`	`:start`, `:center`, `:end` along the cross axis.