Skip to main content
Don’t need a custom frontend? Users can deposit and withdraw through the Voltr 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 Voltr UI provides
  • You want to offer a branded experience for your users

​
Approaches

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/kit for on-chain interaction
  • All transactions built client-side — no backend required
If a dependency still expects @solana/web3.js, keep it in a narrow compatibility layer instead of making it your primary client stack.

​
Quick Start

Set your environment variables in .env:
Then start the development server:
The template is optimized for deployment on Vercel — push to GitHub and import into Vercel with the same environment variables.