Skip to content
Wallet UI Wallet UI

Getting started with Vite

This guide will walk you through setting up Wallet UI in a new or existing Vite application with React and TypeScript.

1. Generate new application

Section titled “1. Generate new application”

If you’re starting from scratch, you can use create-vite to generate a new React and TypeScript project.

Terminal window
npm create vite@latest my-vite-app -- --template react-ts
cd my-vite-app

2. Install dependencies

Section titled “2. Install dependencies”

Install the required Wallet UI packages.

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

3. Set up Tailwind CSS

Section titled “3. Set up Tailwind CSS”

For more information about styling, see the Styling section.

Wallet UI components are designed with Tailwind CSS. If you don’t have it set up yet, follow these steps.

First, install Tailwind and its peer dependencies.

Terminal window
npm install -D tailwindcss @tailwindcss/vite

Next, configure the Tailwind CSS plugin in your vite.config.ts (or vite.config.js) file.

vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react(), tailwindcss()],
});

Finally, add the Tailwind directives and the Wallet UI styles to your main CSS file.

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

4. Add WalletUiProvider

Section titled “4. Add WalletUiProvider”

Create a provider component that will set up the Wallet UI configuration and wrap your application.

src/providers/wallet-ui-provider.tsx
import { createSolanaDevnet, createSolanaLocalnet, createWalletUiConfig, WalletUi } from '@wallet-ui/react';
import { ReactNode } from '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 WalletUiProvider({ children }: { children: ReactNode }) {
    return <WalletUi config={config}>{children}</WalletUi>;
}

5. Update your main application file

Section titled “5. Update your main application file”

Now, wrap your root App component with the WalletUiProvider you just created.

src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { WalletUiProvider } from './providers/wallet-ui-provider.tsx';


ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <WalletUiProvider>
            <App />
        </WalletUiProvider>
    </React.StrictMode>,
);

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