thirdweb-nextui-org-starter

Starter template to build custom UI components with thirdweb and NextUI v2.

Installation

1. Clone the template or fork

git clone https://github.com/thirdweb-example/thirdweb-nextui-org-starter.git

2. Set up environment variables

Create a file called .env.local (at the root level of your project) with the following content:

NEXT_PUBLIC_TEMPLATE_CLIENT_ID="<your-thirdweb-client-id"

To learn how to create a client ID, refer to the client documentation.

3. Install the dependencies

# npm
npm install

# yarn
yarn

# pnpm
pnpm install

Run locally

Start development server

yarn dev

Create a production build

yarn build

Preview the production build

yarn start

About this template

• Custom thirdweb Connect button built with NextUI Button

• thirdweb Bobbie Component to generate gradiant based on wallet address

• useConnectModal hook that allows you to open the Connect UI in a Modal to prompt the user to connect wallet.

• useWalletDetailsModal hook to open the Wallet Details Modal that shows various information about the connected wallet and allows users to perform various actions like sending funds, receiving funds, switching networks, Buying tokens, etc.

Custom component found in components/navbar.tsx

Resources

• Documentation
• Templates
• YouTube
• Blog

Need help?

For help or feedback, please visit our support site