React启动器

React-with-Vitejs-for-Thirdweb-to-Starter-Web3 — React 启动器模板

作者 nidz-the-fact

基于 React 与 Vite 的 Web3 入门模板，集成 Thirdweb、Wagmi 与 Viem，并搭配 Tailwind、daisyUI 和 Chakra UI，用于搭建链上应用前端。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

2 个预览视图

桌面端首页1 / 2

React-with-Vitejs-for-Thirdweb-to-Starter-Web3 · 桌面端首页

访问演示网站在新标签页打开

桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-15查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

基于 React 与 Vite 的前端起始结构

集成 Thirdweb SDK 用于连接 Web3 区块链

集成 Wagmi 与 Viem，并在 main.tsx 提供智能合约读取与调用示例

样式层包含 Tailwind、daisyUI 与 Chakra UI

README 提供从环境变量配置到构建部署的分步设置说明

模板详细介绍

该模板是一个面向 Web3 开发的 React + Vite 起始项目，目标是为不同经验水平的开发者提供构建链上应用的基础结构。README 说明其集成 Thirdweb SDK 用于连接 Web3 区块链，同时引入 Wagmi 与 Viem 处理智能合约的读取与调用，并提供了相应示例。样式层包含 Tailwind、daisyUI 和 Chakra UI。README 未提供具体框架版本号、性能数据或生产环境验证说明。

使用流程方面，README 列出：在 .env 中定义 API、执行 npm install 与 npm run dev 启动开发服务器、在 Navbar 组件中调整网络设置并补充网络附加信息、按页面需要管理 src/components 下的组件、参考 main.tsx 中 Wagmi 与 Viem 读取和调用智能合约的示例，最后执行 npm run build 生成 dist 文件并上传部署。部署方式支持通过 npx degit 或 git clone 获取项目。README 未说明测试、代码规范或 CI 配置。

React启动器

适合你的项目吗？

适用场景

快速搭建一个连接 Thirdweb 的 Web3 前端项目
在 React + Vite 项目中参考 Wagmi 与 Viem 的合约读写示例
需要同时使用 Tailwind、daisyUI 与 Chakra UI 的界面开发
通过 degit 或 git clone 获取模板并作为新项目起点

适合人群

希望以 React 和 Vite 起步开发 Web3 前端的开发者
需要 Thirdweb、Wagmi、Viem 组合示例的开发者
偏好 Tailwind、daisyUI 或 Chakra UI 的界面开发者

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

1
在 .env 中定义 API（README 未列出具体变量名）
2
执行 npm install 与 npm run dev 启动开发服务器
3
在 src/components/Navbar.tsx 中调整网络设置并补充网络附加信息
4
参考 src/main.tsx 中 Wagmi 与 Viem 读取和调用智能合约的示例
5
执行 npm run build 生成 dist 文件并上传部署；也可用 npx degit 或 git clone 获取项目

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 Apache-2.0 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

允许免费使用、修改、商用和分发；分发时需随附 Apache-2.0 许可证。
修改过的文件需显著标明改动，并保留相关版权、专利、商标及归属声明。
若原项目附有 NOTICE 文件，分发衍生作品时需保留其中适用的归属声明。
许可包含适用的贡献者专利授权；发起许可所述专利诉讼会终止该专利授权，且不授予商标使用权。
代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 Apache-2.0 许可判断。
域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
使用前需在 .env 文件中定义 API（README 未列出具体变量名），即需要自行配置第三方服务凭据。
项目依赖 Thirdweb SDK 连接 Web3 区块链，使用相关功能需遵循 Thirdweb 服务条款并可能需要其账号或 API 密钥。
需在 src/components/Navbar.tsx 中手动调整网络设置，默认配置不适用于所有链。
需在 Navbar 组件中补充目标网络的附加信息，否则无法正确连接自定义网络。

查看原文依据

no-charge, royalty-free, irrevocable copyright license
许可证原文

├── <a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/.env">1.Define api in .env</a>
README 原文

│ ├── <a href="https://portal.thirdweb.com/typescript/v5">Thirdweb</a>: Connect web3 Blockchain with Thirdweb SDK.
README 原文

├── <a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/src/components/Navbar.tsx#L9C1-L24C4">3.Network adjustment.</a>
README 原文

├── <a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/src/components/Navbar.tsx#L48C17-L69C23">4.Set additional information for your network.</a>
README 原文

https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/LICENSE.md https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-15。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台: GitHub
资料与维护参考分: 资料一般 · 68 / 100
技术栈: React
网站类型: 启动器

这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间: 2024-06-21
截图检查日期: 2026-10-15

已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 React。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: codex-user-requested-batch-review-20261015 · 2026-10-15

查看当时使用的来源资料

SHA-256: 1d145d0a9b050b16dc8d0ffcd9c3c76bf1acff9bb0945066520ff1325d28252c

2026-10-15T01:17:41.549Z

来源文件 / 仓库

