Components
Components
ZapKit ships a set of copy-paste React components distributed as a shadcn registry. Instead of importing from a package, you install components directly into your project — giving you full ownership and the freedom to customise.
Installation
Use the shadcn CLI to add any component:
npx shadcn@latest add "https://zapkit.vercel.app/r/<component-name>.json"The CLI will:
- Copy the component source into your project
- Install required shadcn primitives (button, card, tooltip, etc.)
- Install npm dependencies (
@dngbuilds/zapkit-react, etc.)
Available components
Connect
| Component | Type | Description |
|---|---|---|
| ConnectWalletButton | Component | Smart button handling the full connect / disconnect lifecycle |
| AddressBadge | Component | Truncated address badge with tooltip & copy-on-click |
| NetworkBadge | Component | Colored badge for mainnet / sepolia / devnet |
| WalletCard | Block | Card showing address, network, balances & disconnect |
Common
| Component | Type | Description |
|---|---|---|
| TokenAmount | Component | Formatted token amount with optional USD tooltip |
| TransactionStatus | Component | Inline alert for pending / confirmed / failed transactions |