Cause Row
FFG-native reorderable cause row — drag handle, category icon, label, and an expandable description.
You're drawn to climate resilience, conservation, and the systems that keep ecosystems intact for future generations.
Education is your lever — closing access gaps and investing in the institutions that shape what comes next.
Physical and mental wellbeing as foundational — relief in crisis, access to care, and the conditions for healthy lives.
Installation
pnpm dlx shadcn@latest add @ffg/cause-rowUsage
import { CauseRow } from "@/components/ui/cause-row";
<CauseRow
cause={{ name: "Environment", description: "Climate resilience and conservation." }}
rank={1}
isTop
isOpen={open}
onToggle={() => setOpen((o) => !o)}
/>A single reorderable cause row. Presentational — the parent owns ordering, drag state, and open state and passes them in. Props:
- cause —
{ name, description }; the category icon + accent colour are resolved from the sharedCATEGORY_ICONSmap byname - rank / isTop — the rank number is shown only for top-ranked rows
- isDragging / isOver — drag-and-drop affordances (lifted row, drop bar)
- isOpen / onToggle — caret toggles the grid-rows expand animation
- dragProps — spread onto the draggable row for the parent's DnD handlers
Dark mode: outlined rows use the faint/strong divider aliases; top-ranked and drag/drop states promote to
--primaryso contrast inverts correctly. Text maps toforeground/muted-foreground, and the lifted/over fill uses the muted token.