Accordion — Shadwire

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

The accordion registry item installs these files:

app/components/ui_component.rb
app/components/ui/accordion_component.rb
app/components/ui/accordion/item_component.rb
app/components/ui/accordion/header_component.rb
app/components/ui/accordion/trigger_component.rb
app/components/ui/accordion/content_component.rb
app/components/ui/accordion/panel_component.rb
app/components/ui/icon_component.rb
app/helpers/ui/accordion_helper.rb
app/helpers/ui/icon_helper.rb
app/javascript/controllers/ui_accordion_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

Use the Root > Item > Header > Trigger + Content composition. The ui_accordion helper takes the same arguments as Ui::AccordionComponent.

<%= ui_accordion(default_value: :item_1) do %>
  <%= ui_accordion_item(value: :item_1) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Is it accessible?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Yes. It follows the WAI-ARIA pattern for accordions.
    <% end %>

<%= ui_accordion(default_value: :item_1) do %>
  <%= ui_accordion_item(value: :item_1) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Is it accessible?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Yes. It follows the WAI-ARIA pattern for accordions.
    <% end %>
  <% end %>
<% end %>

You can also render the ViewComponent classes directly:

<%= render Ui::AccordionComponent.new(default_value: :item_1) do %>
  <%= render Ui::Accordion::ItemComponent.new(value: :item_1) do %>
    <%= render Ui::Accordion::HeaderComponent.new do %>
      <%= render Ui::Accordion::TriggerComponent.new do %>
        Is it accessible?
      <% end %>
    <% end %>
    <%= render Ui::Accordion::ContentComponent.new do %>

<%= render Ui::AccordionComponent.new(default_value: :item_1) do %>
  <%= render Ui::Accordion::ItemComponent.new(value: :item_1) do %>
    <%= render Ui::Accordion::HeaderComponent.new do %>
      <%= render Ui::Accordion::TriggerComponent.new do %>
        Is it accessible?
      <% end %>
    <% end %>
    <%= render Ui::Accordion::ContentComponent.new do %>
      Yes. It follows the WAI-ARIA pattern for accordions.
    <% end %>
  <% end %>
<% end %>

Composition

The anatomy follows the Base UI reference shadcn uses: item, header, trigger and content panel. ui_accordion_panel is a name alias for ui_accordion_content.

<%= ui_accordion do %>
  <%= ui_accordion_item do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Title" } %>
    <% end %>
    <%= ui_accordion_content { "Content" } %>
  <% end %>
<% end %>

Examples

Basic

A simple accordion showing one item at a time. The first item starts open.

<%= ui_accordion(default_value: :password, class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :password) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "How do I reset my password?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Click "Forgot my password" on the sign-in screen, give us your email, and we will send a link valid for 24 hours.
    <% end %>

<%= ui_accordion(default_value: :password, class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :password) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "How do I reset my password?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Click "Forgot my password" on the sign-in screen, give us your email, and we will send a link valid for 24 hours.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :plan) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Can I change my plan?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Yes. You can move between monthly and yearly plans at any time from your billing settings.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :payment) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Which payment methods do you accept?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      We accept credit cards, debit cards, and invoiced billing for business accounts.
    <% end %>
  <% end %>
<% end %>

Multiple

Use multiple: true to let several items stay open at once.

<%= ui_accordion(multiple: true, default_value: [ :notifications, :privacy ], class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :notifications) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Notification settings" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Manage email alerts, push notifications and weekly digests to keep up with what matters.
    <% end %>

<%= ui_accordion(multiple: true, default_value: [ :notifications, :privacy ], class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :notifications) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Notification settings" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Manage email alerts, push notifications and weekly digests to keep up with what matters.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :privacy) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Privacy and security" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Set up two-factor authentication, review active sessions, and control access to your data.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :billing) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Billing and subscription" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Review invoices, payment methods, and your subscription's current cycle.
    <% end %>
  <% end %>
<% end %>

Disabled

Use disabled: true on an item to lock that panel.

<%= ui_accordion(default_value: :history, class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :history) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Can I get to my history?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Yes. History is available in the account area on active plans.
    <% end %>

