Installation

Get started with the Tezos Wallet Boilerplate in your Next.js project.

Prerequisites

Before you begin, make sure you have the following installed:

Node.js 18+ or Bun runtime
Git for version control
A code editor (VS Code recommended)

Clone the Repository

Using Git

# Clone the repository
git clone https://github.com/your-username/nextjs-tezos-wallet-boilerplate.git

# Navigate to the project directory
cd nextjs-tezos-wallet-boilerplate

# Install dependencies
bun install
# or
npm install

Package Dependencies

The boilerplate includes the following key dependencies:

@airgap/beacon-dapp	Beacon SDK types and utilities
@airgap/beacon-sdk	Multi-wallet connection protocol
@taquito/taquito	Tezos JavaScript SDK for blockchain interactions
@taquito/beacon-wallet	Beacon wallet adapter for Taquito
kukai-embed	Direct Kukai wallet integration
zustand	Lightweight state management
next	React framework with App Router
tailwindcss	Utility-first CSS framework (v4)
@radix-ui/react-*	Accessible headless UI components
lucide-react	Beautiful icon library

🔄 Auto-Installation

All dependencies are automatically installed when you run bun install or npm install. No additional setup required for wallet providers!

Development Server

Start the development server

# Start the development server
bun dev
# or
npm run dev

# Open http://localhost:3000 in your browser

Project Structure

nextjs-tezos-wallet-boilerplate/
├── app/                       # Next.js 15 App Router
│   ├── docs/                 # Documentation pages
│   ├── globals.css           # Global styles with Tailwind
│   ├── layout.tsx            # Root layout with providers
│   └── page.tsx              # Main application page
├── components/               # React components
│   ├── layout/              # Layout components
│   │   ├── Header.tsx       # Navigation header
│   │   └── connect/         # Wallet connection components
│   ├── providers/           # React providers
│   │   └── wallet-provider.tsx  # Wallet initialization
│   ├── ui/                  # shadcn/ui components
│   ├── contract-playground.tsx  # Smart contract interaction
│   ├── tez-faucet.tsx       # Testnet token faucet
│   └── ...                  # Other dApp components
├── lib/                     # Utilities and configuration
│   ├── tezos/              # Tezos-specific code
│   │   ├── store/          # Zustand state management
│   │   │   └── walletStore.ts  # Wallet state store
│   │   └── useTezos.tsx    # Main Tezos hook
│   ├── constants.ts        # App constants
│   └── utils.ts            # Utility functions
├── public/                 # Static assets
├── package.json           # Dependencies and scripts
├── tailwind.config.ts     # Tailwind CSS 4 configuration
├── components.json        # shadcn/ui configuration
└── next.config.mjs        # Next.js configuration

🏗️ Architecture Highlights

• App Router: Uses Next.js 15 App Router for optimal performance
• Provider Pattern: WalletProvider handles global wallet state
• State Management: Zustand for lightweight, performant state
• Auto-Restoration: Wallet connections persist across refreshes

Next Steps

🔧 Configuration

Configure network settings and RPC endpoints

Configure your app →

🧩 Components

Learn about the available components

Explore components →

Tezos Wallet Boilerplate Docs