# React-with-Vitejs-for-Thirdweb-to-Starter-Web3
Template starter easily Developer friendly every knowledge level to build onchain Web3 applications with Thirdweb. (https://portal.thirdweb.com/)

<br/>


<p align="center">
  <a href="https://www.youtube.com/watch?v=IliPcMyJDjI">
      <picture>
        <img alt="logo" src="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/youtube.png" width="40%" height="90">
      </picture>
    🧑‍💻
</a>
</p>

<div align="center">
<a href="https://twitter.com/TeeraponNidz" ><img src="https://img.shields.io/twitter/follow/TeeraponNidz.svg?style=social" /></a>
<a href="https://www.facebook.com/nid.muhammad" ><img src="https://img.shields.io/badge/Nidz-Facebook-blue" /></a>

<a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/stargazers"><img src="https://img.shields.io/github/stars/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3" alt="Stars Badge"/></a>
<a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/network/members"><img src="https://img.shields.io/github/forks/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3" alt="Forks Badge"/></a>
<a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/pulls"><img src="https://img.shields.io/github/issues-pr/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3" alt="Pull Requests Badge"/></a>
<a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/issues"><img src="https://img.shields.io/github/issues/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3" alt="Issues Badge"/></a>
<a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/graphs/contributors"><img alt="GitHub contributors" src="https://img.shields.io/github/contributors/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3?color=2b9348"></a>
</div>

Libraries, frameworks that are perfect and comprehensive. Can be used in a variety of ways.

<pre>
├── <b>📖 Libraries, frameworks</b>
│   ├── <b><a href="https://vitejs.dev/guide/#scaffolding-your-first-vite-project">React</a></b>: with Vitejs.
│   ├─── <b>CSS</b>
│   ├──── <b><a href="https://tailwindcss.com/docs/guides/vite">Tailwind</a></b>: Css styles.
│   ├──── <b><a href="https://daisyui.com/docs/install/">daisyUI</a></b>: Css styles + plugin.
│   ├──── <b><a href="https://v2.chakra-ui.com/getting-started/vite-guide">Chakra UI</a></b>: UI Css speed.
│   ├── <b><a href="https://portal.thirdweb.com/typescript/v5">Thirdweb</a></b>: Connect web3 Blockchain with Thirdweb SDK.
│   ├── <b><a href="https://wagmi.sh/react/getting-started">Wagmi</a></b>: Type Safe, Extensible, and Modular by design. Build high-performance blockchain frontends.
│   ├── <b><a href="https://viem.sh/docs/installation">Viem</a></b>: Build reliable apps & libraries with lightweight, composable, and type-safe modules that interface with Ethereum.
</pre>

## 🔧 Stacks

<a href="https://react.dev/">
  <picture>
    <img alt="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQcR5U16C8yXgBpl7-Bc7Itjx3_LRl425zINA&s" width="auto" height="50">
  </picture>
</a>
<a href="https://tailwindcss.com/">
  <picture>
    <img alt="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTSDKn3vA2YUbXzN0ZC3gALWJ08gJN-Drl15w&s" width="auto" height="50">
  </picture>
</a>
<a href="https://daisyui.com/">
  <picture>
    <img alt="logo" src="https://raw.githubusercontent.com/saadeghi/daisyui-images/master/images/daisyui-logo/favicon-192.png" width="auto" height="50">
  </picture>
</a>
<a href="https://v2.chakra-ui.com/">
  <picture>
    <img alt="logo" src="https://pbs.twimg.com/profile_images/1244925541448286208/rzylUjaf_400x400.jpg" width="auto" height="50">
  </picture>
</a>
<a href="https://thirdweb.com/">
  <picture>
    <img alt="logo" src="https://avatars.githubusercontent.com/u/79496167?s=280&v=4" width="auto" height="50">
  </picture>
</a>
<a href="https://wagmi.sh/">
  <picture>
    <img alt="logo" src="https://moralis.io/wp-content/uploads/web3wiki/196-wagmi/637e6c001c60c5e2d8078d8c_wOdHswYe73lnRqkKuJDsSLgwRkQ9Kt831G_9nSGTEFw.png" width="auto" height="50">
  </picture>
</a>
<a href="https://viem.sh/">
  <picture>
    <img alt="logo" src="https://viem.sh/icon-light.png" width="auto" height="50">
  </picture>
</a>

## ⚙️ Settings

<pre>
├── <a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/.env"><b>1.Define api in .env</b></a>
├── <a href=""><b>2.`npm install` & `npm run dev` : To start the server in development.</b></a>
├── <a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/src/components/Navbar.tsx#L9C1-L24C4"><b>3.Network adjustment.</b></a>
├── <a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/src/components/Navbar.tsx#L48C17-L69C23"><b>4.Set additional information for your network.</b></a>
├── <a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/tree/main/src/components"><b>5.Manage components for each page as needed.</b></a>
├── <a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/blob/main/src/main.tsx#L8C10-L8C24"><b>6.Example of reading and calling functions from Smart contract with Wagmi & Viem.</b></a>
├── <a href=""><b>7.`npm run build` : You will get a dist file and upload it to the website.</b></a>
</pre>

## ⚒️ Use deployment

```
npx degit https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3 your-name-project
```
or
```
git clone https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3.git
```

---

💻💖☕ by [Nidz The Fact](https://linktr.ee/nid_z) 🙏
<br /><br />
<a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/stargazers"><img src="https://img.shields.io/github/stars/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3" alt="Stars Badge"/></a>
<a href="https://github.com/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3/network/members"><img src="https://img.shields.io/github/forks/nidz-the-fact/React-with-Vitejs-for-Thirdweb-to-Starter-Web3" alt="Forks Badge"/></a>
```
0x361ef0829E71b3bBc806C224ffcecc97813f93cB
```

反馈内容错误