Shadix

Accordion

A vertically stacked set of collapsible sections, animated with pure CSS and client-side JS — no server round-trip.

Shadix brings shadcn/ui-style components to Phoenix LiveView with zero JavaScript frameworks — just Tailwind and Phoenix primitives.

Yes. Each panel uses aria-controls, aria-expanded, and inert so collapsed content is fully hidden from assistive technology.

Panels animate open and closed using a CSS grid-template-rows transition. Motion is automatically reduced when the user prefers it. 
<.accordion></.accordion>

Examples

Default

Three items with independent toggle behaviour.

Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers an unparalleled user experience.

We offer worldwide shipping through trusted courier partners. Standard delivery takes 3–5 business days.

We stand behind our products with a comprehensive 30-day return policy. If you are not satisfied, return it for a full refund. 
<div class="w-full max-w-md">
  <.accordion type="single">
    <.accordion_item id="acc-product">
      <.accordion_trigger id="acc-product">Product Information</.accordion_trigger>
      <.accordion_content id="acc-product">
        Our flagship product combines cutting-edge technology with sleek design.
        Built with premium materials, it offers an unparalleled user experience.
      </.accordion_content>
    </.accordion_item>
    <.accordion_item id="acc-shipping">
      <.accordion_trigger id="acc-shipping">Shipping Details</.accordion_trigger>
      <.accordion_content id="acc-shipping">
        We offer worldwide shipping through trusted courier partners.
        Standard delivery takes 3–5 business days.
      </.accordion_content>
    </.accordion_item>
    <.accordion_item id="acc-returns">
      <.accordion_trigger id="acc-returns">Return Policy</.accordion_trigger>
      <.accordion_content id="acc-returns">
        We stand behind our products with a comprehensive 30-day return policy.
        If you are not satisfied, return it for a full refund.
      </.accordion_content>
    </.accordion_item>
  </.accordion>
</div>

Props

Name Type Default Values
class :string
rest :global
type :string "single" single | multiple
inner_block (slot) :slot