---
title: "Event Catalog Browser"
description: "Grouped event types with descriptions and schema-derived sample payloads."
component: true
---

```tsx
"use client";

import { EventCatalogBrowser } from "@/components/event-catalog-browser";

export function EventCatalogBrowserDemo() {
  return (
    <EventCatalogBrowser
      eventTypes={[
        {
          id: "evt_1",
          name: "user.created",
          version: 1,
          description: "A user signed up.",
          jsonSchema: {
            type: "object",
            properties: { id: { type: "string" }, email: { type: "string" }, plan: { type: "string" } },
          },
        },
        {
          id: "evt_2",
          name: "user.deleted",
          version: 1,
          description: "A user closed their account.",
          jsonSchema: { type: "object", properties: { id: { type: "string" } } },
        },
        {
          id: "evt_3",
          name: "invoice.paid",
          version: 2,
          description: "An invoice settled.",
          jsonSchema: {
            type: "object",
            properties: { amountCents: { type: "number" }, currency: { type: "string" } },
          },
        },
      ]}
      onSendSample={() => undefined}
    />
  );
}

```

## Installation

<ItemInstall name="event-catalog-browser" target="components/event-catalog-browser.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 `useEventTypes() + useSendSampleEvent()`
([@repost/portal-react](/docs/ui/portal-react)), but any data of
the same shape works.

<ComponentSource name="event-catalog-browser-demo" title="components/event-catalog-browser-demo.tsx" />

## Props

| Prop | Type | Description |
| ---- | ---- | ----------- |
| `eventTypes` | `CatalogEventType[]` | Event types with JSON Schemas. |
| `onSendSample` | `(eventType, sample) => void` | Renders a send-test button. |
| `sendingEventTypeId` | `string | null` | Disables that event's button. |