Org Row
Clickable organisation list row with logo placeholder, stats grid, impact-area badges, and an add-to-portfolio toggle. Router-decoupled via onNavigate prop.
Jesse Tree
Boise, Idaho
Confidence level94%
StrategyDirect service
Impact capital$18,500
Outcomes320
Lives impacted1,200
CommunityEducation
Open Harvest
Lincoln, Nebraska
Confidence level87%
StrategySystems change
Impact capital$12,000
Outcomes210
Lives impacted800
HumanitarianCommunity
Installation
pnpm dlx shadcn@latest add @ffg/org-rowUsage
"use client"
import { OrgRow, type OrgRowData } from "@/components/ui/org-row"
const org: OrgRowData = {
name: "Jesse Tree",
loc: "Boise, Idaho",
confidence: 94,
strategy: "Direct service",
donated: 18500,
lives: 320,
livesImpacted: 1200,
tags: ["Community", "Education"],
}
<OrgRow org={org} onNavigate={() => router.push(`/organizations/${org.name}`)} />Pass onNavigate to wire up your router. The row is a keyboard-accessible role="link" element. Impact tags render as ImpactBadge components; the add button toggles an internal added state and fires e.stopPropagation() so it doesn't trigger navigation.