Solana Wallet Example Code and Tutorial

Creating a Custom Solana Wallet Connect UI with Next.js , Tailwind and Shadcn

Step 1: Set up next.js application with tailwind css

npx create-next-app@latest
Nextjs initial setup

Initial File Structure:

Set up Now lets setup shadcn , Shadcn provides reusable components that compatible with tailwind css . Its a open source project.

Run the CLI

Run the shadcn-ui init command to setup your project:

Configure components.json

You will be asked a few questions to configure components.json:

Copy

Fonts

I use Inter as the default font. Inter is not required. You can replace it with any other font.

Here's how I configure Inter for Next.js:

1. Import the font in the root layout:

Copy

2. Configure theme.extend.fontFamily in tailwind.config.js

Copy

App structure

Here's how I structure my Next.js apps. You can use this as a reference:

Copy

  • I place the UI components in the components/ui folder.

  • The rest of the components such as <PageHeader /> and <MainNav /> are placed in the components folder.

  • The lib folder contains all the utility functions. I have a utils.ts where I define the cn helper.

  • The styles folder contains the global CSS.

That's it

You can now start adding components to your project.

Copy

The command above will add the Button component to your project. You can then import it like this:

run

shadcn installing

lets install npm libraries that will help us to create the wallet connector .

at last lets add shadcn Dialog component .

First lets create wallet connect context provider and wrap the enitre app.

PreviousIntegrating Solana Wallet Adapter in a Next.js ApplicationNextGit Hub Code

Last updated