# Margin Note: Weekly Signups

> Sixteen weeks of signups for a design tool, read with notes on launch week, a login outage and the free plan going to three seats.

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

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

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/keyframeui/margin-note-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/margin-note.json`

## Notes from the registry

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

## Files

### `registry/demos/margin-note-demo.tsx`

```tsx
"use client";

import * as React from "react";

import { MarginNote, type MarginNoteNote } from "@/components/ui/margin-note";

const WEEKS = [
  "Jul 7", "Jul 14", "Jul 21", "Jul 28", "Aug 4", "Aug 11", "Aug 18", "Aug 25",
  "Sep 1", "Sep 8", "Sep 15", "Sep 22", "Sep 29", "Oct 6", "Oct 13", "Oct 20",
];
const SIGNUPS = [612, 640, 655, 1720, 1180, 905, 880, 862, 498, 870, 892, 1150, 1205, 1238, 1262, 1290];

const NOTES: MarginNoteNote[] = [
  { at: 3, title: "Launch week", body: "1,720 signups, 2.6× a normal week.", delta: "+163%" },
  { at: 8, title: "Login outage", body: "Sign-in was down for six hours on Tuesday.", delta: "−42%" },
  { at: 11, to: 14, title: "Free plan, three seats", body: "Signups held 38% higher for four weeks.", delta: "+38%" },
];

export function MarginNoteDemo() {
  const [run, setRun] = React.useState(0);
  return (
    <div className="w-full max-w-3xl rounded-2xl bg-white p-5 text-zinc-900 shadow-sm ring-1 ring-zinc-950/[0.08] sm:p-7 dark:bg-zinc-900 dark:text-zinc-100 dark:ring-white/10">
      <div className="mb-5 flex items-start justify-between gap-4">
        <div>
          <p className="text-xs font-medium text-zinc-500 dark:text-zinc-400">Kiln · Weekly signups</p>
          <p className="mt-1 flex items-baseline gap-2">
            <span className="text-2xl font-semibold tracking-tight tabular-nums">15,859</span>
            <span className="text-xs text-zinc-500 dark:text-zinc-400">last 16 weeks</span>
          </p>
        </div>
        <button
          type="button"
          onClick={() => setRun((r) => r + 1)}
          className="inline-flex h-8 items-center gap-1.5 rounded-full px-3 text-xs font-medium text-zinc-600 ring-1 ring-zinc-950/10 transition-colors hover:bg-zinc-50 hover:text-zinc-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-950 dark:text-zinc-300 dark:ring-white/15 dark:hover:bg-white/5 dark:hover:text-white dark:focus-visible:outline-white"
        >
          <svg viewBox="0 0 16 16" className="size-3.5" fill="none" stroke="currentColor" strokeWidth={1.6} aria-hidden>
            <path d="M2.75 8a5.25 5.25 0 1 0 1.6-3.77M2.75 2.75v2.5h2.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          Read again
        </button>
      </div>
      <MarginNote
        key={run}
        label="Kiln weekly signups"
        data={SIGNUPS}
        labels={WEEKS}
        notes={NOTES}
        summary="Signups are up 38% since the free plan went to three seats."
        format={(value) => value.toLocaleString("en-US")}
      />
    </div>
  );
}
```