---
title: "Endpoints List"
description: "The customer's endpoints with status, DLQ badges, and row actions."
component: true
---

```tsx
"use client";

import { useState } from "react";
import { EndpointsList, type EndpointListItem } from "@/components/endpoints-list";

const INITIAL: EndpointListItem[] = [
  {
    id: "ep_1",
    url: "https://api.acme.dev/webhooks/repost",
    description: "Production receiver",
    subscriptions: ["*"],
    status: "ENABLED",
    dlqCount: 0,
  },
  {
    id: "ep_2",
    url: "https://hooks.acme.dev/ingest",
    description: "Staging",
    subscriptions: ["user.*", "invoice.paid"],
    status: "PAUSED",
    dlqCount: 3,
  },
];

export function EndpointsListDemo() {
  const [endpoints, setEndpoints] = useState(INITIAL);

  const setStatus = (id: string, status: EndpointListItem["status"]) =>
    setEndpoints((current) => current.map((endpoint) => (endpoint.id === id ? { ...endpoint, status } : endpoint)));

  return (
    <EndpointsList
      endpoints={endpoints}
      onPause={(endpoint) => setStatus(endpoint.id, "PAUSED")}
      onResume={(endpoint) => setStatus(endpoint.id, "ENABLED")}
      onEdit={() => undefined}
      onRevealSecret={() => undefined}
    />
  );
}

```

## Installation

<ItemInstall name="endpoints-list" target="components/endpoints-list.tsx" />

## Usage

This component is presentational: it renders what you pass it and calls back on
interaction. In a live dashboard the data comes from `useEndpoints() + useDlqCountByEndpoint()`
([@repost/portal-react](/docs/ui/portal-react)), but any data of
the same shape works.

<ComponentSource name="endpoints-list-demo" title="components/endpoints-list-demo.tsx" />

## Props

| Prop | Type | Description |
| ---- | ---- | ----------- |
| `endpoints` | `EndpointListItem[]` | Endpoints to render. |
| `onEdit / onPause / onResume / onDelete / onRevealSecret` | `(endpoint) => void` | Row actions; omit one to hide its button. |
| `busyEndpointId` | `string | null` | Disables actions while a mutation runs. |