PUI.Accordion (pui v1.0.0-alpha.31)

Accordion primitives for progressively revealing related content.

The components in this module use the native HTML <details> and <summary> elements, so they work without extra JavaScript while still matching the shadcn-inspired styling used throughout PUI.

Use accordion/1 as the outer wrapper, then compose it with accordion_item/1, accordion_trigger/1, and accordion_content/1.

Items that share the same name attribute behave like a single-open group, while items without name can all stay open at the same time.

Basic Usage

<.accordion class="max-w-xl">
  <.accordion_item name="faq" open>
    <.accordion_trigger>Is it accessible?</.accordion_trigger>
    <.accordion_content>
      Yes. It uses native details and summary elements.
    </.accordion_content>
  </.accordion_item>
  <.accordion_item name="faq">
    <.accordion_trigger>Can I open multiple items?</.accordion_trigger>
    <.accordion_content>
      Omit the shared `name` attribute to allow multiple open items.
    </.accordion_content>
  </.accordion_item>
</.accordion>

Unstyled / Headless

Use variant="unstyled" on each primitive when you want PUI to keep the structure but leave presentation entirely up to you:

<.accordion variant="unstyled" class="space-y-3">
  <.accordion_item variant="unstyled" class="rounded-2xl border">
    <.accordion_trigger
      variant="unstyled"
      class="flex w-full items-center justify-between px-4 py-3"
    >
      Custom trigger
    </.accordion_trigger>
    <.accordion_content variant="unstyled" class="px-4 pb-4 text-sm">
      Fully custom content styling.
    </.accordion_content>
  </.accordion_item>
</.accordion>

Attributes

`accordion/1`

Attribute	Type	Default	Description
`variant`	`string`	`"default"`	`"default"` or `"unstyled"`
`class`	`string`	`""`	Additional wrapper classes
`rest`	`global`	-	Global HTML attributes

`accordion_item/1`

Attribute	Type	Default	Description
`name`	`string`	`nil`	Shared group name for single-open behavior
`open`	`boolean`	`false`	Whether the item starts expanded
`variant`	`string`	`"default"`	`"default"` or `"unstyled"`
`class`	`string`	`""`	Additional item classes

`accordion_trigger/1`

Attribute	Type	Default	Description
`icon`	`boolean`	`true`	Show the default chevron icon
`variant`	`string`	`"default"`	`"default"` or `"unstyled"`
`class`	`string`	`""`	Additional trigger classes

`accordion_content/1`

Attribute	Type	Default	Description
`variant`	`string`	`"default"`	`"default"` or `"unstyled"`
`class`	`string`	`""`	Additional content classes

Slots

Slot	Description
`inner_block`	The nested content for each primitive

Summary

Functions

accordion(assigns)

Renders the outer accordion wrapper.

accordion_content(assigns)

Renders the accordion panel content below a trigger.

accordion_item(assigns)

Renders a single accordion item using the native <details> element.

accordion_trigger(assigns)

Renders the clickable accordion summary row.

Functions

accordion(assigns)

Renders the outer accordion wrapper.

The wrapper is intentionally lightweight. Single-open behavior is controlled by giving related accordion_item/1 entries the same name attribute.

Examples

<.accordion class="max-w-xl">
  <.accordion_item name="faq" open>
    <.accordion_trigger>Question</.accordion_trigger>
    <.accordion_content>Answer</.accordion_content>
  </.accordion_item>
</.accordion>

Attributes

class (:string) - Defaults to "".
variant (:string) - Defaults to "default". Must be one of "default", or "unstyled".
Global attributes are accepted.

Slots

inner_block (required)

accordion_content(assigns)

Renders the accordion panel content below a trigger.

Place this component directly after accordion_trigger/1 inside an accordion_item/1.

Examples

<.accordion_content>
  Answers, body copy, and custom markup go here.
</.accordion_content>

Attributes

class (:string) - Defaults to "".
variant (:string) - Defaults to "default". Must be one of "default", or "unstyled".
Global attributes are accepted.

Slots

inner_block (required)

accordion_item(assigns)

Renders a single accordion item using the native <details> element.

Use the same name on sibling items to create single-open behavior similar to a traditional accordion. Leave name empty to allow multiple items to stay expanded.

Examples

<.accordion_item name="faq" open>
  <.accordion_trigger>Question</.accordion_trigger>
  <.accordion_content>Answer</.accordion_content>
</.accordion_item>

Attributes

class (:string) - Defaults to "".
name (:string) - Defaults to nil.
open (:boolean) - Defaults to false.
variant (:string) - Defaults to "default". Must be one of "default", or "unstyled".
Global attributes are accepted.

Slots

inner_block (required)

accordion_trigger(assigns)

Renders the clickable accordion summary row.

By default the trigger includes a chevron that rotates when its parent item is open. Set icon={false} to hide it.

Examples

<.accordion_trigger>Billing & shipping</.accordion_trigger>
<.accordion_trigger icon={false}>Plain trigger</.accordion_trigger>

Attributes

class (:string) - Defaults to "".
icon (:boolean) - Defaults to true.
variant (:string) - Defaults to "default". Must be one of "default", or "unstyled".
Global attributes are accepted.

Slots

inner_block (required)