Start with real components.
Eleven native Figma variants with editable text, Auto Layout and linked examples. Change a state without rebuilding the card.
.fig · variants · instancesFigma UI kit & React components
Wallet transaction UI
for Figma and React.
Native Figma components, a typed React controller and matching copy for an eleven-state transfer flow. Give pending, unknown and failed transfers a clear next step.
Personal 39 USDC · Team 119 USDC.
Compare the free Starter and Core Kit
Result unknown
We cannot confirm the result yet
A response is missing or could not be verified. The original request may still complete.
Transfer amount12.5 USDC
- Network
- Base Sepolia
- Request
- Original request retained
Recovery guidance
Resolve the existing request before sending again. A timeout is not proof that the transfer failed.
- Next action
- Check existing request
State anatomy · actual Core copy
Native FigmaReact + TypeScriptState & copy catalogBase Sepolia example
Made to move from design to code
One flow.
Shared understanding.
Carry the same states, messages and recovery actions through your design file and implementation.
<TransactionFlow
controller={controller}
asset={asset}
network={network}
/>Keep the request intact.
React components and a typed controller preserve the original request through asynchronous responses, reload and recovery.
React · TypeScript · scoped CSSReview→Submit→Verify
Work from an integration.
A standalone Base Sepolia example, state catalog, copy CSV and sync checks connect the interface to a concrete transfer flow.
Example · JSON · CSV · guideChoose your starting point
A free reference.
A complete Core flow.
Try the state examples first. Choose Core when you need native design components and request behavior that work together.
| Included | Free Starter | Core Kit |
|---|---|---|
| Design | Editable SVG reference board | Native .fig library, variants and Auto Layout |
| React | One React card with Tailwind styling | React components and a typed request controller |
| Flow | Eight independent state examples | Eleven connected states with request recovery |
| Example | Display examples and copy data | Base Sepolia transfer example and sync checks |
Core includes one English theme and a focused browser-wallet example. Read compatibility and integration scope.
See the design file
The native components,
up close.
These are actual exports from the Core Figma file. Open an image to inspect its text, spacing and long transaction IDs. Screenshots show the design; they do not operate a wallet.
The file contains eleven editable variants and linked instances. Figma’s State property changes the instance; Auto Layout and text layers remain editable. See compatibility and integration scope ↗
From the installed example
One request.
Even when it takes longer.
Follow a delayed wallet response through five recorded moments. These images show the included React component running with a simulated wallet and network.
Recorded example, simulated wallet/network
No live wallet connection or funds. Select a step to inspect what the buyer example displayed.
Read the example’s integration scope ↗
Look inside the lifecycle
Read every state.
Select a moment to see its exact message, recovery guidance and next action. This is a copy explorer; it does not connect a wallet.
transaction.unknown
Result unknownWe cannot confirm the result yet
A response is missing or could not be verified. The original request may still complete.
Recovery guidance
Resolve the existing request before sending again. A timeout is not proof that the transfer failed.
Next action
Includes uncertainty, rejection, reversion and replacement — each with its own response.
Built for a focused job
For the flow your
team is shipping.
Use Core as the design and interface layer for a wallet or token-transfer experience. Adjust its styling and connect it to your application's state.
The included integration targets direct USDC transfers on Base Sepolia with a browser EOA wallet. Your application owns its network configuration, trusted recovery records, receipt verification and order fulfillment.
Read the integration boundaryChoose who will use it
Same kit.
The right license.
Keep the purchased version. Core updates released within 12 months are included. Pay once in native USDC on Base.
Personal
For one individual
39USDC
One person accessing or editing the source files.
- Full Core Kit · native Figma and code
- Unlimited own and client end products
- 12 months of Core package updates
- Purchase recovery with your wallet
Team
For one organization
119USDC
Up to 10 active editors, including your contractors.
- Full Core Kit · native Figma and code
- Unlimited own and client end products
- 12 months of Core package updates
- Purchase recovery with your wallet
Commercial use included. Reusable source redistribution and resale are excluded. Network fees are separate and shown in your wallet.
Read the full license ↗Try the smaller starting point
Meet the free starter.
Eight state examples, an editable SVG board, React/Tailwind source and copy data. A separate sample with its own free licenses.