Accordion Edit

A vertically stacked set of interactive headings that each reveal a section of content.

Examples

Did you know?

You can wrap shadcn helpers in any component library you want!

Use the generators

Add components with rails g shadcn_ui add accordion

Installation


rails generate shadcn-ui accordion

Usage

# Inline
<%= render_accordion(title:, description:) %>

# Description Block
<%= render_accordion(title:) do %>

<% end %>

# Title and Description Block
<%= render_accordion do %>
  <%= accordion_title do %>
  <% end %>

  <%= accordion_description do %>
  <% end %>
<% end %>

The Accordion component introduces:

  • app/helpers/components/accordion_helper.rb
  • app/views/components/ui/_accordion.html.erb
  • app/javascript/controllers/ui/accordion_controller.js

The method render_accordion defined in app/helpers/components/accordion_helper.rb accepts a title: and description: keyword arguments in the inline usage.

When passed only a title argument, the helper will accept a block to be rendered as the content for the description.

When passed no arguments, the block passed to the accordion helper must call accordion_title and accordion_description both of which accept blocks for the content for those portals within the component.

Embed components in the description of an accordion

A Simple Card

But it could be anything really, give it a try.

If you need to customize the title

Use the full block format.