> ## Documentation Index
> Fetch the complete documentation index at: https://docs.alphscan.io/llms.txt
> Use this file to discover all available pages before exploring further.

# sdk-react-ui overview

> React UI components for Alphscan (Tailwind)

**@alphscan/sdk-react-ui** provides React components for displaying **normalized events** (e.g. from the transaction normalized-events API). Components use Tailwind CSS and support dark mode. They are designed to work with data from **@alphscan/sdk** or **@alphscan/sdk-react** (e.g. **useTxNormalizedEvents**).

## Repository & package

|            | Link                                                                                             |
| ---------- | ------------------------------------------------------------------------------------------------ |
| **GitHub** | [github.com/AlphScan/sdk-react-ui](https://github.com/AlphScan/sdk-react-ui)                     |
| **npm**    | [npmjs.com/package/@alphscan/sdk-react-ui](https://www.npmjs.com/package/@alphscan/sdk-react-ui) |

Part of [AlphScan](https://github.com/AlphScan/); npm packages are private until release.

## Features

* **NormalizedEventsList** — render a list of normalized events with optional custom row component or per-category row (e.g. ContractCallEventRow for contract\_call).
* **NormalizedEventRow** — default row for any event (category, from/to, amount, tx link).
* **NormalizedEventRowByCategory** — picks a category-specific row when available, otherwise NormalizedEventRow.
* **ContractCallEventRow** — detailed row for contract\_call events (method, parameters, token approved).

## Package

```bash theme={null}
npm install @alphscan/sdk-react-ui @alphscan/sdk-react @alphscan/normalized-events
# or
pnpm add @alphscan/sdk-react-ui @alphscan/sdk-react @alphscan/normalized-events
```

Peer: **react** >= 18. Styling: import **@alphscan/sdk-react-ui/styles.css** (Tailwind output).

## Quick example

```tsx theme={null}
import { NormalizedEventsList } from "@alphscan/sdk-react-ui";
import "@alphscan/sdk-react-ui/styles.css";
import { useTxNormalizedEvents } from "@alphscan/sdk-react";

function TxEvents({ txId }: { txId: string | undefined }) {
  const { data, loading, error } = useTxNormalizedEvents(txId);
  if (loading || error || !data) return null;
  return (
    <NormalizedEventsList
      events={data.events}
      emptyMessage="No events"
      explorerUrl="https://explorer.alephium.org"
    />
  );
}
```

## Exports

| Export                       | Description                                     |
| ---------------------------- | ----------------------------------------------- |
| NormalizedEventsList         | List container with configurable row rendering. |
| NormalizedEventRow           | Default event row.                              |
| NormalizedEventRowByCategory | Category-aware row (e.g. contract\_call).       |
| ContractCallEventRow         | Row for contract\_call events.                  |

## Next steps

<CardGroup cols={2}>
  <Card title="Installation" icon="box" href="/sdk-react-ui/installation">
    Install and add styles.
  </Card>

  <Card title="NormalizedEventsList" icon="list" href="/sdk-react-ui/normalized-events-list">
    List component and props.
  </Card>

  <Card title="Event row components" icon="grip-lines" href="/sdk-react-ui/event-row-components">
    NormalizedEventRow, ContractCallEventRow, NormalizedEventRowByCategory.
  </Card>

  <Card title="Components reference" icon="code" href="/sdk-react-ui/components-reference">
    All components and props.
  </Card>
</CardGroup>