15+ Web 3 Blocks based on shadcn/ui
15 blocks across 3 categories · free and PRO · React, Next.js, Tailwind CSS
Ship decentralized app interfaces faster with shadcn/ui Web3 components: wallet connection and login screens with QR-code pairing, crypto price and staking charts built on Recharts, NFT and token cards, and transaction displays. Each block is a React + Tailwind CSS component composed from shadcn/ui primitives, compatible with Next.js, Vite, and Remix.
The blocks are wallet-library agnostic, they render the interface while you connect MetaMask, Coinbase Wallet, Trust Wallet, or any wagmi/viem setup underneath. Copy the code or install with one CLI command and customize freely.
Frequently asked questions
What do the shadcn Web3 components include?
Wallet login flows (including QR-code and multi-wallet selection screens), cryptocurrency charts for prices, staking, and transactions, and Web3 cards for NFTs, tokens, and wallet balances, all built on shadcn/ui and Tailwind CSS.
Do these blocks require a specific wallet library?
No. They are pure UI components with mock data, designed to plug into any stack, wagmi, viem, ethers.js, or a custom provider. You replace the simulated handlers with your wallet logic.
How do I install a Web3 block?
Run npx @creative-tim/ui@latest add <block-name>, or npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json with the shadcn CLI. Dependencies like Card, Button, and chart primitives install automatically.
What charting library do the crypto charts use?
The Web3 charts are built with Recharts through the shadcn/ui chart wrapper, so they inherit your theme tokens and work in both light and dark mode.
Can I use these components in Next.js App Router?
Yes. All blocks are client components written in TypeScript and tested with the Next.js App Router; they also work in Vite and Remix projects.
Are the Web3 blocks free?
Many are free and open source; PRO blocks install the same way with a Creative Tim API key from creative-tim.com/ui.