w3-kit

Open-source developer tools · 2024

React components for Web3 apps, with a typed chain and token registry and a CLI that copies the code into your project.

The project

Role: Creator & developer
Stack: React, TypeScript, Tailwind, Vite, Solidity
Links: Live site Source code

What it is

w3-kit is an open-source toolkit for building Web3 apps. The core is a React component library for dApps (wallet connection, transaction states, token inputs), shipped with a CLI and a registry so components are copied into your project the way shadcn/ui does it. The ecosystem now includes 27 live React components, a typed registry of chains and token addresses, project templates and Solana programs.

What I did

I started and maintain the project: the live component gallery at ui.w3-kit.com, the documentation at docs.w3-kit.com, the CLI and typed registry, the marketing site at w3-kit.com, and the GitHub organisation that holds the separate repos. Everything is MIT-licensed.

What was hard

Keeping a copy-paste component library honest across wallets and chains. Each component has to work with whatever provider the app already uses, degrade when a wallet is missing, and stay small enough that copying it in is still a good idea.

Outcome

Public on GitHub under the w3-kit organisation. Start a project with npx w3-kit init, or add individual components and keep the source in your own app. The gallery runs the actual components with sample data.

Design language

A shared visual language across the component gallery, documentation and registry. Working components do the explaining.

View the original design guide ↗

Web3 components for React apps.

Every state of a transaction, handled.

Explore w3-kit

Geist

One type family. A clear change of scale.

Aa Bb Cc Dd
0123456789

Colour in context

The published palette and the role of each colour.

Ground
#FFFFFF
55% · the page
Ink
#0A0A0A
25% · text and dark fields
Tone
#F0F0F0
10% · panels and fields
Tone 2
#E4E4E4
4% · hover and alternate rows
Soft ink
#5C5C5C
3% · secondary text
Purple
#5554D9
3% · logo and primary action

Behind the choices

One family, five sizes

Geist carries the interface. Geist Mono is reserved for real code. Tabular figures keep amounts and addresses easy to scan.

Purple means act

The brand accent belongs to the logo and the primary action. Buttons have square corners, a 44–48px height and a small press response.

Motion that settles

Section entrances move 24px over 700ms, staggered by 80ms. Reduced motion presents the finished layout without travel.

Code you can keep

The gallery runs the actual React components with sample data. The CLI copies a component into your project so its source stays yours to change, alongside a typed registry of chains and token addresses.

The live React component gallery, shown with sample data.