shadcn-rails

Accordion

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

Stimulus: shadcn--accordion

Installation

Add the component to your project:

rails generate shadcn:component accordion

Usage

<%= render Shadcn::AccordionComponent.new(type: :single, collapsible: true) do |accordion| %>
  <% accordion.with_item(value: "item-1") do |item| %>
    <% item.with_trigger { "Is it accessible?" } %>
    <% item.with_body { "Yes. It adheres to the WAI-ARIA design pattern." } %>
  <% end %>
  <% accordion.with_item(value: "item-2") do |item| %>
    <% item.with_trigger { "Is it styled?" } %>
    <% item.with_body { "Yes. It comes with default styles that match shadcn/ui." } %>
  <% end %>
  <% accordion.with_item(value: "item-3") do |item| %>
    <% item.with_trigger { "Is it animated?" } %>
    <% item.with_body { "Yes. It's animated by default with CSS transitions." } %>
  <% end %>
<% end %>

Examples

Single (Collapsible)

Only one item can be open at a time. Can be fully collapsed.

Multiple

Multiple items can be open at the same time.

Default Open

Use default_value to set initially expanded items.

FAQ Example

Frequently Asked Questions

Find answers to common questions below.

API Reference

API Reference

Prop Type Default Description
type Symbol :single Accordion type (:single, :multiple)
collapsible Boolean false For single type, whether all items can be collapsed
default_value String/Array nil Initially expanded item value(s)
class_name String nil Additional CSS classes to apply

Item Slots

Slot Description
with_item(value:) Accordion item container (requires unique value)
item.with_trigger Clickable header that toggles the content
item.with_body Collapsible content area

Stimulus Controller

This component requires JavaScript. The Stimulus controller docs provides interactivity.

Manages accordion state and handles expand/collapse animations.

Installation

Add to your config/importmap.rb:

pin "shadcn-rails", to: "shadcn/index.js"

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails"

const application = Application.start()
registerShadcnControllers(application)

Or import just this controller:

import DocsController from "shadcn-rails/controllers/docs_controller"

application.register("docs", DocsController)

Values

Name Type Default Description
type String Accordion type (single or multiple)
collapsible Boolean Whether single accordion can be fully collapsed
default String Comma-separated list of default open item values

Actions

Action Description
toggle Toggles an accordion item's expanded state

TypeScript

Type definitions are included. Import types as needed: 

import type { DocsController } from "shadcn-rails"

Accessibility

  • Follows WAI-ARIA Accordion design pattern
  • Triggers have aria-expanded and aria-controls
  • Content regions have role="region" and aria-labelledby
  • Full keyboard navigation support (Enter, Space to toggle)