Senren UI
Components / Popover

Popover

Stable Stimulus: senren--popover

small contextual UI like filters or color pickers

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../popover_example.html.erb 
<div class="flex w-full justify-center">
  <%= render Senren::PopoverComponent.new do |p| %>
    <% p.with_trigger do %>
      <%= render(Senren::ButtonComponent.new(variant: :secondary)) { "Open popover" } %>
    <% end %>
    <% p.with_content_panel do %>
      <div class="space-y-2 text-sm">
        <p class="font-medium">Quick share</p>
        <p class="text-[hsl(var(--senren-muted-foreground))]">Send a link to this resource via email.</p>
      </div>
    <% end %>
  <% end %>
</div>

Install this component #

Copy the official component into your app

This component requires Stimulus. Keep --client so the controller is copied with the ViewComponent.

Terminal 
bin/rails senren:add popover --client

Create a custom component with the same conventions

Use this when you need an app-specific component that follows Senren's ViewComponent and Stimulus structure. --client is required for this behavior.

Terminal 
bin/rails generate senren:component popover --client

Dependencies are resolved by senren:add: button.

At a glance #

Category Overlays
Class name Senren::PopoverComponent
Stimulus senren--popover
Variants default
Depends on button
Pairs with button, form

Source #

app/components/senren/popover_component.html.erb 
<div data-controller="senren--popover" class="relative inline-block" data-senren-component="popover">
  <div data-senren--popover-target="trigger" data-action="click->senren--popover#toggle">
    <%= trigger %>
  </div>
  <div data-senren--popover-target="panel" hidden role="dialog"
       class="absolute z-40 mt-2 min-w-[12rem] rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-popover))] text-[hsl(var(--senren-popover-foreground))] p-4 shadow-md">
    <%= content_panel || content %>
  </div>
</div>
app/components/senren/popover_component.rb 
# frozen_string_literal: true

module Senren
  class PopoverComponent < BaseComponent
    renders_one :trigger
    renders_one :content_panel

    VARIANTS = { default: '' }.freeze
    SIZES    = { md: '' }.freeze
  end
end

AI agent rules #

Use for

  • +small contextual UI like filters or color pickers

Avoid

  • -large content - use dialog or sheet

Accessibility #

  • aria-expanded on trigger; manage focus on open.