Factory for Good

Logo Placeholder

FFG-native deterministic monogram for organization directory and detail views.

Installation

pnpm dlx shadcn@latest add @ffg/logo-placeholder

Usage

import { LogoPlaceholder } from "@/components/ui/logo-placeholder";

<LogoPlaceholder name="Hope Collective" size={50} />

Generates a stable abstract mark (10 palettes × 6 shapes = 60 combinations) from a hash of name, so the same org always gets the same logo. Used across the organization directory and detail views. Mark colour is a fixed brand accent; the hairline border is dark-aware via currentColor opacity.

Impact Chart

Recharts ComposedChart showing dollars given (bars) and outcomes reached (area) over time, with an optional account-balance trend line.

Org Accordion

FFG-native click-toggle disclosure — a header button reveals an animated body, with a default-open variant.

On this page

InstallationUsage