Components / Collapsible

Collapsible

Stable Stimulus: senren--collapsible

single show/hide toggles

Run Tailwind before booting the docs site, then deploy like a regular Rails app.

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/.../collapsible_example.html.erb

<div class="w-full max-w-md">
  <%= render Senren::CollapsibleComponent.new(title: "Deployment notes", open: true) do %>
    Run Tailwind before booting the docs site, then deploy like a regular Rails app.
  <% 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 collapsible --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 collapsible --client

At a glance #

Category Navigation

Class name Senren::CollapsibleComponent

Stimulus senren--collapsible

Variants default

Depends on —

Pairs with sidebar, settings_section

Source #

app/components/senren/collapsible_component.html.erb

<div <%= tag.attributes(**root_attrs("rounded-(--senren-radius) border border-[hsl(var(--senren-border))] bg-[hsl(var(--senren-card))]", data: { controller: "senren--collapsible" })) %>>
  <button type="button" class="flex w-full cursor-pointer items-center justify-between gap-4 px-4 py-3 text-left text-sm font-medium text-[hsl(var(--senren-card-foreground))]" aria-expanded="<%= open? %>" data-senren--collapsible-target="trigger" data-action="click->senren--collapsible#toggle">
    <span><%= trigger || title %></span>
    <span aria-hidden="true" class="text-[hsl(var(--senren-muted-foreground))]">+</span>
  </button>
  <div data-senren--collapsible-target="panel" <%= "hidden" unless open? %> class="border-t border-[hsl(var(--senren-border))] px-4 py-3 text-sm text-[hsl(var(--senren-muted-foreground))]">
    <%= body || content %>
  </div>
</div>

app/components/senren/collapsible_component.rb

module Senren
  class CollapsibleComponent < BaseComponent
    renders_one :trigger
    renders_one :body

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

    def initialize(title: 'Details', open: false, class_name: nil, **html)
      super(variant: :default, size: :md, class_name: class_name, **html)
      @title = title
      @open = open
    end

    attr_reader :title

    def open? = @open
  end
end

AI agent rules #

Use for

+single show/hide toggles

Avoid

-groups - use accordion

Accessibility #

aria-expanded on trigger; aria-controls on panel.

Accordion

Sidebar