dAppBooster v2: faster starts, Chakra UI v3, and a one-line install
What’s new in v2
dAppBooster v2 focuses on speed to first commit. We rebuilt the UI layer on Chakra UI v3, tightened up theming, and added a one-line install so you can scaffold a clean project with your choices baked in. The docs and component tech docs were refreshed to match.
Why we moved off Styled Components
Styled Components is now in maintenance mode. The maintainer recommends not adopting it for new projects. That changed the calculus for long-lived Web3 frontends, where stability and upgrade paths matter.
Chakra UI v3 gives us a consistent, composable, and fast component system. v3 is a rewrite geared toward better performance, a more uniform API, and modern design tokens. For a starter kit, this means smaller custom surface area and fewer surprises when you scale.
Install in one line
You can bootstrap a new dAppBooster project without cloning anything manually, just run this command and follow the instructions:
pnpm dlx dappbooster
This scaffolds a fresh project with sane defaults for Web3 frontends. It ships with wallet connectivity, a modular structure, and multi-chain hooks so you can focus on your product, not your setup.
You can browse the live components demo and the documentation if you prefer to evaluate before installing.
Quick start for devs
- Run the dev server. After the script finishes:
cd <your-dapp-name>
pnpm dev
Open the provided local URL, and that's it. (*)
(*) If you opted into subgraphs, add your API key and run the codegen step. The docs walk you through the env vars and generation command.
-
Configure wallets and chains. The template ships with wagmi and viem. wagmi provides React hooks for accounts, transactions, and contracts. viem supplies a lightweight, type-safe interface to Ethereum RPC.
-
Build your first flow. Use the “My first dApp” recipe to wire up a simple WETH wrap/unwrap on Sepolia. It shows how the parts fit together fast.
-
Browse component examples. The live demo and component tech docs show patterns you can copy into your app.
What’s inside the stack
dAppBooster stays pragmatic: React and TypeScript with Vite for fast builds. On-chain integration uses wagmi and viem for typed, composable calls. Data fetching and caching runs on TanStack Query. This combination offers strong typing, cache control, and predictable network behavior out of the box.
If your app talks to multiple subgraphs, the included plugin generates typed GraphQL clients and integrates them with TanStack Query, so you get inference and cache policy in one place.
What’s next
We are shipping small improvements to the component catalog and expanding the recipes. We track feedback in the repo and the docs. If you have ideas or find quirks, open an issue or a PR. You can also follow updates from BootNode.
