Skip to content
Wallet UI Wallet UI

Getting started with Next.js

Generate new application

Section titled “Generate new application”

If you start from scratch, you can use create-next-app to create new Next.js application:

Terminal window
npx create-next-app@latest --app --src-dir --typescript --tailwind

Install dependencies

Section titled “Install dependencies”

Now that you have a Next.js app (either a new or existing one), you can install the dependencies:

Terminal window
npm install @wallet-ui/react @wallet-ui/core

Add Solana Provider

Section titled “Add Solana Provider”
src/components/solana-provider.tsx
'use client';


import { ReactNode } from 'react';
import { createSolanaDevnet, createSolanaLocalnet, createWalletUiConfig, WalletUi } from '@wallet-ui/react';


const config = createWalletUiConfig({
    clusters: [
        // You can add mainnet when you're ready
        // createSolanaMainnet('https://mainnet.your-rpc.com?api-key=secret'),
        createSolanaDevnet(),
        createSolanaLocalnet(),
    ],
});


export function SolanaProvider({ children }: { children: ReactNode }) {
    return <WalletUi config={config}>{children}</WalletUi>;
}

Add provider to your layout

Section titled “Add provider to your layout”
src/app/layout.tsx
import { SolanaProvider } from '@/components/solana-provider';


export default function RootLayout({ children }: { children: ReactNode }) {
    return (
        <html lang="en" suppressHydrationWarning>
            <body>
                <SolanaProvider>{children}</SolanaProvider>
            </body>
        </html>
    );
}

Add styles to src/app/globals.css

Section titled “Add styles to src/app/globals.css”

For more information about styling, see the Styling section.

src/app/globals.css
@import 'tailwindcss';
@import '@wallet-ui/tailwind/index.css';

You should now be able to use the components in your app.