> ## 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 installation

> Install @alphscan/sdk-react-ui and styles

## 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.

## npm / pnpm

```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 dependencies

* **react** >= 18
* **@alphscan/normalized-events** (for NormalizedEvent type)
* **@alphscan/sdk-react** (optional; for useTxNormalizedEvents)

## Styles

The package ships a prebuilt Tailwind CSS file. Import it once (e.g. in your root layout or App):

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

If your app already uses Tailwind with the same config, you may rely on your own build; the components use standard Tailwind classes (e.g. rounded-lg, border, p-3, text-gray-700, dark:border-gray-600).

## Workspace (monorepo)

```json theme={null}
{
  "dependencies": {
    "@alphscan/sdk": "workspace:*",
    "@alphscan/sdk-react": "workspace:*",
    "@alphscan/sdk-react-ui": "workspace:*",
    "@alphscan/normalized-events": "workspace:*"
  }
}
```

Build order: normalized-events, sdk, sdk-react, sdk-react-ui.

## Next

<Card title="NormalizedEventsList" icon="list" href="/sdk-react-ui/normalized-events-list">
  Use the list component with your events.
</Card>