# Components

Pre-built React components for common Ethereum UI patterns.

## Installation

### Peer Dependencies

Install the required peer dependencies using your preferred package manager:

:::code-group
```bash [npm]
npm install react react-dom @types/react viem wagmi @tanstack/react-query
```

```bash [pnpm]
pnpm add react react-dom @types/react viem wagmi @tanstack/react-query
```

```bash [yarn]
yarn add react react-dom @types/react viem wagmi @tanstack/react-query
```
:::

### Package Installation

Install Scaffold UI components and hooks using your preferred package manager:

:::code-group
```bash [npm]
npm install @scaffold-ui/components @scaffold-ui/hooks
```

```bash [pnpm]
pnpm add @scaffold-ui/components @scaffold-ui/hooks
```

```bash [yarn]
yarn add @scaffold-ui/components @scaffold-ui/hooks
```
:::

### Import Styles

Import the styles in your root component file (`app.tsx` for React or `layout.tsx` for Next.js):

```typescript
import "@scaffold-ui/components/styles.css";
```

### Create wagmi config and setup Tanstack query

https://wagmi.sh/react/getting-started#create-config