Connect Wallet

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @wallet-kit/connect
Copy

Usage

ConnectWallet

The main button component that opens a dialog to select a wallet. When a wallet is connected, it displays the wallet icon and ellipsified address with a disconnect button.

Copyimport { ConnectWallet } from "@/components/wallet/connect"
 
export default function Demo() {
  return <ConnectWallet />
}

ConnectWalletPrompt

A prompt component that displays a warning message when no wallet is connected. It automatically hides when a wallet is connected.

Copyimport { ConnectWalletPrompt } from "@/components/wallet/connect"
 
export default function Demo() {
  return (
    <ConnectWalletPrompt />
  )
}

API Reference

ConnectWallet

A button that opens a dialog to select a wallet. If a wallet is already connected, it displays the connected wallet's address and a disconnect button.

Props

Inherits all props from shadcn/ui Button.

Behavior

• Not Connected: Shows a button that opens a dialog with the list of available wallets
• Connected: Shows a ButtonGroup with the wallet icon, ellipsified address, and a disconnect button
• Dialog: Contains a toggle to show wallet onboarding information

ConnectWalletPrompt

A prompt component that displays when no wallet is connected. Useful for gating content that requires wallet connection.

Props

Inherits all props from shadcn/ui Item.

Behavior

• Not Connected: Displays an alert-style item with a warning icon, message, and a ConnectWallet button
• Connected: Renders null (automatically hidden)

Examples

Basic Connection

Copyimport { ConnectWallet } from "@/components/wallet/connect"
 
export default function Header() {
  return (
    <header>
      <ConnectWallet />
    </header>
  )
}

With Custom Text

Copyimport { ConnectWallet } from "@/components/wallet/connect"
 
export default function Demo() {
  return (
    <ConnectWallet variant="outline">
      Connect Your Wallet
    </ConnectWallet>
  )
}

Using the Prompt

Copyimport { ConnectWalletPrompt } from "@/components/wallet/connect"
 
export default function ProtectedContent() {
  return (
    <div>
      <ConnectWalletPrompt />
      {/* Your protected content here */}
    </div>
  )
}