GitHub

Network Control

PreviousNext

Components to display and select the active network.

Documentation
Mainnet

Installation

pnpm dlx shadcn@latest add @wallet-kit/network-control

Usage

import { NetworkSelect, NetworkBadge } from "@/components/wallet/network"
 
export default function Demo() {
  return (
    <div className="flex items-center gap-2">
      <NetworkBadge />
      <NetworkSelect />
    </div>
  )
}

API Reference

NetworkSelect

A native select component that allows switching between configured networks.

Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes.

Inherits all props from shadcn/ui NativeSelect.

Behavior

  • Displays all networks configured in WalletProvider
  • Automatically updates when network changes
  • Uses native HTML select for accessibility

NetworkBadge

A badge component that displays the current network name.

Props

PropTypeDefaultDescription
networkNetworkFrom contextOptional network object. If not provided, fetches from WalletNetworkContext.
classNamestring-Additional CSS classes.
variantstring"outline"Badge variant style.

Inherits all props from shadcn/ui Badge.

Behavior

  • With Network Prop: Displays the provided network's label
  • Without Network Prop: Fetches network from context automatically
  • No Network: Renders null if no network is available
  • SSR Safe: Returns null during server-side rendering

Examples

Basic Usage

import { NetworkSelect, NetworkBadge } from "@/components/wallet/network"
 
export default function NetworkControls() {
  return (
    <div className="flex items-center gap-2">
      <NetworkBadge />
      <NetworkSelect />
    </div>
  )
}

Badge Only

import { NetworkBadge } from "@/components/wallet/network"
 
export default function NetworkDisplay() {
  return <NetworkBadge />
}

With Custom Network

import { NetworkBadge } from "@/components/wallet/network"
import { createSolanaMainnet } from "@/lib/chains/solana"
 
export default function Demo() {
  const mainnet = createSolanaMainnet()
  
  return <NetworkBadge network={mainnet} />
}
  • Both components require WalletProvider to be in the component tree
  • NetworkBadge can work standalone with a network prop or fetch from context
  • Network changes are automatically persisted to localStorage
  • The select component uses native HTML for better accessibility

Last updated 11/21/2025

Connect WalletWallet List