Org Accordion Item
FFG-native boxed assessment accordion — a bordered card with an icon and title that expands to reveal its body.
Addresses a clearly defined, high-impact problem with strong evidence of need.
Installation
pnpm dlx shadcn@latest add @ffg/org-accordion-itemUsage
import { OrgAccordionItem } from "@/components/ui/org-accordion-item";
<OrgAccordionItem icon={<Icon.Check />} title="Problem Quality" defaultOpen>
<p>Addresses a clearly defined, high-impact problem.</p>
</OrgAccordionItem>A bordered card whose header shows an icon and title; clicking it expands the
body via a grid-template-rows height transition, rotating the caret 180°.
- icon — optional leading glyph rendered in the header
- title — header label (foreground text)
- defaultOpen — start expanded
- children — body content (falls back to placeholder copy when omitted)
The component owns its open/closed state, so it is a client component.
Dark mode: the faint resting border maps to
--borderwhile the open and hover border maps to--foreground, so the outline stays strong in either theme. Title and icon use--foreground; the body and caret use--muted-foreground, with a translucent muted hover wash.