Accordion
A vertically stacked set of interactive headings that each reveal an associated section of content.
Stimulus: shadcn--accordion
Yes. It adheres to the WAI-ARIA design pattern.
Yes. It comes with default styles that you can customize.
Yes. It's animated by default, but you can disable it if you prefer.
accordion/default
<div class="w-full max-w-md">
<%= render Shadcn::AccordionComponent.new(type: :single, collapsible: true, default_value: "default-2") do |accordion| %>
<% accordion.with_item(value: "default-1") do |item| %>
<% item.with_trigger { "First Item" } %>
<% item.with_body { "This item starts collapsed." } %>
<% end %>
<% accordion.with_item(value: "default-2") do |item| %>
<% item.with_trigger { "Second Item (Default Open)" } %>
<% item.with_body { "This item starts expanded because it's set as the default value." } %>
<% end %>
<% end %>
</div>
Installation
Add the component to your project:
rails generate shadcn:add accordionUsage
<div class="w-full max-w-md">
<%= render Shadcn::AccordionComponent.new(type: :single, collapsible: true, default_value: "default-2") do |accordion| %>
<% accordion.with_item(value: "default-1") do |item| %>
<% item.with_trigger { "First Item" } %>
<% item.with_body { "This item starts collapsed." } %>
<% end %>
<% accordion.with_item(value: "default-2") do |item| %>
<% item.with_trigger { "Second Item (Default Open)" } %>
<% item.with_body { "This item starts expanded because it's set as the default value." } %>
<% end %>
<% end %>
</div>
Examples
Single (Collapsible)
Only one item can be open at a time. Can be fully collapsed.
ViewComponent is a framework for building reusable, testable & encapsulated view components in Ruby on Rails.
shadcn-rails brings the beautiful shadcn/ui components to Rails applications, with full support for ViewComponent and Stimulus.
<div class="w-full max-w-md">
<%= render Shadcn::AccordionComponent.new(type: :single, collapsible: true) do |accordion| %>
<% accordion.with_item(value: "faq-1") do |item| %>
<% item.with_trigger { "What is ViewComponent?" } %>
<% item.with_body { "ViewComponent is a framework for building reusable, testable & encapsulated view components in Ruby on Rails." } %>
<% end %>
<% accordion.with_item(value: "faq-2") do |item| %>
<% item.with_trigger { "Why use shadcn-rails?" } %>
<% item.with_body { "shadcn-rails brings the beautiful shadcn/ui components to Rails applications, with full support for ViewComponent and Stimulus." } %>
<% end %>
<% end %>
</div>
Multiple
Multiple items can be open at the same time.
Content for the first section. You can open multiple sections at once.
Content for the second section. Try opening this while the first is open.
Content for the third section. All can be open simultaneously.
<div class="w-full max-w-md">
<%= render Shadcn::AccordionComponent.new(type: :multiple) do |accordion| %>
<% accordion.with_item(value: "multi-1") do |item| %>
<% item.with_trigger { "First Section" } %>
<% item.with_body { "Content for the first section. You can open multiple sections at once." } %>
<% end %>
<% accordion.with_item(value: "multi-2") do |item| %>
<% item.with_trigger { "Second Section" } %>
<% item.with_body { "Content for the second section. Try opening this while the first is open." } %>
<% end %>
<% accordion.with_item(value: "multi-3") do |item| %>
<% item.with_trigger { "Third Section" } %>
<% item.with_body { "Content for the third section. All can be open simultaneously." } %>
<% end %>
<% end %>
</div>
Default Open
Use default_value to set initially expanded items.
This item starts collapsed.
This item starts expanded because it's set as the default value.
<div class="w-full max-w-md">
<%= render Shadcn::AccordionComponent.new(type: :single, collapsible: true, default_value: "default-2") do |accordion| %>
<% accordion.with_item(value: "default-1") do |item| %>
<% item.with_trigger { "First Item" } %>
<% item.with_body { "This item starts collapsed." } %>
<% end %>
<% accordion.with_item(value: "default-2") do |item| %>
<% item.with_trigger { "Second Item (Default Open)" } %>
<% item.with_body { "This item starts expanded because it's set as the default value." } %>
<% end %>
<% end %>
</div>
FAQ Example
Frequently Asked Questions
Find answers to common questions below.
Install the gem, run the install generator, and start using components in your views.
Yes! All components use Tailwind CSS classes that can be overridden or extended.
The components are designed for production use with proper accessibility and test coverage.
Single (Always One Open)
Manage your account settings and preferences.
You can update your profile, change password, and more.
Configure security settings for your account.
Enable two-factor authentication and manage devices.
Choose what notifications you want to receive.
You can customize email and push notification preferences.
accordion/single_non_collapsible
<div class="w-full max-w-md">
<%= render Shadcn::AccordionComponent.new(type: :single, collapsible: true, default_value: "default-2") do |accordion| %>
<% accordion.with_item(value: "default-1") do |item| %>
<% item.with_trigger { "First Item" } %>
<% item.with_body { "This item starts collapsed." } %>
<% end %>
<% accordion.with_item(value: "default-2") do |item| %>
<% item.with_trigger { "Second Item (Default Open)" } %>
<% item.with_body { "This item starts expanded because it's set as the default value." } %>
<% end %>
<% end %>
</div>
With Default Value
shadcn-rails is a Ruby port of shadcn/ui for Rails applications using ViewComponent.
Add the gem to your Gemfile and run the install generator:
rails generate shadcn:install
Yes! All components are fully customizable with Tailwind CSS classes and theme variables.
accordion/with_default_value
<div class="w-full max-w-md">
<%= render Shadcn::AccordionComponent.new(type: :single, collapsible: true, default_value: "default-2") do |accordion| %>
<% accordion.with_item(value: "default-1") do |item| %>
<% item.with_trigger { "First Item" } %>
<% item.with_body { "This item starts collapsed." } %>
<% end %>
<% accordion.with_item(value: "default-2") do |item| %>
<% item.with_trigger { "Second Item (Default Open)" } %>
<% item.with_body { "This item starts expanded because it's set as the default value." } %>
<% end %>
<% end %>
</div>
Multiple With Default Values
A JavaScript library for building user interfaces. Created by Facebook.
A progressive JavaScript framework for building user interfaces. Created by Evan You.
A server-side web application framework written in Ruby. Convention over configuration.
accordion/multiple_with_defaults
<div class="w-full max-w-md">
<%= render Shadcn::AccordionComponent.new(type: :single, collapsible: true, default_value: "default-2") do |accordion| %>
<% accordion.with_item(value: "default-1") do |item| %>
<% item.with_trigger { "First Item" } %>
<% item.with_body { "This item starts collapsed." } %>
<% end %>
<% accordion.with_item(value: "default-2") do |item| %>
<% item.with_trigger { "Second Item (Default Open)" } %>
<% item.with_body { "This item starts expanded because it's set as the default value." } %>
<% end %>
<% end %>
</div>
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 shadcn--accordion provides interactivity.
Manages accordion state and handles expand/collapse animations.
Installation
Add to your config/importmap.rb:
pin "shadcn", to: "index.esm.js"
Then in your app/javascript/controllers/index.js:
import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn"
const application = Application.start()
registerShadcnControllers(application)
Install the package:
npm install shadcn-rails-stimulusThen in your app/javascript/controllers/index.js:
import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails-stimulus"
const application = Application.start()
registerShadcnControllers(application)
Install the package:
yarn add shadcn-rails-stimulusThen in your app/javascript/controllers/index.js:
import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails-stimulus"
const application = Application.start()
registerShadcnControllers(application)
Install the package:
npm install shadcn-rails-stimulusThen in your app/javascript/controllers/index.js:
import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails-stimulus"
const application = Application.start()
registerShadcnControllers(application)
Or import just this controller:
import AccordionController from "shadcn-rails-stimulus/controllers/accordion_controller"
application.register("shadcn--accordion", AccordionController)
Values
| Name | Type | Default | Description |
|---|---|---|---|
| type | String |
"single"
|
Accordion type (single or multiple) |
| collapsible | Boolean |
false
|
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 { AccordionController } from "shadcn-rails-stimulus"
Accessibility
- Follows WAI-ARIA Accordion design pattern
- Triggers have
aria-expandedandaria-controls - Content regions have
role="region"andaria-labelledby - Full keyboard navigation support (Enter, Space to toggle)
On This Page