search

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 shadcnarrow-up-right , Shadcn provides reusable components that compatible with tailwind css . Its a open source project.

hashtag
Run the CLI

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

hashtag
Configure components.json

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

Copy

hashtag
Fonts

I use Interarrow-up-right 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

hashtag
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.

hashtag
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

hashtag
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