# Footnote: Help Center

> A workspace app's help assistant answers a data-residency question from its docs, status page, trust center and changelog. A community thread it read but didn't cite sits last, with a monogram.

A shadcn/ui block from the [@keyframeui](https://keyframeui.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/keyframeui/footnote-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/footnote-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/footnote-demo/light.png
- Registry item: https://keyframeui.com/r/footnote-demo.json
- Categories: ai, text, hover
- Listed: 2026-11-02, source last changed 2026-11-02

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/footnote-demo.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `https://keyframeui.com/r/footnote.json`

## Notes from the registry

Live preview, examples and props: https://keyframeui.com/components/footnote#footnote-demo

## Files

### `registry/demos/footnote-demo.tsx`

```tsx
"use client";

import { Footnote, type FootnoteClaim, type FootnoteSource } from "@/components/ui/footnote";

const sources: FootnoteSource[] = [
  {
    id: "docs",
    site: "docs.plinth.so",
    title: "Data residency: moving a workspace",
    href: "#data-residency",
    snippet:
      "Owners of Business and Enterprise workspaces can move their data to our Frankfurt region. Start the move from Settings → Data residency and pick a window that suits your team.",
    quote: "move their data to our Frankfurt region",
  },
  {
    id: "status",
    site: "status.plinth.so",
    title: "Scheduled maintenance: region moves",
    href: "#region-moves",
    snippet:
      "While a move runs, the workspace stays readable but can't be edited. Plan for about 20 minutes for every 10 GB of files.",
    quote: "about 20 minutes for every 10 GB of files",
  },
  {
    id: "trust",
    site: "trust.plinth.so",
    title: "Audit log retention",
    href: "#audit-logs",
    snippet:
      "When a workspace changes region, audit events from the last 90 days move with it. Older events stay where they were recorded until they expire.",
    quote: "Older events stay where they were recorded",
  },
  {
    id: "changelog",
    site: "plinth.so/changelog",
    title: "5.2: EU data residency is generally available",
    href: "#changelog-5-2",
    snippet: "After six months in beta, hosting in Frankfurt is open to every Business and Enterprise workspace.",
    quote: "open to every Business and Enterprise workspace",
  },
  {
    id: "community",
    site: "community.plinth.so",
    title: "Moving a 40 GB workspace: how long did yours take?",
    href: "#community-thread",
    snippet: "Ours took a little under an hour on a Sunday morning. Search was back before the move finished.",
  },
];

const answer: FootnoteClaim[] = [
  {
    text: "Yes. Workspaces on the Business and Enterprise plans can move to Frankfurt from Settings → Data residency.",
    cite: "docs",
  },
  {
    text: "The move runs in a window you pick, and the workspace is read-only for about 20 minutes per 10 GB of files.",
    cite: "status",
  },
  {
    text: "Pages, files and search move with it; audit logs older than 90 days stay in the US until they expire.",
    cite: "trust",
  },
  { text: "EU hosting has been generally available since version 5.2.", cite: "changelog" },
];

export function FootnoteDemo() {
  return (
    <Footnote
      question="Can we move our workspace to the EU region?"
      answer={answer}
      sources={sources}
      read={11}
      avatar={<PlinthMark className="size-3.5" />}
      className="max-w-lg"
    />
  );
}

function PlinthMark({ className }: { className?: string }) {
  return (
    <svg viewBox="0 0 16 16" className={className} aria-hidden>
      <path d="M2 12.5h12V14H2zM4 8.5h8V11H4zM6 3h4v4H6z" fill="currentColor" />
    </svg>
  );
}
```