Dashral Pro is on the wayGet 30% off at launch

Dashral

Accordion

Vertically stacked sections that expand to reveal content.

$ pnpm dlx shadcn@latest add https://dashral.com/r/accordion.json

Yes. The free version is MIT licensed — use it in personal and commercial projects.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/accordion.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json
{
  "registries": {
    "@dashral": "https://dashral.com/r/{name}.json"
  }
}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/accordion

Usage

example.tsx
import { Accordion } from "@/components/dashral/accordion"

<Accordion
  items={[
    { title: "Can I change plans later?", content: "Yes, upgrade or downgrade at any time." },
    { title: "Do you offer refunds?", content: "In full within 14 days, for any reason." },
  ]}
/>

Examples

Multiple, separated

multiple keeps several open; variant="separated" makes each a card.

Orders ship within 2 business days.

Return any item within 30 days for a full refund.

Searchable FAQ

Typing filters the questions, marks the match and opens the answers that matched.

API reference

Accordion

Also takes every prop of <div>(opens in a new tab).

PropTypeDefault
items{ title, content, value?, disabled? }[]

The sections. Required.

—
multipleboolean

Any number open at once; otherwise opening one closes the other.

false
value / defaultValuestring[]

The open sections (their value, or index), controlled or initial.

—
onValueChange(value: string[]) => void

Called with the new value.

—
variant"default" | "separated"

Rows split by lines, or each a card of its own.

"default"
classNames{ item, trigger, content }

Classes for each part.

—
classNamestring

Extra classes, merged with cn() so yours win.

—

Keyboard

KeysAction
EnterorSpaceOpen or close the focused section
↓or↑Move to the next or previous heading
HomeorEndMove to the first or last heading

Accessibility

  • Each trigger is a button inside a heading, with aria-expanded and aria-controls pointing at its section.
  • Sections are regions labelled by their heading.

Motion

  • Sections slide open and closed by their measured height.