Component Showcase

Component Showcase

Visual demonstration of all Supabase-quality UI components available in Varity docs.

---

1. CodeBlock Component

Enhanced code blocks with copy buttons and file names.

lib/varity.ts Copy

import { db } from '@varity-labs/sdk'

// Query data from a collection
const result = await db.collection('documents').get()

if (!result.success) {
console.error('Error:', result.error)
} else {
console.log('Documents:', result.data)
}

---

2. Callout Component

Four semantic types for different message priorities.

💡 Pro tip

Use environment variables for all API keys and sensitive configuration. Never commit credentials to Git.

ℹ️ Note

The default RPC endpoint is https://rpc-varity-testnet.t.conduit.xyz. You can override this in your Varity SDK configuration.

⚠️ Breaking change in v2.0

The SDK now uses a modular pattern. Use db for database operations and standalone functions for credentials instead of a client instance.

🚨 Security warning

Never expose your service role key in client-side code. This key has full access to your Varity project and should only be used in server environments.

Collapsible Callout

💡 Advanced usage

You can pass additional options to customize the database:

import { Database } from '@varity-labs/sdk'

const customDb = new Database({
  proxyUrl: 'https://your-proxy.example.com',
  appToken: 'your-app-token',
})

See the SDK Overview for all options.

---

3. Tabs Component

Multi-language code examples with keyboard navigation.

JavaScript

// JavaScript example
import { db } from '@varity-labs/sdk'

const result = await db.collection('users').get()

if (!result.success) {
  console.error('Query failed:', result.error)
} else {
  console.log('Users:', result.data)
}

TypeScript

// TypeScript example with types
import { db } from '@varity-labs/sdk'
import type { CollectionResponse } from '@varity-labs/sdk'

const result: CollectionResponse<{ email: string }> =
  await db.collection('users').get()

if (!result.success) {
  console.error('Query failed:', result.error)
} else {
  console.log('Users:', result.data)
}

Python

# Python example (CLI)
# Use varitykit CLI for Python workflows
import subprocess

result = subprocess.run(
    ['varitykit', 'app', 'deploy'],
    capture_output=True, text=True
)

if result.returncode != 0:
    print(f'Deploy failed: {result.stderr}')
else:
    print(f'Deployed: {result.stdout}')

---

4. StepHikeCompact Component

Perfect for quickstart guides with 5-6 numbered steps.

1

Create a Varity account

Go to developer.store.varity.so and sign up for free. No credit card required.

2

Install the Varity CLI

Install varitykit globally using pip.

pip install varitykit

3

Initialize your project

Run the init command to set up your project structure and configuration.

varitykit init my-app
cd my-app

4

Deploy to Varity

Deploy your app with a single command. Your app will be live in under 2 minutes.

varitykit app deploy

5

View your live app

Varity will output your deployment URL. Your app is now live on the Varity platform!

✓ Deployed: https://my-app.varity.app
✓ Build time: 1m 23s
✓ See pricing at varity.so

---

5. Card Component

Feature showcases and navigation grids.

Basic Cards

🔐

End-to-End Encryption

Your data is encrypted at rest and in transit with zero-knowledge architecture.

Learn more

⚡

Lightning Fast

Deploy apps in under 2 minutes with automatic scaling and optimization.

Learn more

💰

70% Cheaper

Save thousands compared to AWS with transparent, usage-based pricing.

Learn more

Two Column Grid

🎨

UI Components

42+ pre-built React components with seamless integration out of the box.

Learn more

🔧

Developer Tools

CLI, SDK, and browser extensions for seamless development workflow.

Learn more

---

6. Accordion Component

Collapsible content for advanced/optional sections.

Default Variant

What is Varity L3?

Varity L3 is the infrastructure layer that powers Varity applications. It provides:

• Free operations for users (sponsored by developers)
• Sub-second finality for fast responses
• Full compatibility with existing development tools
• Native USDC as the payment token

Chain ID: 33529

RPC: https://rpc-varity-testnet-rroe52pwjp.t.conduit.xyz

Advanced Variant (Layer 2 Content)

Advanced: How smart accounts work

Varity uses ERC-4337 Account Abstraction for smart accounts. When you create an account:

1. Factory creates a new smart account at a deterministic address
2. Session keys enable free operations for specific actions
3. Paymaster (0x579772Bfa5Ec1e8f33B81F304ffDbC55135db154) sponsors usage fees
4. User operations are bundled and executed efficiently

Smart accounts are created automatically when a user signs in. Varity handles all the complexity behind the scenes — developers just use the usePrivy hook from @varity-labs/ui-kit.

Learn more about smart accounts

Example Variant

Example: Complete authentication flow

Here’s a complete example showing login, user state, and logout:

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

// Set up auth provider
function App() {
  return (
    <PrivyStack appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID}>
      <AuthExample />
    </PrivyStack>
  )
}

// Use the auth hook for state
function AuthExample() {
  const { ready, authenticated, user, logout } = usePrivy()

  if (!ready) return <p>Loading...</p>

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

  return (
    <div>
      <p>Logged in as: {user?.email?.address}</p>
      <button onClick={logout}>Log out</button>
    </div>
  )
}

---

Utility Classes

Badges

NewBetaComing SoonAdvancedDeprecated

Status Indicators

Varity L3: Operational

Maintenance scheduled: Jan 31, 2026

Deployment failed

Service unavailable

---

API Documentation Card

db.collection(name).get()async

Query all documents in a collection. Returns a CollectionResponse with success status and data.

---

Combining Components

Here’s how components work together in a real docs page:

💡 Tip

This example shows the recommended pattern for quickstart pages.

Next.js

1

Create Next.js app

Create a new Next.js application.

npx create-next-app@latest my-varity-app
cd my-varity-app

2

Install dependencies

Add Varity SDK and UI components.

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

React

1

Create React app

Create a new React application.

npx create-react-app my-varity-app
cd my-varity-app

2

Install dependencies

Add Varity SDK and UI components.

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

Advanced: Custom database configuration

For production deployments, you may want to customize the database configuration:

import { Database } from '@varity-labs/sdk'

const customDb = new Database({
  proxyUrl: 'https://your-proxy.example.com',
  appToken: 'your-app-token',
})

// Use the custom database instance
const users = customDb.collection('users')
const result = await users.get({ limit: 10 })

---

Next Steps

📚

Read Component Documentation

Learn how to use each component in your docs pages.

Learn more

✍️

Start Writing Content

Use these components to create world-class documentation.

Learn more