Accordion

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

@react.component
let make = () =>
  <Accordion defaultValue=["shipping"] className="max-w-lg">

Installation

npx shadcn@latest add @rescript-shadcn/Accordion

Usage

<Accordion defaultValue=["item-1"]>
  <Accordion.Item value="item-1">
    <Accordion.Trigger> {"Is it accessible?"->React.string} </Accordion.Trigger>
    <Accordion.Content>
      {"Yes. It adheres to the WAI-ARIA design pattern."->React.string}
    </Accordion.Content>
  </Accordion.Item>
</Accordion>

Examples

Basic

A basic accordion that shows one item at a time. The first item is open by default.

type item = {
  value: string,
  trigger: string,

Multiple

Use the multiple prop to allow multiple items to be open at the same time.

type item = {
  value: string,
  trigger: string,

Disabled

Use the disabled prop on AccordionItem to disable individual items.

@react.component
let make = () =>
  <Accordion className="w-full">

Borders

Add border to the Accordion and border-b last:border-b-0 to the AccordionItem to add borders to the items.

type item = {
  value: string,
  trigger: string,

Card

Wrap the Accordion in a Card component.

type item = {
  value: string,
  trigger: string,

API Reference

See the Base UI documentation for more information.