@varity-labs/ui-kit Overview

Varity Team Core Contributors Updated March 2026

A React component library that handles authentication, payments, and account management so you can focus on building your application.

What It Does

Authentication: Email, Google, Twitter, Discord, and GitHub login with no extra prompts
Payments: Accept payments through the App Store and in-app widgets
Account Management: Automatic account creation and session handling
Free Operations: Users never pay usage fees

Quick Start

npm install @varity-labs/ui-kit @varity-labs/sdk

import { PrivyStack, PrivyLoginButton } from '@varity-labs/ui-kit';

function App() {
  return (
    <PrivyStack>
      <PrivyLoginButton />
      <YourApp />
    </PrivyStack>
  );
}

That’s it. Users can now sign in with email or social accounts.

Key Components

PrivyStack

All-in-one provider that sets up authentication and account management. Wrap your app with this once.

PrivyLoginButton

Pre-built login button that opens the authentication modal. Supports email, Google, Twitter, Discord, and more.

PaymentWidget

Payment widget for in-app purchases and upgrades (post-beta).

PrivyProtectedRoute

Wrapper that shows content only to authenticated users. Shows login prompt otherwise.

How Authentication Works

User clicks “Sign In”
Modal appears with email and social options
User enters email (receives code) or clicks social login
Account is created automatically
User is authenticated and ready to use your app

import { usePrivy } from '@varity-labs/ui-kit';

function Dashboard() {
  const { authenticated, user, logout } = usePrivy();

  if (!authenticated) {
    return <PrivyLoginButton />;
  }

  return (
    <div>
      <p>Welcome, {user?.email?.address || 'User'}</p>
      <button onClick={logout}>Sign Out</button>
    </div>
  );
}

What Gets Created Automatically

When a user signs in with email or social login:

Behind the Scenes	What User Sees
Account created	”Signed in successfully”
Account linked to profile	User profile with email
Ready for operations	Can use your app immediately

Users never see technical details or extra prompts unless you choose to show them.

Package Exports

Providers

Export	Description
`PrivyStack`	All-in-one provider (recommended)
`VarityPrivyProvider`	Authentication provider with Wagmi
`VarityDashboardProvider`	Dashboard-specific provider setup

Components

Export	Description
`PrivyLoginButton`	Login button with modal
`PrivyUserProfile`	Display user info with logout
`PrivyProtectedRoute`	Auth-gated content wrapper
`PrivyReadyGate`	Loading state during initialization
`PaymentWidget`	In-app payment widget (post-beta)
`PaymentGate`	Subscription/tier gate (post-beta)

Hooks

Export	Description
`usePrivy`	Core authentication hook (re-exported)
`useLogin`	Trigger login programmatically
`useLogout`	Trigger logout programmatically

Advanced: Additional Exports

These exports provide lower-level access for advanced use cases. All are currently exported and available.

Additional Hooks

Export	Description
`useWallets`	Access all connected accounts (re-exported)
`useToast`	Show toast notifications (success, error, info)
`useTheme`	Access current theme and presets from ThemeProvider
`useVarityPayment`	Payment state and actions for in-app purchases

Dashboard Components

Export	Description
`DashboardLayout`	Full dashboard layout with sidebar, header, footer
`DashboardHeader`	Dashboard header bar
`DashboardSidebar`	Sidebar navigation
`KPICard`	Key metric display card
`StatusBadge`	Status indicator badge
`EmptyState`	Empty state placeholder with presets
`LoadingSkeleton`	Loading skeleton variants (text, card, table, list)

Analytics Components

Export	Description
`DataTable`	Sortable, paginated data table
`AnalyticsCard`	Analytics display card
`ChartContainer`	Chart wrapper with actions
`MetricDisplay`	Metric with trend indicator
`Sparkline`	Inline sparkline chart

Branding

Export	Description
`ThemeProvider`	Theme context provider with presets
`Logo`	Varity logo component
`Attribution`	Required “Powered by Varity” attribution

Production Example

import {
  PrivyStack,
  PrivyLoginButton,
  PrivyUserProfile,
  PrivyProtectedRoute,
  usePrivy,
} from '@varity-labs/ui-kit';

function App() {
  return (
    <PrivyStack
      appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}
      loginMethods={['email', 'google']}
      appearance={{
        theme: 'light',
        accentColor: '#2563EB',
        logo: '/logo.png',
      }}
    >
      <Layout>
        <Header />
        <PrivyProtectedRoute>
          <Dashboard />
        </PrivyProtectedRoute>
      </Layout>
    </PrivyStack>
  );
}

function Header() {
  const { authenticated } = usePrivy();

  return (
    <header>
      {authenticated ? (
        <PrivyUserProfile showLogoutButton />
      ) : (
        <PrivyLoginButton>Sign In</PrivyLoginButton>
      )}
    </header>
  );
}

Next Steps

Installation Guide - Full setup instructions
Components Reference - All components with examples
Hooks Reference - Available hooks and usage