No wallet detected in this browser. Please install a Solana wallet extension.
Installation
pnpm dlx shadcn@latest add @wallet-kit/list
Usage
import { WalletList } from "@/components/wallet/list"
import { useWallet } from "@/hooks/use-wallet"
export default function Demo() {
const { wallets } = useWallet()
return <WalletList wallets={wallets} />
}API Reference
WalletList
A scrollable list component that displays available wallets. Shows a "Connected" badge for the currently connected wallet and a spinner during connection.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
wallets | UiWallet[] | - | Required. Array of available wallets to display. |
select | (account: UiWalletAccount) => Promise<void> | void | - | Callback fired when a wallet is selected and connected. Receives the connected account. |
className | string | - | Additional CSS classes. |
Inherits all props from div.
Behavior
- Empty List: Displays
NoWalletDetectedcomponent with a message and link to download Phantom Wallet - With Wallets: Renders a scrollable list (max height 300px) of wallet buttons
- Connected Wallet: Shows a "Connected" badge and disables the button
- Connecting: Shows a spinner while connection is in progress
NoWalletDetected
An internal component displayed when no wallets are detected. Shows an alert and a button to download Phantom Wallet.
Examples
Basic List
import { WalletList } from "@/components/wallet/list"
import { useWallet } from "@/hooks/use-wallet"
export default function WalletSelector() {
const { wallets } = useWallet()
return (
<WalletList
wallets={wallets}
select={(account) => {
console.log("Connected:", account.address)
}}
/>
)
}In a Dialog
import { WalletList } from "@/components/wallet/list"
import { Dialog, DialogContent } from "@/components/ui/dialog"
import { useWallet } from "@/hooks/use-wallet"
export default function WalletDialog() {
const { wallets } = useWallet()
const [open, setOpen] = useState(false)
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent>
<WalletList
wallets={wallets}
select={(account) => {
setOpen(false)
}}
/>
</DialogContent>
</Dialog>
)
}- The component automatically handles wallet connection state
- Connected wallets are visually distinguished with a badge
- The list is scrollable with a maximum height of 300px
- Each wallet button shows the wallet icon, name, and connection status
Last updated 11/21/2025