Skip to main content
Don’t need a custom frontend? Users can deposit and withdraw through the Ranger UI at voltr.xyz once your vault is indexed and listed. Building a custom frontend is optional.

​
When to Build a Custom Frontend

  • You want to embed vault functionality in your own application
  • You need custom UI/UX beyond what the Ranger UI provides
  • You want to offer a branded experience for your users

​
Approaches

ApproachBest ForTools
UI TemplateQuickest path to a branded vault frontendvoltrxyz/basic-ui
SDK integrationFull control, real-time custom querying@voltr/vault-sdk
API + SDKRead data via API, and create transactionsVoltr API
Recommended: Start with the open-source UI template for a production-ready frontend out of the box, or use the Voltr API if you need to integrate vault functionality into an existing application.

​
Open-Source Vaults UI Template

The fastest way to launch a custom vault frontend is to fork the Voltr Vaults UI Template — a self-contained, production-ready Next.js application available open source at github.com/voltrxyz/basic-ui.

​
What’s Included

  • Vault Discovery — Browse and filter vaults with real-time stats (TVL, capacity, fees)
  • Deposits & Withdrawals — Full deposit and two-step withdrawal flow with wallet integration
  • Vault Manager — Create new vaults and update configuration directly from the UI
  • Real-time Updates — On-chain account listeners for live position tracking

​
Tech Stack

  • Next.js 15 (App Router), React 19, TypeScript, Tailwind CSS with shadcn/ui
  • @voltr/vault-sdk and @solana/web3.js for on-chain interaction
  • All transactions built client-side — no backend required

​
Quick Start

git clone https://github.com/voltrxyz/basic-ui.git
cd basic-ui
pnpm install
cp .env.example .env
Set your environment variables in .env: 
NEXT_PUBLIC_RPC_URL=<your-solana-rpc-url>
NEXT_PUBLIC_VAULT_PUBKEYS=<comma-separated-vault-pubkeys>
Then start the development server: 
pnpm dev
The template is optimized for deployment on Vercel — push to GitHub and import into Vercel with the same environment variables.