Accordion

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

Source

Installation

npx @rahimstack@latest add accordion

API Reference

const AccordionAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Accordion__root",
    ]),
    header: cva([
        "UI-Accordion__header",
        "flex text-lg",
    ]),
    trigger: cva([
        "UI-Accordion__trigger",
        "flex flex-1 items-center justify-between px-4 py-2 font-medium transition-all hover:bg-[--subtle] [&[data-state=open]>svg]:rotate-180",
    ]),
    triggerIcon: cva([
        "UI-Accordion__triggerIcon",
        "h-4 w-4 shrink-0 transition-transform duration-200",
    ]),
    item: cva([
        "UI-Accordion__item",
        "border-b",
    ]),
    contentContainer: cva([
        "UI-Accordion__contentContainer",
        "overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
    ]),
    content: cva([
        "UI-Accordion__content",
        "p-4",
    ]),
})