next-wagmi-shadcn

A simple starter template for Web3 dApps using Next.js 15, Wagmi, RainbowKit, and Shadcn for styling. This package helps developers skip the tedious setup and get straight to building!

Features

1. Next.js 15
2. TailwindCSS & Shadcn for modern UI styling
3. Wagmi for blockchain interaction
4. RainbowKit for Web3 wallet connection

Installation and Usage

You can quickly scaffold a new Web3 project with:

npx create-next-wagmi-shadcn

cd <project_name>

npm run dev

Wallet Connection

RainbowKit is pre-configured for wallet connection. You can find the setup inside app/providers.tsx.

UI Components with Shadcn

Shadcn components are already set up. Add more by using:

npx shadcn@latest add <component>

Use them by importing e.g,

import { Button } from "@/components/ui/button"

For more info visit their documentation at https://ui.shadcn.com/docs/components/button

Configuration

1. Update your Tailwind config in tailwind.config.ts if you need customization.
2. Modify RainbowKit settings in providers.tsx to match your project needs.
3. Add custom UI components using ShadCN.

NOTE:

Remember to add use client in every component that uses a wagmi hook such as useWriteContract or useReadContract. This is very important otherwise your app won't work as intended.

Contribution

Feel free to contribute or report any issues.

Also, kindly star this project on Github if you find it helpful :D

https://github.com/Felista-Njeri/next-wagmi-shadcn