# Noise Gate: Month-End Close

> The log display. Missing receipts, a duplicate AWS charge and a spreadsheet four people are editing go through the gate and come out as reconciled lines with their amounts, newest on top.

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

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/noise-gate-ledger-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/noise-gate-ledger-demo/light.png
- Registry item: https://keyframeui.com/r/noise-gate-ledger-demo.json
- Categories: section, comparison, counter, marketing
- Listed: 2026-10-27, source last changed 2026-10-27

## Install

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

## Notes from the registry

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

## Files

### `registry/demos/noise-gate-ledger-demo.tsx`

```tsx
import { NoiseGate, type NoiseGateItem } from "@/components/ui/noise-gate";

function Icon({ d }: { d: string }) {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round">
      <path d={d} />
    </svg>
  );
}

const receipt = "M4 2h8v12l-2-1.25L8 14l-2-1.25L4 14V2ZM6 5.5h4M6 8.5h4";
const copy = "M5.5 5.5V3a1 1 0 0 1 1-1H13a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-2.5M3 5.5h6.5a1 1 0 0 1 1 1V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6.5a1 1 0 0 1 1-1Z";
const file = "M9 2H4.5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1V5.5L9 2ZM9 2v3.5h3.5";
const bank = "M2 6h12L8 2.5 2 6ZM3.5 6v5.5M6.5 6v5.5M9.5 6v5.5M12.5 6v5.5M2 13.5h12";

const close: NoiseGateItem[] = [
  {
    tag: "Missing",
    tone: "critical",
    icon: <Icon d={receipt} />,
    title: "No receipt for Uber",
    detail: "$23.40 · Oct 3",
    resolved: "Uber receipt matched",
    resolvedDetail: "$23.40",
  },
  {
    tag: "Duplicate?",
    tone: "warning",
    icon: <Icon d={copy} />,
    title: "AWS charged twice",
    detail: "$1,204.88 · Oct 1",
    resolved: "AWS duplicate refunded",
    resolvedDetail: "$1,204.88",
  },
  {
    tag: "Overdue",
    tone: "critical",
    repeat: 3,
    title: "Invoice #2291 unpaid",
    detail: "Northwind · 14 days late",
    resolved: "Invoice #2291 collected",
    resolvedDetail: "$8,400.00",
  },
  {
    mono: true,
    icon: <Icon d={file} />,
    title: "Q3_recon_v7_FINAL(2).xlsx",
    detail: "Edited by 4 people today",
    resolved: "Q3 reconciled",
    resolvedDetail: "1,284 lines",
  },
  {
    icon: <span className="grid size-5 place-items-center rounded-full bg-teal-600 text-[9px] font-semibold text-white">AL</span>,
    title: "“Why is cash off by $0.03?”",
    detail: "Ana L. · #finance",
    resolved: "Rounding difference booked",
    resolvedDetail: "$0.03",
  },
  {
    tag: "Unmatched",
    tone: "warning",
    icon: <Icon d={bank} />,
    title: "312 bank lines uncategorized",
    detail: "Operating account ••4410",
    resolved: "Bank feed categorized",
    resolvedDetail: "312 lines",
  },
  {
    tag: "Accrual",
    tone: "critical",
    title: "Payroll accrual not booked",
    detail: "Due before close",
    resolved: "Payroll accrued",
    resolvedDetail: "$64,210.00",
  },
  {
    title: "Which FX rate did we use?",
    detail: "EUR invoices · 9 open",
    resolved: "FX revalued",
    resolvedDetail: "9 invoices",
  },
];

export function NoiseGateLedgerDemo() {
  return (
    <NoiseGate
      className="max-w-5xl"
      display="log"
      items={close}
      noiseTitle={
        <>
          Closing the books with <span className="text-zinc-500 dark:text-zinc-400">“one more spreadsheet”</span>
        </>
      }
      calmTitle="Closing with Ledgerline"
      calmClassName="bg-[#0b6b4f] text-white"
      calmFooter={<p className="text-sm text-white/85">October closed on the 2nd.</p>}
    />
  );
}
```