# Noise Gate: Support Inbox

> A help desk's pitch. Overdue tickets, angry follow-ups and a refund that fired three times drift into the seam, and every one that goes through ticks Harbor's resolved count. Point at the noise to stop it and read a card.

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-demo).

- Page, with a live preview: https://shadcn.exchange/r/keyframeui/noise-gate-demo
- Screenshot: https://shadcn.exchange/shot/keyframeui/noise-gate-demo/light.png
- Registry item: https://keyframeui.com/r/noise-gate-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-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-demo

## Files

### `registry/demos/noise-gate-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>
  );
}

function Avatar({ initials, className }: { initials: string; className: string }) {
  return (
    <span className={`grid size-5 place-items-center rounded-full text-[9px] font-semibold text-white ${className}`}>
      {initials}
    </span>
  );
}

const clock = "M8 4.5V8l2.5 1.5M14 8A6 6 0 1 1 2 8a6 6 0 0 1 12 0Z";
const queue = "M2.5 4h11M2.5 8h11M2.5 12h6";
const trendDown = "M2 4.5l4.5 4.5 2.5-2.5L14 11.5M14 8v3.5h-3.5";
const reply = "M6 4 2.5 7.5 6 11M2.5 7.5H10a3.5 3.5 0 0 1 3.5 3.5v1";

const tickets: NoiseGateItem[] = [
  {
    tag: "SLA",
    tone: "critical",
    icon: <Icon d={clock} />,
    title: "Order #48213 hasn't moved in 9 days",
    detail: "First reply overdue by 3h 12m",
  },
  {
    icon: <Avatar initials="MK" className="bg-violet-500" />,
    title: "“Is anyone actually reading these?”",
    detail: "Maya K. · 4th follow-up",
  },
  { tag: "Queue", tone: "warning", icon: <Icon d={queue} />, title: "214 chats waiting", detail: "Longest wait 38 min" },
  {
    tag: "Refund",
    tone: "critical",
    repeat: 3,
    title: "Refund still not processed",
    detail: "Customer wrote 3 times in 10 min",
  },
  { icon: <Icon d={reply} />, title: "“Sorry for the delay” sent 1,980×", detail: "Most used macro this week" },
  { tag: "Escalated", tone: "warning", title: "Chargeback threatened on #47790", detail: "Assigned to nobody" },
  {
    icon: <Avatar initials="JD" className="bg-sky-500" />,
    title: "“Fine, I'll just cancel then.”",
    detail: "Jordan D. · live chat",
  },
  {
    tag: "CSAT",
    tone: "critical",
    icon: <Icon d={trendDown} />,
    title: "Satisfaction down to 61%",
    detail: "14 points lower than last month",
  },
  { mono: true, title: "urgent, URGENT, urgent!!", detail: "Three tags, one meaning" },
  { tag: "Handoff", tone: "warning", title: "Night shift notes missing", detail: "92 tickets carried over" },
];

export function NoiseGateDemo() {
  return (
    <NoiseGate
      className="max-w-5xl"
      items={tickets}
      noiseTitle={
        <>
          Answering tickets with <span className="text-zinc-500 dark:text-zinc-400">“canned replies”</span>
        </>
      }
      calmTitle="Answering with Harbor"
      count={1284}
      countPrefix="Resolved"
      countSuffix="tickets today"
    />
  );
}
```