Manual Installation

Install and configure Prex with Next.js.

Set up shadcn.ui

Set up shadcn and add the components you need:

npx shadcn@latest init
npx shadcn@latest add button select input label dialog tooltip

Install Prex

Run the following command to create a tailwind.config.js file:

npm install @prex0/uikit

Add Providers

Add the following to your ./app/providers.tsx file:

'use client';
import { PrexUIKitProvider, USDC_TOKEN_ARBITRUM, WETH_TOKEN_ARBITRUM } from "@prex0/uikit";

const TOKENS = [USDC_TOKEN_ARBITRUM, WETH_TOKEN_ARBITRUM];

/**
 * Providers are used to wrap the app in the PrexUIKitProvider
 */
export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PrexUIKitProvider
      // Arbitrum
      chainId={42161}
      policyId={process.env.NEXT_PUBLIC_POLICY_ID || 'test'}
      apiKey={process.env.NEXT_PUBLIC_API_KEY || 'test'}
      tokens={TOKENS}
      dryRun={process.env.NEXT_PUBLIC_DRY_RUN === 'true'}
  >
      {children}
    </PrexUIKitProvider>
  );
}

Update package.json

Update the following in your ./package.json file:

...
  "scripts": {
    "dev": "NEXT_PUBLIC_DRY_RUN=true next dev",
...

Update layout

Update the following in your ./app/layout.tsx file:

import type { Metadata } from "next";
import localFont from "next/font/local";
import "@prex0/uikit/styles.css";
import "./globals.css";
import { Providers } from "./providers";

...

<html lang="en">
  <body
    className={`${geistSans.variable} ${geistMono.variable} antialiased`}
  >
    <Providers>
      {children}
    </Providers>
  </body>
</html>