{"version":1,"client":"factory-for-good","themeTokens":{"--background":"neutral","--foreground":"neutral","--primary":"neutral","--radius":"0.625rem"},"components":[{"slug":"allocation-treemap","name":"Allocation Treemap","category":"Data","description":"Dashboard-level wrapper around CauseAllocationTreemap with built-in sample allocation data.","docsUrl":"/components/allocation-treemap","minimalDocsUrl":"/components/allocation-treemap?minimal","previewUrl":"/preview/allocation-treemap","code":"\"use client\"\nimport { AllocationTreemap } from \"@/components/ui/allocation-treemap\"\nexport function Demo() {\n  return <AllocationTreemap />\n}\n"},{"slug":"calendar","name":"Calendar","category":"Data","description":"A calendar component that allows users to select a date or a range of dates.","docsUrl":"/components/calendar","minimalDocsUrl":"/components/calendar?minimal","previewUrl":"/preview/calendar","code":"\"use client\";\nimport * as React from \"react\";\nimport { Calendar } from \"@/components/ui/calendar\";\n\nexport function Demo() {\n  return (\n    <Calendar mode=\"single\" className=\"rounded-lg border\" />\n  );\n}\n"},{"slug":"cause-allocation-treemap","name":"Cause Allocation Treemap","category":"Data","description":"Recharts Treemap that visualises portfolio allocation across cause categories, with proportional cells coloured by the FFG category palette.","docsUrl":"/components/cause-allocation-treemap","minimalDocsUrl":"/components/cause-allocation-treemap?minimal","previewUrl":"/preview/cause-allocation-treemap","code":"\"use client\"\nimport { CauseAllocationTreemap } from \"@/components/ui/cause-allocation-treemap\"\nconst DATA = [\n  { name: \"Social Justice\", size: 40 },\n  { name: \"Education\",      size: 20 },\n  { name: \"Community\",      size: 15 },\n]\nexport function Demo() {\n  return <CauseAllocationTreemap data={DATA} />\n}\n"},{"slug":"data-table","name":"Data Table","category":"Data","description":"Powerful table and datagrids built using TanStack Table.","docsUrl":"/components/data-table","minimalDocsUrl":"/components/data-table?minimal","previewUrl":"/preview/data-table","code":"import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from \"@/components/ui/table\";\n\nconst invoices = [\n  { id: \"INV001\", status: \"Paid\", method: \"Credit Card\", amount: \"$250.00\" },\n  { id: \"INV002\", status: \"Pending\", method: \"PayPal\", amount: \"$150.00\" },\n  { id: \"INV003\", status: \"Unpaid\", method: \"Bank Transfer\", amount: \"$350.00\" },\n];\n\nexport function Demo() {\n  return (\n    <Table className=\"max-w-md\">\n      <TableCaption>A list of recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow><TableHead>Invoice</TableHead><TableHead>Status</TableHead><TableHead>Method</TableHead><TableHead className=\"text-right\">Amount</TableHead></TableRow>\n      </TableHeader>\n      <TableBody>\n        {invoices.map((i) => (\n          <TableRow key={i.id}><TableCell>{i.id}</TableCell><TableCell>{i.status}</TableCell><TableCell>{i.method}</TableCell><TableCell className=\"text-right\">{i.amount}</TableCell></TableRow>\n        ))}\n      </TableBody>\n    </Table>\n  );\n}\n"},{"slug":"date-picker","name":"Date Picker","category":"Data","description":"A date picker component with range and presets.","docsUrl":"/components/date-picker","minimalDocsUrl":"/components/date-picker?minimal","previewUrl":"/preview/date-picker","code":"\"use client\";\nimport * as React from \"react\";\nimport { CalendarIcon } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nexport function Demo() {\n  return (\n    <Popover>\n      <PopoverTrigger render={<Button variant=\"outline\" className=\"w-56 justify-start\"><CalendarIcon /> Pick a date</Button>} />\n      <PopoverContent className=\"w-auto p-0\"><Calendar mode=\"single\" /></PopoverContent>\n    </Popover>\n  );\n}\n"},{"slug":"dot-chart","name":"Dot Chart","category":"Data","description":"SVG scatter plot on log-scale X (people reached) × linear Y (depth of impact) axes, used on the organization detail page.","docsUrl":"/components/dot-chart","minimalDocsUrl":"/components/dot-chart?minimal","previewUrl":"/preview/dot-chart","code":"import { DotChart } from \"@/components/ui/dot-chart\"\nexport function Demo() {\n  return <DotChart peopleReached={120} depth={1.8} />\n}\n"},{"slug":"impact-chart","name":"Impact Chart","category":"Data","description":"Recharts ComposedChart showing dollars given (bars) and outcomes reached (area) over time, with an optional account-balance trend line.","docsUrl":"/components/impact-chart","minimalDocsUrl":"/components/impact-chart?minimal","previewUrl":"/preview/impact-chart","code":"\"use client\"\nimport { ImpactChart } from \"@/components/ui/impact-chart\"\nconst DATA = [\n  { m: \"Jan\", dollars: 12000, outcomes: 320, balance: 85000 },\n  { m: \"Jun\", dollars: 28000, outcomes: 640, balance: 105000 },\n]\nexport function Demo() {\n  return <ImpactChart data={DATA} />\n}\n"},{"slug":"stat","name":"Stat","category":"Data","description":"FFG-native organization stat — a label with a muted info glyph above a large tabular value.","docsUrl":"/components/stat","minimalDocsUrl":"/components/stat?minimal","previewUrl":"/preview/stat","code":"import { Stat } from \"@/components/ui/stat\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex flex-wrap gap-12\">\n      <Stat label=\"People reached\" value=\"48,200\" />\n      <Stat label=\"Funds deployed\" value=\"$1.1M\" />\n    </div>\n  );\n}\n"},{"slug":"stat-card","name":"Stat Card","category":"Data","description":"FFG-native count-up stat card — a framed metric tile with a corner open button, label, animated value, and trend.","docsUrl":"/components/stat-card","minimalDocsUrl":"/components/stat-card?minimal","previewUrl":"/preview/stat-card","code":"import { StatCard } from \"@/components/ui/stat-card\";\n\nexport function Demo() {\n  return (\n    <div className=\"grid w-full gap-4 sm:grid-cols-2\">\n      <StatCard\n        label=\"Total volume\"\n        rawNum={48250}\n        prefix=\"$\"\n        trend=\"+12.4% vs. last month\"\n        scope=\"org\"\n      />\n      <StatCard\n        label=\"Active transfers\"\n        value=\"318\"\n        trend=\"+8 this week\"\n        scope=\"org\"\n      />\n    </div>\n  );\n}\n"},{"slug":"table","name":"Table","category":"Data","description":"A responsive table component.","docsUrl":"/components/table","minimalDocsUrl":"/components/table?minimal","previewUrl":"/preview/table","code":"import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from \"@/components/ui/table\";\n\nexport function Demo() {\n  return (\n    <Table className=\"max-w-md\">\n      <TableCaption>A list of recent invoices.</TableCaption>\n      <TableHeader>\n        <TableRow><TableHead>Invoice</TableHead><TableHead>Status</TableHead><TableHead className=\"text-right\">Amount</TableHead></TableRow>\n      </TableHeader>\n      <TableBody>\n        <TableRow><TableCell>INV001</TableCell><TableCell>Paid</TableCell><TableCell className=\"text-right\">$250.00</TableCell></TableRow>\n        <TableRow><TableCell>INV002</TableCell><TableCell>Pending</TableCell><TableCell className=\"text-right\">$150.00</TableCell></TableRow>\n      </TableBody>\n    </Table>\n  );\n}\n"},{"slug":"aspect-ratio","name":"Aspect Ratio","category":"Display","description":"Displays content within a desired ratio.","docsUrl":"/components/aspect-ratio","minimalDocsUrl":"/components/aspect-ratio?minimal","previewUrl":"/preview/aspect-ratio","code":"import { AspectRatio } from \"@/components/ui/aspect-ratio\";\n\nexport function Demo() {\n  return (\n    <div className=\"w-72\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg flex items-center justify-center text-muted-foreground text-sm\">16 / 9</AspectRatio>\n    </div>\n  );\n}\n"},{"slug":"avatar","name":"Avatar","category":"Display","description":"An image element with a fallback for representing the user.","docsUrl":"/components/avatar","minimalDocsUrl":"/components/avatar?minimal","previewUrl":"/preview/avatar","code":"import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport function Demo() {\n  return (\n    <Avatar>\n      <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n      <AvatarFallback>CN</AvatarFallback>\n    </Avatar>\n  );\n}\n"},{"slug":"badge","name":"Badge","category":"Display","description":"Displays a badge or a component that looks like a badge.","docsUrl":"/components/badge","minimalDocsUrl":"/components/badge?minimal","previewUrl":"/preview/badge","code":"import { Badge } from \"@/components/ui/badge\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex gap-2\">\n      <Badge>Default</Badge>\n      <Badge variant=\"secondary\">Secondary</Badge>\n      <Badge variant=\"outline\">Outline</Badge>\n      <Badge variant=\"destructive\">Destructive</Badge>\n    </div>\n  );\n}\n"},{"slug":"card","name":"Card","category":"Display","description":"Displays a card with header, content, and footer.","docsUrl":"/components/card","minimalDocsUrl":"/components/card?minimal","previewUrl":"/preview/card","code":"import { Button } from \"@/components/ui/button\";\nimport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from \"@/components/ui/card\";\n\nexport function Demo() {\n  return (\n    <Card className=\"w-72\">\n      <CardHeader>\n        <CardTitle>Sign up</CardTitle>\n        <CardDescription>Create an account in under a minute.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"text-muted-foreground text-sm\">Card body content.</CardContent>\n      <CardFooter><Button className=\"w-full\">Continue</Button></CardFooter>\n    </Card>\n  );\n}\n"},{"slug":"carousel","name":"Carousel","category":"Display","description":"A carousel with motion and swipe built using Embla.","docsUrl":"/components/carousel","minimalDocsUrl":"/components/carousel?minimal","previewUrl":"/preview/carousel","code":"\"use client\";\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from \"@/components/ui/carousel\";\nimport { Card, CardContent } from \"@/components/ui/card\";\n\nexport function Demo() {\n  return (\n    <Carousel className=\"w-64\">\n      <CarouselContent>\n        {Array.from({ length: 5 }).map((_, i) => (\n          <CarouselItem key={i}>\n            <Card><CardContent className=\"flex aspect-square items-center justify-center text-3xl font-semibold\">{i + 1}</CardContent></Card>\n          </CarouselItem>\n        ))}\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n  );\n}\n"},{"slug":"cause-row","name":"Cause Row","category":"Display","description":"FFG-native reorderable cause row — drag handle, category icon, label, and an expandable description.","docsUrl":"/components/cause-row","minimalDocsUrl":"/components/cause-row?minimal","previewUrl":"/preview/cause-row","code":"import { CauseRow } from \"@/components/ui/cause-row\";\n\nexport function Demo() {\n  const [openId, setOpenId] = React.useState(\"environment\");\n  const causes = [\n    { id: \"environment\", name: \"Environment\", description: \"Climate resilience, conservation, and the systems that keep ecosystems intact.\" },\n    { id: \"education\", name: \"Education\", description: \"Closing access gaps and investing in the institutions that shape what comes next.\" },\n  ];\n  return (\n    <div className=\"flex w-full flex-col gap-2.5\" role=\"list\">\n      {causes.map((cause, idx) => (\n        <CauseRow\n          key={cause.id}\n          cause={cause}\n          rank={idx + 1}\n          isTop\n          isOpen={openId === cause.id}\n          onToggle={() => setOpenId(openId === cause.id ? null : cause.id)}\n        />\n      ))}\n    </div>\n  );\n}\n"},{"slug":"chart","name":"Chart","category":"Display","description":"Beautiful charts. Built using Recharts. Copy and paste into your apps.","docsUrl":"/components/chart","minimalDocsUrl":"/components/chart?minimal","previewUrl":"/preview/chart","code":"\"use client\";\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\";\nimport { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from \"@/components/ui/chart\";\n\nconst data = [\n  { month: \"Jan\", desktop: 186, mobile: 80 },\n  { month: \"Feb\", desktop: 305, mobile: 200 },\n  { month: \"Mar\", desktop: 237, mobile: 120 },\n  { month: \"Apr\", desktop: 73, mobile: 190 },\n];\nconst config = {\n  desktop: { label: \"Desktop\", color: \"var(--chart-1)\" },\n  mobile: { label: \"Mobile\", color: \"var(--chart-2)\" },\n} satisfies ChartConfig;\n\nexport function Demo() {\n  return (\n    <ChartContainer config={config} className=\"h-48 w-72\">\n      <BarChart data={data}>\n        <CartesianGrid vertical={false} />\n        <XAxis dataKey=\"month\" tickLine={false} axisLine={false} />\n        <ChartTooltip content={<ChartTooltipContent />} />\n        <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n        <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n      </BarChart>\n    </ChartContainer>\n  );\n}\n"},{"slug":"empty","name":"Empty","category":"Display","description":"Use the Empty component to display an empty state.","docsUrl":"/components/empty","minimalDocsUrl":"/components/empty?minimal","previewUrl":"/preview/empty","code":"import { InboxIcon } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from \"@/components/ui/empty\";\n\nexport function Demo() {\n  return (\n    <Empty className=\"w-80\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\"><InboxIcon /></EmptyMedia>\n        <EmptyTitle>No messages</EmptyTitle>\n        <EmptyDescription>Your inbox is empty. Start a new conversation.</EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent><Button>Compose</Button></EmptyContent>\n    </Empty>\n  );\n}\n"},{"slug":"focus-bubbles","name":"Focus Bubbles","category":"Display","description":"Animated SVG bubble cluster for the onboarding review step — three selected cause areas float and breathe using a spring-physics RAF loop.","docsUrl":"/components/focus-bubbles","minimalDocsUrl":"/components/focus-bubbles?minimal","previewUrl":"/preview/focus-bubbles","code":"\"use client\"\nimport { FocusBubbles } from \"@/components/ui/focus-bubbles\"\nexport function Demo() {\n  return <FocusBubbles top3={[\"environment\", \"education\", \"community\"]} />\n}\n"},{"slug":"impact-badge","name":"Impact Badge","category":"Display","description":"FFG-native impact/category badge — renders a category icon in its accent colour, or a plain pill.","docsUrl":"/components/impact-badge","minimalDocsUrl":"/components/impact-badge?minimal","previewUrl":"/preview/impact-badge","code":"import { ImpactBadge } from \"@/components/ui/impact-badge\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2.5\">\n      <ImpactBadge>Environment</ImpactBadge>\n      <ImpactBadge>Community</ImpactBadge>\n      <ImpactBadge>Boise, ID</ImpactBadge>\n      <ImpactBadge solid>Featured</ImpactBadge>\n    </div>\n  );\n}\n"},{"slug":"item","name":"Item","category":"Display","description":"A versatile component for displaying content with media, title, description, and actions.","docsUrl":"/components/item","minimalDocsUrl":"/components/item?minimal","previewUrl":"/preview/item","code":"import { ChevronRightIcon } from \"lucide-react\";\nimport { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from \"@/components/ui/item\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nexport function Demo() {\n  return (\n    <Item className=\"w-80\">\n      <ItemMedia><Avatar><AvatarImage src=\"https://github.com/shadcn.png\" alt=\"\" /><AvatarFallback>CN</AvatarFallback></Avatar></ItemMedia>\n      <ItemContent>\n        <ItemTitle>shadcn</ItemTitle>\n        <ItemDescription>Created the registry.</ItemDescription>\n      </ItemContent>\n      <ItemActions><ChevronRightIcon /></ItemActions>\n    </Item>\n  );\n}\n"},{"slug":"kbd","name":"Kbd","category":"Display","description":"Used to display textual user input from keyboard.","docsUrl":"/components/kbd","minimalDocsUrl":"/components/kbd?minimal","previewUrl":"/preview/kbd","code":"import { Kbd, KbdGroup } from \"@/components/ui/kbd\";\n\nexport function Demo() {\n  return (\n    <KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>\n  );\n}\n"},{"slug":"logo-placeholder","name":"Logo Placeholder","category":"Display","description":"FFG-native deterministic monogram for organization directory and detail views.","docsUrl":"/components/logo-placeholder","minimalDocsUrl":"/components/logo-placeholder?minimal","previewUrl":"/preview/logo-placeholder","code":"import { LogoPlaceholder } from \"@/components/ui/logo-placeholder\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex items-center gap-4\">\n      <LogoPlaceholder name=\"Hope Collective\" size={50} />\n      <LogoPlaceholder name=\"River Alliance\" size={50} />\n    </div>\n  );\n}\n"},{"slug":"org-accordion","name":"Org Accordion","category":"Display","description":"FFG-native click-toggle disclosure — a header button reveals an animated body, with a default-open variant.","docsUrl":"/components/org-accordion","minimalDocsUrl":"/components/org-accordion?minimal","previewUrl":"/preview/org-accordion","code":"import { OrgAccordion } from \"@/components/ui/org-accordion\";\n\nexport function Demo() {\n  return (\n    <div className=\"grid w-full max-w-[560px] gap-3\">\n      <OrgAccordion title=\"How funds are used\" defaultOpen>\n        <p className=\"m-0\">Every dollar is tracked to a verified outcome.</p>\n      </OrgAccordion>\n      <OrgAccordion title=\"Methodology\" variant=\"muted\" />\n    </div>\n  );\n}\n"},{"slug":"org-accordion-item","name":"Org Accordion Item","category":"Display","description":"FFG-native boxed assessment accordion — a bordered card with an icon and title that expands to reveal its body.","docsUrl":"/components/org-accordion-item","minimalDocsUrl":"/components/org-accordion-item?minimal","previewUrl":"/preview/org-accordion-item","code":"import { OrgAccordionItem } from \"@/components/ui/org-accordion-item\";\nimport { Icon } from \"@/components/ffg/icon\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex w-full max-w-[560px] flex-col gap-2.5\">\n      <OrgAccordionItem icon={<Icon.Check />} title=\"Problem Quality\" defaultOpen>\n        <p className=\"m-0 text-base\">\n          Addresses a clearly defined, high-impact problem with strong evidence of need.\n        </p>\n      </OrgAccordionItem>\n      <OrgAccordionItem icon={<Icon.User />} title=\"Team & Leadership\">\n        <p className=\"m-0 text-base\">\n          Deep domain expertise, lived experience, and a track record of sound decision-making.\n        </p>\n      </OrgAccordionItem>\n    </div>\n  );\n}\n"},{"slug":"org-row","name":"Org Row","category":"Display","description":"Clickable organisation list row with logo placeholder, stats grid, impact-area badges, and an add-to-portfolio toggle. Router-decoupled via onNavigate prop.","docsUrl":"/components/org-row","minimalDocsUrl":"/components/org-row?minimal","previewUrl":"/preview/org-row","code":"\"use client\"\nimport { OrgRow } from \"@/components/ui/org-row\"\nconst org = {\n  name: \"Jesse Tree\", loc: \"Boise, Idaho\",\n  confidence: 94, strategy: \"Direct service\",\n  donated: 18500, lives: 320, livesImpacted: 1200,\n  tags: [\"Community\", \"Education\"],\n}\nexport function Demo() {\n  return <OrgRow org={org} onNavigate={() => alert(\"navigate\")} />\n}\n"},{"slug":"organization-card","name":"Organization Card","category":"Display","description":"FFG-native directory card — identity, description, impact tags, and a confidence-level footer, one per vetting-pipeline status.","docsUrl":"/components/organization-card","minimalDocsUrl":"/components/organization-card?minimal","previewUrl":"/preview/organization-card","code":"import { OrganizationCard } from \"@/components/ui/organization-card\";\n\nexport function Demo() {\n  return (\n    <div className=\"w-[280px]\">\n      <OrganizationCard\n        organization={{\n          name: \"Jesse Tree\",\n          location: \"Boise, Idaho\",\n          desc: \"Prevents eviction and homelessness with emergency rental and mortgage assistance for families on the edge of crisis.\",\n          tags: [\"Community\", \"Education\"],\n          status: \"Verified\",\n          tier: 5,\n        }}\n        onOpen={() => {}}\n      />\n    </div>\n  );\n}\n"},{"slug":"review-status-badge","name":"Review Status Badge","category":"Display","description":"FFG-native vetting-pipeline pill — Verified, Screening, or Ongoing Review.","docsUrl":"/components/review-status-badge","minimalDocsUrl":"/components/review-status-badge?minimal","previewUrl":"/preview/review-status-badge","code":"import { ReviewStatusBadge } from \"@/components/ui/review-status-badge\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2.5\">\n      <ReviewStatusBadge status=\"Verified\" />\n      <ReviewStatusBadge status=\"Screening\" />\n      <ReviewStatusBadge status=\"Ongoing Review\" />\n    </div>\n  );\n}\n"},{"slug":"timeline-step","name":"Timeline Step","category":"Display","description":"FFG-native intervention timeline card with a number, tag, time, and copy.","docsUrl":"/components/timeline-step","minimalDocsUrl":"/components/timeline-step?minimal","previewUrl":"/preview/timeline-step","code":"import { TimelineStep } from \"@/components/ui/timeline-step\";\n\nexport function Demo() {\n  return (\n    <TimelineStep n={1} tag=\"Identification\" time=\"Month 1\">\n      A short description of this step.\n    </TimelineStep>\n  );\n}\n"},{"slug":"update-card","name":"Update Card","category":"Display","description":"FFG-native update card — an image (or striped placeholder) with an organization overlay, title, copy and an impact-category tag.","docsUrl":"/components/update-card","minimalDocsUrl":"/components/update-card?minimal","previewUrl":"/preview/update-card","code":"import { UpdateCard } from \"@/components/ui/update-card\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex flex-wrap items-start gap-5\">\n      <div style={{ width: 280 }}>\n        <UpdateCard\n          title=\"Clean water reaches three new villages\"\n          copy=\"A new well network now serves over 4,000 residents who previously walked miles for water each day.\"\n          organization=\"Water Forward\"\n          tag=\"Environment\"\n          img=\"https://images.unsplash.com/photo-1538300342682-cf57afb97285?w=480&q=70&auto=format&fit=crop\"\n          alt=\"\"\n        />\n      </div>\n      <div style={{ width: 280 }}>\n        <UpdateCard\n          title=\"120 families kept in their homes\"\n          copy=\"Emergency rental assistance reached a record number of households facing eviction this quarter.\"\n          organization=\"Jesse Tree\"\n          tag=\"Community\"\n        />\n      </div>\n    </div>\n  );\n}\n"},{"slug":"welcome","name":"Welcome","category":"Display","description":"FFG-native dashboard hero greeting — a large serif headline plus a state-driven subtitle with accent links.","docsUrl":"/components/welcome","minimalDocsUrl":"/components/welcome?minimal","previewUrl":"/preview/welcome","code":"import { Welcome } from \"@/components/ui/welcome\";\n\nexport function Demo() {\n  return (\n    <div className=\"grid gap-6\">\n      <Welcome name=\"Alex\" livesCount={1284} state=\"new good\" />\n      <Welcome state=\"generic\" />\n      <Welcome name={null} state=\"initial\" />\n      <Welcome name=\"   \" state=\"none\" />\n    </div>\n  );\n}\n"},{"slug":"alert","name":"Alert","category":"Feedback","description":"Displays a callout for user attention.","docsUrl":"/components/alert","minimalDocsUrl":"/components/alert?minimal","previewUrl":"/preview/alert","code":"import { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\n\nexport function Demo() {\n  return (\n    <Alert className=\"max-w-sm\">\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>You can add components and dependencies to your app using the CLI.</AlertDescription>\n    </Alert>\n  );\n}\n"},{"slug":"dynamic-action","name":"Dynamic Action","category":"Feedback","description":"FFG-native allocation carousel — step through annual-giving amounts or type a custom value, with a confirm action that fires a toast.","docsUrl":"/components/dynamic-action","minimalDocsUrl":"/components/dynamic-action?minimal","previewUrl":"/preview/dynamic-action","code":"import { DynamicAction } from \"@/components/ui/dynamic-action\";\n\nexport function Demo() {\n  return (\n    <div className=\"max-w-sm\">\n      <DynamicAction\n        enabled\n        onAmountConfirm={(amount) => console.log(\"confirmed\", amount)}\n      />\n    </div>\n  );\n}\n"},{"slug":"progress","name":"Progress","category":"Feedback","description":"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.","docsUrl":"/components/progress","minimalDocsUrl":"/components/progress?minimal","previewUrl":"/preview/progress","code":"import { Progress } from \"@/components/ui/progress\";\n\nexport function Demo() {\n  return (\n    <Progress value={62} className=\"w-64\" />\n  );\n}\n"},{"slug":"progress-bar","name":"Progress Bar","category":"Feedback","description":"FFG-native six-segment onboarding progress indicator.","docsUrl":"/components/progress-bar","minimalDocsUrl":"/components/progress-bar?minimal","previewUrl":"/preview/progress-bar","code":"import { ProgressBar } from \"@/components/ui/progress-bar\";\n\nexport function Demo() {\n  return <ProgressBar step={4} />;\n}\n"},{"slug":"skeleton","name":"Skeleton","category":"Feedback","description":"Use to show a placeholder while content is loading.","docsUrl":"/components/skeleton","minimalDocsUrl":"/components/skeleton?minimal","previewUrl":"/preview/skeleton","code":"import { Skeleton } from \"@/components/ui/skeleton\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex items-center gap-3 w-64\">\n      <Skeleton className=\"size-10 rounded-full\" />\n      <div className=\"space-y-2 flex-1\">\n        <Skeleton className=\"h-4 w-3/4\" />\n        <Skeleton className=\"h-4 w-1/2\" />\n      </div>\n    </div>\n  );\n}\n"},{"slug":"sonner","name":"Sonner","category":"Feedback","description":"An opinionated toast component for React.","docsUrl":"/components/sonner","minimalDocsUrl":"/components/sonner?minimal","previewUrl":"/preview/sonner","code":"\"use client\";\nimport { toast } from \"sonner\";\nimport { Button } from \"@/components/ui/button\";\nimport { Toaster } from \"@/components/ui/sonner\";\n\nexport function Demo() {\n  return (\n    <>\n      <Button variant=\"outline\" onClick={() => toast(\"Event has been created\", { description: \"Sunday, December 03, 2023 at 9:00 AM\" })}>Show toast</Button>\n      <Toaster />\n    </>\n  );\n}\n"},{"slug":"spinner","name":"Spinner","category":"Feedback","description":"An indicator that can be used to show a loading state.","docsUrl":"/components/spinner","minimalDocsUrl":"/components/spinner?minimal","previewUrl":"/preview/spinner","code":"import { Spinner } from \"@/components/ui/spinner\";\n\nexport function Demo() {\n  return (\n    <Spinner />\n  );\n}\n"},{"slug":"status-pill","name":"Status Pill","category":"Feedback","description":"FFG-native state indicator — a rounded pill with six semantic states reused across the dashboard.","docsUrl":"/components/status-pill","minimalDocsUrl":"/components/status-pill?minimal","previewUrl":"/preview/status-pill","code":"import { StatusPill } from \"@/components/ui/status-pill\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex flex-wrap items-center gap-2.5\">\n      <StatusPill variant=\"idle\" label=\"Idle\" />\n      <StatusPill variant=\"active\" label=\"Active\" />\n      <StatusPill variant=\"resolved\" label=\"Resolved\" />\n      <StatusPill variant=\"failed\" label=\"Failed\" />\n      <StatusPill variant=\"cancelled\" label=\"Cancelled\" />\n      <StatusPill variant=\"reversed\" label=\"Reversed\" />\n    </div>\n  );\n}\n"},{"slug":"toast","name":"Toast","category":"Feedback","description":"A succinct message that is displayed temporarily.","docsUrl":"/components/toast","minimalDocsUrl":"/components/toast?minimal","previewUrl":"/preview/toast","code":"\"use client\";\nimport { toast } from \"sonner\";\nimport { Button } from \"@/components/ui/button\";\nimport { Toaster } from \"@/components/ui/sonner\";\n\nexport function Demo() {\n  return (\n    <>\n      <Button variant=\"outline\" onClick={() => toast.success(\"Saved\", { description: \"Your changes were saved.\" })}>Show toast</Button>\n      <Toaster />\n    </>\n  );\n}\n"},{"slug":"updates-area","name":"Updates Area","category":"Feedback","description":"FFG-native single-update notification region — one dismissible update below the hero, in four types.","docsUrl":"/components/updates-area","minimalDocsUrl":"/components/updates-area?minimal","previewUrl":"/preview/updates-area","code":"import { UpdatesArea } from \"@/components/ui/updates-area\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex w-full flex-col gap-6\">\n      <UpdatesArea\n        update={{\n          type: \"status\",\n          title: \"Your transfer is on its way\",\n          steps: [\n            { label: \"Initiated\", date: \"Jun 18\", progress: 100, state: \"done\" },\n            { label: \"In review\", date: \"Jun 19\", progress: 100, state: \"done\" },\n            { label: \"Processing\", note: \"Now\", progress: 60, state: \"active\" },\n            { label: \"Allocated\", state: \"pending\" },\n          ],\n        }}\n      />\n      <UpdatesArea\n        update={{\n          type: \"action\",\n          title: \"Action needed\",\n          copy: \"Confirm your beneficiary details to release the pending allocation.\",\n          action: { label: \"Confirm details\" },\n        }}\n      />\n      <UpdatesArea\n        update={{\n          type: \"advisory\",\n          title: \"Scheduled maintenance\",\n          copy: \"Transfers may be delayed between 1:00 and 2:00 AM ET on Sunday.\",\n        }}\n      />\n      <UpdatesArea\n        update={{\n          type: \"general\",\n          title: \"New statement available\",\n          copy: \"Your May statement is ready to download from the documents area.\",\n        }}\n      />\n    </div>\n  );\n}\n"},{"slug":"button","name":"Button","category":"Forms","description":"Displays a button or a component that looks like a button.","docsUrl":"/components/button","minimalDocsUrl":"/components/button?minimal","previewUrl":"/preview/button","code":"import { Button } from \"@/components/ui/button\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex flex-wrap gap-2\">\n      <Button>Default</Button>\n      <Button variant=\"secondary\">Secondary</Button>\n      <Button variant=\"outline\">Outline</Button>\n      <Button variant=\"ghost\">Ghost</Button>\n      <Button variant=\"destructive\">Destructive</Button>\n      <Button variant=\"link\">Link</Button>\n    </div>\n  );\n}\n"},{"slug":"button-group","name":"Button Group","category":"Forms","description":"A container that groups related buttons together with consistent styling.","docsUrl":"/components/button-group","minimalDocsUrl":"/components/button-group?minimal","previewUrl":"/preview/button-group","code":"import { Button } from \"@/components/ui/button\";\nimport { ButtonGroup } from \"@/components/ui/button-group\";\n\nexport function Demo() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Left</Button>\n      <Button variant=\"outline\">Middle</Button>\n      <Button variant=\"outline\">Right</Button>\n    </ButtonGroup>\n  );\n}\n"},{"slug":"checkbox","name":"Checkbox","category":"Forms","description":"A control that allows the user to toggle between checked and not checked.","docsUrl":"/components/checkbox","minimalDocsUrl":"/components/checkbox?minimal","previewUrl":"/preview/checkbox","code":"import { Checkbox } from \"@/components/ui/checkbox\";\nimport { Label } from \"@/components/ui/label\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox id=\"terms\" />\n      <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n    </div>\n  );\n}\n"},{"slug":"combobox","name":"Combobox","category":"Forms","description":"Autocomplete input with a list of suggestions.","docsUrl":"/components/combobox","minimalDocsUrl":"/components/combobox?minimal","previewUrl":"/preview/combobox","code":"\"use client\";\nimport { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger } from \"@/components/ui/combobox\";\n\nexport function Demo() {\n  return (\n    <Combobox>\n      <ComboboxTrigger placeholder=\"Select a fruit…\" className=\"w-56\" />\n      <ComboboxContent>\n        <ComboboxInput placeholder=\"Search…\" />\n        <ComboboxList>\n          <ComboboxEmpty>No fruit found.</ComboboxEmpty>\n          <ComboboxGroup>\n            <ComboboxItem value=\"apple\">Apple</ComboboxItem>\n            <ComboboxItem value=\"banana\">Banana</ComboboxItem>\n            <ComboboxItem value=\"cherry\">Cherry</ComboboxItem>\n          </ComboboxGroup>\n        </ComboboxList>\n      </ComboboxContent>\n    </Combobox>\n  );\n}\n"},{"slug":"field","name":"Field","category":"Forms","description":"Combine labels, controls, and help text to compose accessible form fields and grouped inputs.","docsUrl":"/components/field","minimalDocsUrl":"/components/field?minimal","previewUrl":"/preview/field","code":"import { Field, FieldDescription, FieldLabel } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\n\nexport function Demo() {\n  return (\n    <Field className=\"w-72\">\n      <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n      <Input id=\"email\" type=\"email\" placeholder=\"you@example.com\" />\n      <FieldDescription>We'll never share your email.</FieldDescription>\n    </Field>\n  );\n}\n"},{"slug":"filter-chip","name":"Filter Chip","category":"Forms","description":"FFG-native filter control — a controlled native select styled as a compact chip with a trailing caret.","docsUrl":"/components/filter-chip","minimalDocsUrl":"/components/filter-chip?minimal","previewUrl":"/preview/filter-chip","code":"import { useState } from \"react\";\nimport { FilterChip } from \"@/components/ui/filter-chip\";\n\nexport function Demo() {\n  const [value, setValue] = useState(\"all\");\n  return (\n    <FilterChip\n      value={value}\n      onChange={setValue}\n      ariaLabel=\"Filter\"\n      options={[\n        { value: \"all\", label: \"All orgs\" },\n        { value: \"mine\", label: \"My picks\" },\n        { value: \"circle\", label: \"My circle\" },\n      ]}\n    />\n  );\n}\n"},{"slug":"input","name":"Input","category":"Forms","description":"A text input component for forms and user data entry with built-in styling and accessibility features.","docsUrl":"/components/input","minimalDocsUrl":"/components/input?minimal","previewUrl":"/preview/input","code":"import { Input } from \"@/components/ui/input\";\n\nexport function Demo() {\n  return (\n    <Input className=\"w-64\" type=\"email\" placeholder=\"Email\" />\n  );\n}\n"},{"slug":"input-group","name":"Input Group","category":"Forms","description":"Add addons, buttons, and helper content to inputs.","docsUrl":"/components/input-group","minimalDocsUrl":"/components/input-group?minimal","previewUrl":"/preview/input-group","code":"import { SearchIcon } from \"lucide-react\";\nimport { Input } from \"@/components/ui/input\";\nimport { InputGroup, InputGroupAddon, InputGroupInput } from \"@/components/ui/input-group\";\n\nexport function Demo() {\n  return (\n    <InputGroup className=\"w-64\">\n      <InputGroupAddon><SearchIcon /></InputGroupAddon>\n      <InputGroupInput placeholder=\"Search…\" />\n    </InputGroup>\n  );\n}\n"},{"slug":"input-otp","name":"Input OTP","category":"Forms","description":"Accessible one-time password component with copy-paste functionality.","docsUrl":"/components/input-otp","minimalDocsUrl":"/components/input-otp?minimal","previewUrl":"/preview/input-otp","code":"\"use client\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"@/components/ui/input-otp\";\n\nexport function Demo() {\n  return (\n    <InputOTP maxLength={6}>\n      <InputOTPGroup>\n        <InputOTPSlot index={0} />\n        <InputOTPSlot index={1} />\n        <InputOTPSlot index={2} />\n        <InputOTPSlot index={3} />\n        <InputOTPSlot index={4} />\n        <InputOTPSlot index={5} />\n      </InputOTPGroup>\n    </InputOTP>\n  );\n}\n"},{"slug":"label","name":"Label","category":"Forms","description":"Renders an accessible label associated with controls.","docsUrl":"/components/label","minimalDocsUrl":"/components/label?minimal","previewUrl":"/preview/label","code":"import { Checkbox } from \"@/components/ui/checkbox\";\nimport { Label } from \"@/components/ui/label\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Checkbox id=\"newsletter\" />\n      <Label htmlFor=\"newsletter\">Subscribe to the newsletter</Label>\n    </div>\n  );\n}\n"},{"slug":"native-select","name":"Native Select","category":"Forms","description":"A styled native HTML select element with consistent design system integration.","docsUrl":"/components/native-select","minimalDocsUrl":"/components/native-select?minimal","previewUrl":"/preview/native-select","code":"import { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\";\n\nexport function Demo() {\n  return (\n    <NativeSelect className=\"w-56\">\n      <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n      <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n      <NativeSelectOption value=\"cherry\">Cherry</NativeSelectOption>\n    </NativeSelect>\n  );\n}\n"},{"slug":"overview-selector","name":"Overview Selector","category":"Forms","description":"FFG-native scope selector — a radio group with an embedded multi-select giving-circle dropdown.","docsUrl":"/components/overview-selector","minimalDocsUrl":"/components/overview-selector?minimal","previewUrl":"/preview/overview-selector","code":"import { useState } from \"react\";\nimport { OverviewSelector } from \"@/components/ui/overview-selector\";\n\nconst GIVING_CIRCLES = [\n  { id: \"san-diego\", name: \"San Diego Giving Group\" },\n  { id: \"r360-miami\", name: \"R360 Miami\" },\n];\n\nexport function Demo() {\n  const [scope, setScope] = useState(\"you\");\n  const [selectedCircles, setSelectedCircles] = useState([]);\n  return (\n    <OverviewSelector\n      scope={scope}\n      selectedCircles={selectedCircles}\n      onScopeChange={setScope}\n      onCirclesChange={setSelectedCircles}\n      circles={GIVING_CIRCLES}\n    />\n  );\n}\n"},{"slug":"radio-group","name":"Radio Group","category":"Forms","description":"A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.","docsUrl":"/components/radio-group","minimalDocsUrl":"/components/radio-group?minimal","previewUrl":"/preview/radio-group","code":"import { Label } from \"@/components/ui/label\";\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\";\n\nexport function Demo() {\n  return (\n    <RadioGroup defaultValue=\"comfortable\" className=\"space-y-2\">\n      <div className=\"flex items-center gap-2\"><RadioGroupItem value=\"default\" id=\"r1\" /><Label htmlFor=\"r1\">Default</Label></div>\n      <div className=\"flex items-center gap-2\"><RadioGroupItem value=\"comfortable\" id=\"r2\" /><Label htmlFor=\"r2\">Comfortable</Label></div>\n      <div className=\"flex items-center gap-2\"><RadioGroupItem value=\"compact\" id=\"r3\" /><Label htmlFor=\"r3\">Compact</Label></div>\n    </RadioGroup>\n  );\n}\n"},{"slug":"select","name":"Select","category":"Forms","description":"Displays a list of options for the user to pick from—triggered by a button.","docsUrl":"/components/select","minimalDocsUrl":"/components/select?minimal","previewUrl":"/preview/select","code":"import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\n\nexport function Demo() {\n  return (\n    <Select>\n      <SelectTrigger className=\"w-56\"><SelectValue placeholder=\"Select a fruit\" /></SelectTrigger>\n      <SelectContent>\n        <SelectItem value=\"apple\">Apple</SelectItem>\n        <SelectItem value=\"banana\">Banana</SelectItem>\n        <SelectItem value=\"cherry\">Cherry</SelectItem>\n      </SelectContent>\n    </Select>\n  );\n}\n"},{"slug":"slider","name":"Slider","category":"Forms","description":"An input where the user selects a value from within a given range.","docsUrl":"/components/slider","minimalDocsUrl":"/components/slider?minimal","previewUrl":"/preview/slider","code":"import { Slider } from \"@/components/ui/slider\";\n\nexport function Demo() {\n  return (\n    <Slider defaultValue={[50]} max={100} step={1} className=\"w-64\" />\n  );\n}\n"},{"slug":"sort-dropdown","name":"Sort Dropdown","category":"Forms","description":"FFG-native controlled sort control — a chip-styled native select with leading sort glyph and trailing caret.","docsUrl":"/components/sort-dropdown","minimalDocsUrl":"/components/sort-dropdown?minimal","previewUrl":"/preview/sort-dropdown","code":"import { useState } from \"react\";\nimport { SortDropdown } from \"@/components/ui/sort-dropdown\";\n\nconst SORT_OPTIONS = [\n  { id: \"recommended\", label: \"Recommended\" },\n  { id: \"az\", label: \"A–Z\" },\n  { id: \"tier\", label: \"By tier\" },\n];\n\nexport function Demo() {\n  const [value, setValue] = useState(\"recommended\");\n  return (\n    <SortDropdown value={value} onChange={setValue} options={SORT_OPTIONS} />\n  );\n}\n"},{"slug":"switch","name":"Switch","category":"Forms","description":"A control that allows the user to toggle between checked and not checked.","docsUrl":"/components/switch","minimalDocsUrl":"/components/switch?minimal","previewUrl":"/preview/switch","code":"import { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\n\nexport function Demo() {\n  return (\n    <div className=\"flex items-center gap-2\">\n      <Switch id=\"airplane\" />\n      <Label htmlFor=\"airplane\">Airplane mode</Label>\n    </div>\n  );\n}\n"},{"slug":"textarea","name":"Textarea","category":"Forms","description":"Displays a form textarea or a component that looks like a textarea.","docsUrl":"/components/textarea","minimalDocsUrl":"/components/textarea?minimal","previewUrl":"/preview/textarea","code":"import { Textarea } from \"@/components/ui/textarea\";\n\nexport function Demo() {\n  return (\n    <Textarea className=\"w-64\" placeholder=\"Type your message…\" />\n  );\n}\n"},{"slug":"toggle","name":"Toggle","category":"Forms","description":"A two-state button that can be either on or off.","docsUrl":"/components/toggle","minimalDocsUrl":"/components/toggle?minimal","previewUrl":"/preview/toggle","code":"import { BoldIcon } from \"lucide-react\";\nimport { Toggle } from \"@/components/ui/toggle\";\n\nexport function Demo() {\n  return (\n    <Toggle aria-label=\"Toggle bold\"><BoldIcon /></Toggle>\n  );\n}\n"},{"slug":"toggle-group","name":"Toggle Group","category":"Forms","description":"A set of two-state buttons that can be toggled on or off.","docsUrl":"/components/toggle-group","minimalDocsUrl":"/components/toggle-group?minimal","previewUrl":"/preview/toggle-group","code":"import { BoldIcon, ItalicIcon, UnderlineIcon } from \"lucide-react\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\n\nexport function Demo() {\n  return (\n    <ToggleGroup type=\"multiple\">\n      <ToggleGroupItem value=\"bold\" aria-label=\"Bold\"><BoldIcon /></ToggleGroupItem>\n      <ToggleGroupItem value=\"italic\" aria-label=\"Italic\"><ItalicIcon /></ToggleGroupItem>\n      <ToggleGroupItem value=\"underline\" aria-label=\"Underline\"><UnderlineIcon /></ToggleGroupItem>\n    </ToggleGroup>\n  );\n}\n"},{"slug":"accordion","name":"Accordion","category":"Layout","description":"A vertically stacked set of interactive headings that each reveal a section of content.","docsUrl":"/components/accordion","minimalDocsUrl":"/components/accordion?minimal","previewUrl":"/preview/accordion","code":"import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from \"@/components/ui/accordion\";\n\nexport function Demo() {\n  return (\n    <Accordion type=\"single\" collapsible className=\"w-full max-w-sm\">\n      <AccordionItem value=\"item-1\">\n        <AccordionTrigger>Is it accessible?</AccordionTrigger>\n        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>\n      </AccordionItem>\n      <AccordionItem value=\"item-2\">\n        <AccordionTrigger>Is it styled?</AccordionTrigger>\n        <AccordionContent>Yes. Matches the rest of the system.</AccordionContent>\n      </AccordionItem>\n    </Accordion>\n  );\n}\n"},{"slug":"collapsible","name":"Collapsible","category":"Layout","description":"An interactive component which expands/collapses a panel.","docsUrl":"/components/collapsible","minimalDocsUrl":"/components/collapsible?minimal","previewUrl":"/preview/collapsible","code":"\"use client\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/components/ui/collapsible\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function Demo() {\n  return (\n    <Collapsible className=\"w-64 space-y-2\">\n      <CollapsibleTrigger render={<Button variant=\"outline\" className=\"w-full\">Toggle details</Button>} />\n      <CollapsibleContent className=\"rounded-md border p-3 text-sm text-muted-foreground\">Hidden by default — revealed on click.</CollapsibleContent>\n    </Collapsible>\n  );\n}\n"},{"slug":"direction","name":"Direction","category":"Layout","description":"A provider component that sets the text direction for your application.","docsUrl":"/components/direction","minimalDocsUrl":"/components/direction?minimal","previewUrl":"/preview/direction","code":"\"use client\";\nimport * as React from \"react\";\nimport { DirectionProvider } from \"@/components/ui/direction\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function Demo() {\n  return (\n    <DirectionProvider direction=\"rtl\">\n      <div className=\"rounded-md border p-3 text-sm\">\n        <p className=\"mb-2 text-muted-foreground\">Children inherit RTL direction.</p>\n        <Button>‫כפתור‬</Button>\n      </div>\n    </DirectionProvider>\n  );\n}\n"},{"slug":"footer","name":"Footer","category":"Layout","description":"FFG-native app footer with the inlined monogram wordmark and a version label.","docsUrl":"/components/footer","minimalDocsUrl":"/components/footer?minimal","previewUrl":"/preview/footer","code":"import { Footer } from \"@/components/ui/footer\";\n\nexport function Demo() {\n  return <Footer />;\n}\n"},{"slug":"resizable","name":"Resizable","category":"Layout","description":"Accessible resizable panel groups and layouts with keyboard support.","docsUrl":"/components/resizable","minimalDocsUrl":"/components/resizable?minimal","previewUrl":"/preview/resizable","code":"\"use client\";\nimport { ResizableHandle, ResizablePanel, ResizablePanelGroup } from \"@/components/ui/resizable\";\n\nexport function Demo() {\n  return (\n    <ResizablePanelGroup direction=\"horizontal\" className=\"h-32 w-80 rounded-md border\">\n      <ResizablePanel defaultSize={40} className=\"flex items-center justify-center text-sm\">One</ResizablePanel>\n      <ResizableHandle />\n      <ResizablePanel defaultSize={60} className=\"flex items-center justify-center text-sm\">Two</ResizablePanel>\n    </ResizablePanelGroup>\n  );\n}\n"},{"slug":"ridge-divider","name":"Ridge Divider","category":"Layout","description":"FFG-native decorative ridge band used as a full-width section divider.","docsUrl":"/components/ridge-divider","minimalDocsUrl":"/components/ridge-divider?minimal","previewUrl":"/preview/ridge-divider","code":"import { RidgeDivider } from \"@/components/ui/ridge-divider\";\n\nexport function Demo() {\n  return <RidgeDivider />;\n}\n"},{"slug":"scroll-area","name":"Scroll Area","category":"Layout","description":"Augments native scroll functionality for custom, cross-browser styling.","docsUrl":"/components/scroll-area","minimalDocsUrl":"/components/scroll-area?minimal","previewUrl":"/preview/scroll-area","code":"import { ScrollArea } from \"@/components/ui/scroll-area\";\n\nexport function Demo() {\n  return (\n    <ScrollArea className=\"h-32 w-56 rounded-md border p-3 text-sm\">\n      {Array.from({ length: 24 }).map((_, i) => (<div key={i} className=\"py-1\">Item {i + 1}</div>))}\n    </ScrollArea>\n  );\n}\n"},{"slug":"section","name":"Section","category":"Layout","description":"FFG-native titled content block with an optional aside and body copy.","docsUrl":"/components/section","minimalDocsUrl":"/components/section?minimal","previewUrl":"/preview/section","code":"import { Section } from \"@/components/ui/section\";\n\nexport function Demo() {\n  return (\n    <Section title=\"Impact overview\" body=\"A short introduction.\" fullWidth>\n      <div>Section content</div>\n    </Section>\n  );\n}\n"},{"slug":"separator","name":"Separator","category":"Layout","description":"Visually or semantically separates content.","docsUrl":"/components/separator","minimalDocsUrl":"/components/separator?minimal","previewUrl":"/preview/separator","code":"import { Separator } from \"@/components/ui/separator\";\n\nexport function Demo() {\n  return (\n    <div className=\"w-64 text-sm\">\n      <div>Above</div>\n      <Separator className=\"my-2\" />\n      <div>Below</div>\n    </div>\n  );\n}\n"},{"slug":"updates-section","name":"Updates Section","category":"Layout","description":"FFG-native section pairing a heading and \"See more\" link with a responsive grid of UpdateCards.","docsUrl":"/components/updates-section","minimalDocsUrl":"/components/updates-section?minimal","previewUrl":"/preview/updates-section","code":"import { UpdatesSection } from \"@/components/ui/updates-section\";\n\nconst UPDATES = [\n  {\n    title: \"Clean water reaches three new villages\",\n    body: \"A new well network now serves over 4,000 residents who previously walked miles for water each day.\",\n    organization: \"Water Forward\",\n    tag: \"Environment\",\n    img: \"https://images.unsplash.com/photo-1538300342682-cf57afb97285?w=480&q=70&auto=format&fit=crop\",\n    alt: \"\",\n  },\n  {\n    title: \"120 families kept in their homes\",\n    body: \"Emergency rental assistance reached a record number of households facing eviction this quarter.\",\n    organization: \"Jesse Tree\",\n    tag: \"Community\",\n  },\n  {\n    title: \"Scholarships awarded to 60 first-gen students\",\n    body: \"This year's cohort spans 14 schools, with mentoring support continuing through graduation.\",\n    organization: \"Future Forward\",\n    tag: \"Education\",\n  },\n];\n\nexport function Demo() {\n  return <UpdatesSection items={UPDATES} />;\n}\n"},{"slug":"breadcrumb","name":"Breadcrumb","category":"Navigation","description":"Displays the path to the current resource using a hierarchy of links.","docsUrl":"/components/breadcrumb","minimalDocsUrl":"/components/breadcrumb?minimal","previewUrl":"/preview/breadcrumb","code":"import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from \"@/components/ui/breadcrumb\";\n\nexport function Demo() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem><BreadcrumbLink href=\"#\">Home</BreadcrumbLink></BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem><BreadcrumbLink href=\"#\">Components</BreadcrumbLink></BreadcrumbItem>\n        <BreadcrumbSeparator />\n        <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  );\n}\n"},{"slug":"navigation-menu","name":"Navigation Menu","category":"Navigation","description":"A collection of links for navigating websites.","docsUrl":"/components/navigation-menu","minimalDocsUrl":"/components/navigation-menu?minimal","previewUrl":"/preview/navigation-menu","code":"import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from \"@/components/ui/navigation-menu\";\n\nexport function Demo() {\n  return (\n    <NavigationMenu>\n      <NavigationMenuList>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n          <NavigationMenuContent className=\"p-3 text-sm w-56\">Intro, install, theming.</NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem><NavigationMenuLink href=\"#\">Docs</NavigationMenuLink></NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  );\n}\n"},{"slug":"page-tabs","name":"Page Tabs","category":"Navigation","description":"FFG-native page-level tab bar — an underlined tablist that collapses into a select below the sm breakpoint.","docsUrl":"/components/page-tabs","minimalDocsUrl":"/components/page-tabs?minimal","previewUrl":"/preview/page-tabs","code":"import { useState } from \"react\";\nimport { PageTabs } from \"@/components/ui/page-tabs\";\n\nexport function Demo() {\n  const [active, setActive] = useState(\"overview\");\n  const tabs = [\n    { id: \"overview\", label: \"Overview\" },\n    { id: \"areas\", label: \"Your impact portfolio\" },\n    { id: \"history\", label: \"Transactions\" },\n  ];\n  return <PageTabs tabs={tabs} active={active} onChange={setActive} />;\n}\n"},{"slug":"pagination","name":"Pagination","category":"Navigation","description":"Pagination with page navigation, next and previous links.","docsUrl":"/components/pagination","minimalDocsUrl":"/components/pagination?minimal","previewUrl":"/preview/pagination","code":"import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from \"@/components/ui/pagination\";\n\nexport function Demo() {\n  return (\n    <Pagination>\n      <PaginationContent>\n        <PaginationItem><PaginationPrevious href=\"#\" /></PaginationItem>\n        <PaginationItem><PaginationLink href=\"#\">1</PaginationLink></PaginationItem>\n        <PaginationItem><PaginationLink href=\"#\" isActive>2</PaginationLink></PaginationItem>\n        <PaginationItem><PaginationLink href=\"#\">3</PaginationLink></PaginationItem>\n        <PaginationItem><PaginationEllipsis /></PaginationItem>\n        <PaginationItem><PaginationNext href=\"#\" /></PaginationItem>\n      </PaginationContent>\n    </Pagination>\n  );\n}\n"},{"slug":"sidebar","name":"Sidebar","category":"Navigation","description":"A composable, themeable and customizable sidebar component.","docsUrl":"/components/sidebar","minimalDocsUrl":"/components/sidebar?minimal","previewUrl":"/preview/sidebar","code":"import { HomeIcon, InboxIcon, SettingsIcon } from \"lucide-react\";\nimport { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider } from \"@/components/ui/sidebar\";\n\nexport function Demo() {\n  return (\n    <SidebarProvider className=\"h-64 w-72 rounded-md border overflow-hidden\" style={{ \"--sidebar-width\": \"18rem\" }}>\n      <Sidebar className=\"relative\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Application</SidebarGroupLabel>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem><SidebarMenuButton><HomeIcon /> Home</SidebarMenuButton></SidebarMenuItem>\n                <SidebarMenuItem><SidebarMenuButton><InboxIcon /> Inbox</SidebarMenuButton></SidebarMenuItem>\n                <SidebarMenuItem><SidebarMenuButton><SettingsIcon /> Settings</SidebarMenuButton></SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  );\n}\n"},{"slug":"step-chrome","name":"Step Chrome","category":"Navigation","description":"FFG-native onboarding header chrome — a 6-segment progress bar with back and close controls.","docsUrl":"/components/step-chrome","minimalDocsUrl":"/components/step-chrome?minimal","previewUrl":"/preview/step-chrome","code":"import { StepChrome } from \"@/components/ui/step-chrome\";\n\nexport function Demo() {\n  return (\n    <StepChrome\n      step={3}\n      onBack={() => {}}\n      onClose={() => {}}\n    />\n  );\n}\n"},{"slug":"stepper","name":"Stepper","category":"Navigation","description":"FFG-native progress track — a horizontal stepper with done, active, and pending states and a pulsing active bar.","docsUrl":"/components/stepper","minimalDocsUrl":"/components/stepper?minimal","previewUrl":"/preview/stepper","code":"import { Stepper } from \"@/components/ui/stepper\";\n\nexport function Demo() {\n  return (\n    <div className=\"w-full max-w-xl\">\n      <Stepper\n        steps={[\n          { label: \"Funded\", date: \"Jun 1\", progress: 100, state: \"done\" },\n          { label: \"Released\", date: \"Jun 3\", progress: 100, state: \"done\" },\n          { label: \"Clearing\", note: \"In progress\", progress: 50, state: \"active\" },\n          { label: \"Delivered\", progress: 0, state: \"pending\" },\n        ]}\n      />\n    </div>\n  );\n}\n"},{"slug":"tabs","name":"Tabs","category":"Navigation","description":"A set of layered sections of content—known as tab panels—that are displayed one at a time.","docsUrl":"/components/tabs","minimalDocsUrl":"/components/tabs?minimal","previewUrl":"/preview/tabs","code":"import { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nexport function Demo() {\n  return (\n    <Tabs defaultValue=\"account\" className=\"w-72\">\n      <TabsList>\n        <TabsTrigger value=\"account\">Account</TabsTrigger>\n        <TabsTrigger value=\"password\">Password</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"account\" className=\"text-sm text-muted-foreground p-3\">Account details.</TabsContent>\n      <TabsContent value=\"password\" className=\"text-sm text-muted-foreground p-3\">Change your password.</TabsContent>\n    </Tabs>\n  );\n}\n"},{"slug":"top-nav","name":"Top Nav","category":"Navigation","description":"Authenticated FFG app header with primary nav links, notification bell, and an avatar dropdown. Router-decoupled via onNavigate prop.","docsUrl":"/components/top-nav","minimalDocsUrl":"/components/top-nav?minimal","previewUrl":"/preview/top-nav","code":"\"use client\"\nimport { TopNav } from \"@/components/ui/top-nav\"\nexport function Demo() {\n  return (\n    <TopNav\n      padded={false}\n      links={[{ label: \"Dashboard\", href: \"/\", active: true }]}\n      onNavigate={(href) => console.log(href)}\n    />\n  )\n}\n"},{"slug":"top-nav-unauth","name":"Top Nav Unauth","category":"Navigation","description":"Unauthenticated FFG header with primary nav links and sign-in CTAs instead of the avatar dropdown.","docsUrl":"/components/top-nav-unauth","minimalDocsUrl":"/components/top-nav-unauth?minimal","previewUrl":"/preview/top-nav-unauth","code":"\"use client\"\nimport { TopNavUnauth } from \"@/components/ui/top-nav-unauth\"\nexport function Demo() {\n  return <TopNavUnauth padded={false} onNavigate={(href) => console.log(href)} />\n}\n"},{"slug":"alert-dialog","name":"Alert Dialog","category":"Overlays","description":"A modal dialog that interrupts the user with important content and expects a response.","docsUrl":"/components/alert-dialog","minimalDocsUrl":"/components/alert-dialog?minimal","previewUrl":"/preview/alert-dialog","code":"import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from \"@/components/ui/alert-dialog\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function Demo() {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger render={<Button variant=\"outline\">Delete account</Button>} />\n      <AlertDialogContent>\n        <AlertDialogHeader>\n          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n          <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter>\n          <AlertDialogCancel>Cancel</AlertDialogCancel>\n          <AlertDialogAction>Continue</AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n}\n"},{"slug":"command","name":"Command","category":"Overlays","description":"Command menu for search and quick actions.","docsUrl":"/components/command","minimalDocsUrl":"/components/command?minimal","previewUrl":"/preview/command","code":"import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from \"@/components/ui/command\";\n\nexport function Demo() {\n  return (\n    <Command className=\"w-72 rounded-lg border\">\n      <CommandInput placeholder=\"Type a command…\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem>Calendar</CommandItem>\n          <CommandItem>Search emoji</CommandItem>\n          <CommandItem>Calculator</CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  );\n}\n"},{"slug":"context-menu","name":"Context Menu","category":"Overlays","description":"Displays a menu of actions triggered by a right click.","docsUrl":"/components/context-menu","minimalDocsUrl":"/components/context-menu?minimal","previewUrl":"/preview/context-menu","code":"import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from \"@/components/ui/context-menu\";\n\nexport function Demo() {\n  return (\n    <ContextMenu>\n      <ContextMenuTrigger className=\"flex h-24 w-64 items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground\">Right-click here</ContextMenuTrigger>\n      <ContextMenuContent>\n        <ContextMenuItem>Back</ContextMenuItem>\n        <ContextMenuItem>Forward</ContextMenuItem>\n        <ContextMenuItem>Reload</ContextMenuItem>\n      </ContextMenuContent>\n    </ContextMenu>\n  );\n}\n"},{"slug":"dialog","name":"Dialog","category":"Overlays","description":"A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.","docsUrl":"/components/dialog","minimalDocsUrl":"/components/dialog?minimal","previewUrl":"/preview/dialog","code":"import { Button } from \"@/components/ui/button\";\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from \"@/components/ui/dialog\";\n\nexport function Demo() {\n  return (\n    <Dialog>\n      <DialogTrigger render={<Button variant=\"outline\">Open dialog</Button>} />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>Make changes to your profile here.</DialogDescription>\n        </DialogHeader>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"},{"slug":"drawer","name":"Drawer","category":"Overlays","description":"A drawer component for React.","docsUrl":"/components/drawer","minimalDocsUrl":"/components/drawer?minimal","previewUrl":"/preview/drawer","code":"import { Button } from \"@/components/ui/button\";\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from \"@/components/ui/drawer\";\n\nexport function Demo() {\n  return (\n    <Drawer>\n      <DrawerTrigger render={<Button variant=\"outline\">Open drawer</Button>} />\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Are you absolutely sure?</DrawerTitle>\n          <DrawerDescription>This action cannot be undone.</DrawerDescription>\n        </DrawerHeader>\n      </DrawerContent>\n    </Drawer>\n  );\n}\n"},{"slug":"dropdown-menu","name":"Dropdown Menu","category":"Overlays","description":"Displays a menu to the user — such as a set of actions or functions — triggered by a button.","docsUrl":"/components/dropdown-menu","minimalDocsUrl":"/components/dropdown-menu?minimal","previewUrl":"/preview/dropdown-menu","code":"import { Button } from \"@/components/ui/button\";\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from \"@/components/ui/dropdown-menu\";\n\nexport function Demo() {\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger render={<Button variant=\"outline\">Open menu</Button>} />\n      <DropdownMenuContent>\n        <DropdownMenuLabel>My account</DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuItem>Profile</DropdownMenuItem>\n        <DropdownMenuItem>Billing</DropdownMenuItem>\n        <DropdownMenuItem>Logout</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"},{"slug":"hover-card","name":"Hover Card","category":"Overlays","description":"For sighted users to preview content available behind a link.","docsUrl":"/components/hover-card","minimalDocsUrl":"/components/hover-card?minimal","previewUrl":"/preview/hover-card","code":"import { HoverCard, HoverCardContent, HoverCardTrigger } from \"@/components/ui/hover-card\";\nimport { Button } from \"@/components/ui/button\";\n\nexport function Demo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger render={<Button variant=\"link\">@nextjs</Button>} />\n      <HoverCardContent className=\"w-64\">The React framework — created and maintained by @vercel.</HoverCardContent>\n    </HoverCard>\n  );\n}\n"},{"slug":"menubar","name":"Menubar","category":"Overlays","description":"A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.","docsUrl":"/components/menubar","minimalDocsUrl":"/components/menubar?minimal","previewUrl":"/preview/menubar","code":"import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from \"@/components/ui/menubar\";\n\nexport function Demo() {\n  return (\n    <Menubar>\n      <MenubarMenu>\n        <MenubarTrigger>File</MenubarTrigger>\n        <MenubarContent>\n          <MenubarItem>New tab <MenubarShortcut>⌘T</MenubarShortcut></MenubarItem>\n          <MenubarSeparator />\n          <MenubarItem>Print…</MenubarItem>\n        </MenubarContent>\n      </MenubarMenu>\n      <MenubarMenu><MenubarTrigger>Edit</MenubarTrigger></MenubarMenu>\n    </Menubar>\n  );\n}\n"},{"slug":"popover","name":"Popover","category":"Overlays","description":"Displays rich content in a portal, triggered by a button.","docsUrl":"/components/popover","minimalDocsUrl":"/components/popover?minimal","previewUrl":"/preview/popover","code":"import { Button } from \"@/components/ui/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\n\nexport function Demo() {\n  return (\n    <Popover>\n      <PopoverTrigger render={<Button variant=\"outline\">Open popover</Button>} />\n      <PopoverContent className=\"w-64\">Place rich content inside a popover.</PopoverContent>\n    </Popover>\n  );\n}\n"},{"slug":"sheet","name":"Sheet","category":"Overlays","description":"Extends the Dialog component to display content that complements the main content of the screen.","docsUrl":"/components/sheet","minimalDocsUrl":"/components/sheet?minimal","previewUrl":"/preview/sheet","code":"import { Button } from \"@/components/ui/button\";\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from \"@/components/ui/sheet\";\n\nexport function Demo() {\n  return (\n    <Sheet>\n      <SheetTrigger render={<Button variant=\"outline\">Open sheet</Button>} />\n      <SheetContent>\n        <SheetHeader>\n          <SheetTitle>Settings</SheetTitle>\n          <SheetDescription>Update your preferences here.</SheetDescription>\n        </SheetHeader>\n      </SheetContent>\n    </Sheet>\n  );\n}\n"},{"slug":"tooltip","name":"Tooltip","category":"Overlays","description":"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.","docsUrl":"/components/tooltip","minimalDocsUrl":"/components/tooltip?minimal","previewUrl":"/preview/tooltip","code":"import { Button } from \"@/components/ui/button\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"@/components/ui/tooltip\";\n\nexport function Demo() {\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\">Hover me</Button>} />\n        <TooltipContent>This is a tooltip.</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n}\n"},{"slug":"typography","name":"Typography","category":"Typography","description":"Styles for headings, paragraphs, lists, etc.","docsUrl":"/components/typography","minimalDocsUrl":"/components/typography?minimal","previewUrl":"/preview/typography","code":"export function Demo() {\n  return (\n    <article className=\"prose max-w-prose space-y-3\">\n      <h1 className=\"scroll-m-20 text-4xl font-bold tracking-tight\">Heading 1</h1>\n      <h2 className=\"scroll-m-20 text-2xl font-semibold tracking-tight\">Heading 2</h2>\n      <h3 className=\"scroll-m-20 text-xl font-medium tracking-tight\">Heading 3</h3>\n      <h4 className=\"scroll-m-20 text-base font-medium tracking-tight\">Heading 4</h4>\n      <p className=\"leading-7\">The quick brown fox jumps over the lazy dog.</p>\n      <blockquote className=\"border-l-2 pl-4 italic text-muted-foreground\">A pull quote, set in italics.</blockquote>\n      <ul className=\"ml-6 list-disc\"><li>One</li><li>Two</li><li>Three</li></ul>\n    </article>\n  );\n}\n"}]}