Accordion

A vertically stacked set of disclosure rows that expand one at a time.

Installation

bun add elia

@import "tailwindcss";
@import "@aile.sh/elia/styles/elia.css";
@source "../node_modules/@aile.sh/elia";

Usage

import { Accordion, AccordionItem } from "@aile.sh/elia";

export function Example() {
  return (
    <div className="w-full max-w-sm">
      <Accordion type="single">
        <AccordionItem title="Vendor onboarding">
          Cold-chain certification must be verified before a new dairy joins the
          reorder workflow.
        </AccordionItem>
        <AccordionItem title="Seasonal demand">
          Pistachio is up 18% and vanilla 6%; flavors below 40 weekly scoops
          rotate out.
        </AccordionItem>
        <AccordionItem title="Delivery windows">
          Frozen deliveries land Tuesday and Friday mornings, before the shop
          opens.
        </AccordionItem>
      </Accordion>
    </div>
  );
}

— elia design system · MIT · base · https://github.com/aile-sh/elia