<%= ui_accordion(default_value: :history, class_name: "w-full max-w-md") do %>
  <%= ui_accordion_item(value: :history) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Can I get to my history?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Yes. History is available in the account area on active plans.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :premium, disabled: true) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger(disabled: true) { "Premium feature details" } %>
    <% end %>
    <%= ui_accordion_content do %>
      This content stays unavailable until you upgrade the plan.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :email) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "How do I update my email?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Open your profile, change the address, and confirm the link sent to the new email.
    <% end %>
  <% end %>
<% end %>

Borders

Add border on the accordion to outline the group.

<%= ui_accordion(default_value: :billing, class_name: "w-full max-w-md rounded-md border px-4") do %>
  <%= ui_accordion_item(value: :billing) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "How does billing work?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Billing happens at the start of each cycle, monthly or yearly, and you can cancel at any time.
    <% end %>

<%= ui_accordion(default_value: :billing, class_name: "w-full max-w-md rounded-md border px-4") do %>
  <%= ui_accordion_item(value: :billing) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "How does billing work?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Billing happens at the start of each cycle, monthly or yearly, and you can cancel at any time.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :security) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Is my data safe?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Data is encrypted in transit and stored behind role-based access controls.
    <% end %>
  <% end %>
  <%= ui_accordion_item(value: :integrations) do %>
    <%= ui_accordion_header do %>
      <%= ui_accordion_trigger { "Which integrations are supported?" } %>
    <% end %>
    <%= ui_accordion_content do %>
      Webhooks, CSV import, and integrations with support and billing tools.
    <% end %>
  <% end %>
<% end %>

Card

Compose the Accordion inside a Card when it is part of a larger surface.

Subscription and billing

Common questions about plans, payments and cancellations.

<%= ui_card(class_name: "w-full max-w-md") do %>
  <%= ui_card_header do %>
    <%= ui_card_title { "Subscription and billing" } %>
    <%= ui_card_description { "Common questions about plans, payments and cancellations." } %>
  <% end %>
  <%= ui_card_content do %>
    <%= ui_accordion(default_value: :plans) do %>
      <%= ui_accordion_item(value: :plans) do %>

<%= ui_card(class_name: "w-full max-w-md") do %>
  <%= ui_card_header do %>
    <%= ui_card_title { "Subscription and billing" } %>
    <%= ui_card_description { "Common questions about plans, payments and cancellations." } %>
  <% end %>
  <%= ui_card_content do %>
    <%= ui_accordion(default_value: :plans) do %>
      <%= ui_accordion_item(value: :plans) do %>
        <%= ui_accordion_header do %>
          <%= ui_accordion_trigger { "Which plans are available?" } %>
        <% end %>
        <%= ui_accordion_content do %>
          Starter, Professional and Enterprise, with progressively higher limits and features.
        <% end %>
      <% end %>
      <%= ui_accordion_item(value: :billing) do %>
        <%= ui_accordion_header do %>
          <%= ui_accordion_trigger { "How am I billed?" } %>
        <% end %>
        <%= ui_accordion_content do %>
          Billing is recurring and follows the cycle you chose when you signed up.
        <% end %>
      <% end %>
      <%= ui_accordion_item(value: :cancel) do %>
        <%= ui_accordion_header do %>
          <%= ui_accordion_trigger { "How do I cancel my subscription?" } %>
        <% end %>
        <%= ui_accordion_content do %>
          Cancelling is available under billing settings, and access continues until the end of the cycle.
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

API reference

The helpers wrap the ViewComponent classes and preserve free-form HTML attributes, including data: and aria:.

Helper	Main arguments	Description
`ui_accordion`	`multiple`, `default_value`, `orientation`, `disabled`, `loop_focus`	Root, with the Stimulus controller, initial values and keyboard navigation.
`ui_accordion_item`	`value`, `disabled`	The item, with `border-b last:border-b-0`. Pass `value` whenever you set `default_value`.
`ui_accordion_header`	`tag`	Renders the semantic heading; defaults to `:h3`.
`ui_accordion_trigger`	`disabled`	The button that toggles the item, with a `chevron-down` icon and Stimulus actions.
`ui_accordion_content` / `ui_accordion_panel`	`class` / `class_name`	The panel, with `role="region"`, shadcn animations and an inner `pt-0 pb-4` wrapper.