Installation

pnpm dlx shadcn@latest add @ffg/welcome

Usage

import { Welcome } from "@/components/ui/welcome";

<Welcome name="Alex" livesCount={1284} state="new good" />
<Welcome state="generic" />

The hero greeting at the top of the dashboard. A serif (PP Fragment Glare) headline pairs with a subtitle whose copy swaps by state:

• new good — impact recap; links to the livesCount new lives reached
• generic — "Review what your good is doing."
• initial — "Direct where your good goes."
• none — headline only, no subtitle

Accent links call onTabChange and smooth-scroll to the #impact-tabs section. Pass name when it is known; leading and trailing whitespace is trimmed. When name is omitted, null, or blank, the headline renders exactly Welcome,. Pass livesCount for the new good state and onTabChange to wire the links.

Dark mode: the headline maps to text-foreground and the subtitle to text-muted-foreground; accent links use a foreground-colored underline so they stay legible against either background.