Collapsible

A section that expands and collapses, driven by the ui-collapsible controller.

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 collapsible --yes

The collapsible registry item installs these files:

app/components/ui_component.rb
app/components/ui/collapsible_component.rb
app/components/ui/collapsible/trigger_component.rb
app/components/ui/collapsible/content_component.rb
app/helpers/ui/collapsible_helper.rb
app/javascript/controllers/ui_collapsible_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

<%= ui_collapsible do %>
  <%= ui_collapsible_trigger { "Show more" } %>
  <%= ui_collapsible_content { "Hidden content." } %>
<% end %>

Examples

Default

A list that reveals additional items.

@shadwire has 3 repositories

@shadwire/ui

@shadwire/registry

@shadwire/cli

<%= ui_collapsible(open: true, class: "w-80 space-y-2") do %>
  <div class="flex items-center justify-between gap-4">
    <span class="text-sm font-semibold">@shadwire has 3 repositories</span>
    <%= ui_collapsible_trigger(open: true, class: "inline-flex size-8 items-center justify-center rounded-md border") do %>
      <%= ui_icon("chevrons-up-down", label: "Toggle") %>
    <% end %>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">@shadwire/ui</div>

<%= ui_collapsible(open: true, class: "w-80 space-y-2") do %>
  <div class="flex items-center justify-between gap-4">
    <span class="text-sm font-semibold">@shadwire has 3 repositories</span>
    <%= ui_collapsible_trigger(open: true, class: "inline-flex size-8 items-center justify-center rounded-md border") do %>
      <%= ui_icon("chevrons-up-down", label: "Toggle") %>
    <% end %>
  </div>
  <div class="rounded-md border px-4 py-2 font-mono text-sm">@shadwire/ui</div>
  <%= ui_collapsible_content(open: true, class: "space-y-2") do %>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@shadwire/registry</div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@shadwire/cli</div>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`Collapsible`	`open`	`false`	Starts open.
`Collapsible::Trigger`	`open`	`false`	Give it the root's `open:` too, so the server already renders the right `aria-expanded`.
`Collapsible::Content`	`open`	`false`	Give it the root's `open:` too, so it is not hidden until the controller connects.