Skip to content
Varity Docs

@varity-labs/ui-kit Installation

Varity Team Core Contributors Updated March 2026

Get the Varity UI Kit installed in your React project.

Install Packages

Section titled “Install Packages”
Terminal window
npm install @varity-labs/ui-kit @varity-labs/sdk

Peer Dependencies

Section titled “Peer Dependencies”

The UI Kit requires these peer dependencies:

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "@privy-io/react-auth": "^1.0.0",
  "@tanstack/react-query": "^5.0.0"
}

Install any missing dependencies:

Terminal window
npm install react react-dom @privy-io/react-auth @tanstack/react-query

Credentials

Section titled “Credentials”

No credential setup needed. Varity provides authentication and storage credentials automatically.

Basic Setup

Section titled “Basic Setup”

  1. Set up your auth provider

    app/layout.tsx
    import { PrivyStack } from '@varity-labs/ui-kit';
    

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            <PrivyStack appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>
              {children}
            </PrivyStack>
          </body>
        </html>
      );
    }

  2. Add a login button

    components/Header.tsx
    import { PrivyLoginButton, usePrivy } from '@varity-labs/ui-kit';
    

    export function Header() {
      const { authenticated, logout } = usePrivy();
    

      return (
        <header>
          {authenticated ? (
            <button onClick={logout}>Sign Out</button>
          ) : (
            <PrivyLoginButton />
          )}
        </header>
      );
    }

  3. Protect routes

    app/dashboard/page.tsx
    import { PrivyProtectedRoute } from '@varity-labs/ui-kit';
    

    export default function DashboardPage() {
      return (
        <PrivyProtectedRoute>
          <Dashboard />
        </PrivyProtectedRoute>
      );
    }

Framework Setup

Section titled “Framework Setup”

Next.js (App Router)

Section titled “Next.js (App Router)”
app/layout.tsx
import { PrivyStack } from '@varity-labs/ui-kit';


export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <PrivyStack appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>
          {children}
        </PrivyStack>
      </body>
    </html>
  );
}

React (Vite)

Section titled “React (Vite)”
src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { PrivyStack } from '@varity-labs/ui-kit';
import App from './App';


ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <PrivyStack appId={import.meta.env.VITE_PRIVY_APP_ID}>
      <App />
    </PrivyStack>
  </React.StrictMode>
);

Create React App

Section titled “Create React App”
src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { PrivyStack } from '@varity-labs/ui-kit';
import App from './App';


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);


root.render(
  <React.StrictMode>
    <PrivyStack appId={process.env.REACT_APP_PRIVY_APP_ID}>
      <App />
    </PrivyStack>
  </React.StrictMode>
);

Configuration Options

Section titled “Configuration Options”

PrivyStack accepts these configuration options:

<PrivyStack
  // Optional (uses dev defaults if not set)
  appId="your-privy-app-id"


  // Login methods to show
  loginMethods={['email', 'google', 'twitter', 'discord']}


  // Appearance customization
  appearance={{
    theme: 'light', // or 'dark'
    accentColor: '#2563EB',
    logo: '/logo.png',
  }}


  // Callback when wallet address changes
  onAddressChange={(address) => console.log('Address:', address)}
>
  {children}
</PrivyStack>

TypeScript Support

Section titled “TypeScript Support”

The UI Kit is fully typed. Import types as needed:

import type {
  PrivyStackProps,
  PrivyLoginButtonProps,
  PaymentWidgetProps,
} from '@varity-labs/ui-kit';

Next Steps

Section titled “Next Steps”
Section titled “Related Resources”