You're on the bleeding edge!
These components use a canary release of @wallet-ui v2.0.
Please reach out if you have any issues or suggestions.
Demo: select wallet and cluster to fetch your balance.
Open inGetting started
1. Configure your shadcn config
Add the @wallet-ui registry in your shadcn config.
components.json
{ "$schema": "https://ui.shadcn.com/schema.json", //... shadcn config "registries": { "@wallet-ui": "https://registry.wallet-ui.dev/r/{name}.json" }}2. Generate the components
Generate the SolanaProvider with the Solana Mobile Wallet Adapter and the useSolana hook.
pnpx shadcn@latest add @wallet-ui/solana-provider
Generate the ClusterDropdown and WalletDropdown components.
pnpx shadcn@latest add @wallet-ui/cluster-dropdown @wallet-ui/wallet-dropdown
3. Update layout
Add the SolanaProvider to the root layout of your app.
app/layout.tsx
// Other imports...import { SolanaProvider } from "@/components/solana-provider";export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { //... <body > <SolanaProvider>{children}</SolanaProvider> </body> //...}4. Use the components
Add the ClusterDropdown and the WalletDropdown components to your page.
app/page.tsx
'use client'import { ClusterDropdown } from "@/components/cluster-dropdown";import { WalletDropdown } from "@/components/wallet-dropdown";import { useSolana } from "@/hooks/use-solana";export default function Home() { const { account } = useSolana() return ( <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20"> <main className="flex flex-col gap-[32px] row-start-2 "> <div className='flex gap-[32px] justify-center'> <WalletDropdown /> <ClusterDropdown /> </div> {account ? `Connected to ${account.address}` : null} </main> </div> );}Done!
You completed the Wallet UI setup and can now use it in our apps!