Org Accordion

Installation

pnpm dlx shadcn@latest add @ffg/org-accordion

Usage

import { OrgAccordion } from "@/components/ui/org-accordion";

<OrgAccordion title="How funds are used" defaultOpen>
  <p className="m-0">Every dollar is tracked to a verified outcome.</p>
</OrgAccordion>

A self-contained disclosure panel. The header button toggles an open state; the body animates open via a CSS grid-rows 0fr → 1fr transition so it clips cleanly while collapsed, and the caret rotates 180° when open.

• icon — optional leading glyph in the header
• title — header label
• defaultOpen — start expanded
• variant — optional style modifier, preserved from the source API
• children — body content; falls back to placeholder copy when omitted

Dark mode: the header text maps to --foreground, while the caret and body copy use --muted-foreground, and the row divider uses the faint --border token — so the component stays legible against either background.