@vechain/vechain-widgets

A collection of standalone React components designed to bring VeChain ecosystem functionality to any dApp with minimal integration effort.

📦 Available Exports

This package uses subpath exports to modularize functionality. Import only what you need:

// For the governance widget
import { GovernanceWidget } from '@vechain/vechain-widgets/governance';

🧩 Widgets

Governance Widget

A comprehensive governance component that enables:

Token conversion (B3TR ↔ VOT3)
Vote on allocation rounds
Claiming allocation round rewards
Wallet connection via VeChain Kit

See full documentation

import { GovernanceWidget } from '@vechain/vechain-widgets/governance';

<GovernanceWidget 
  appId="your-app-id"
  networkType="test" // or "main" or "solo"
  theme="light" // or "dark"
  primaryColor="#0084e6"
  language="en" // or any other language code
/>

📥 Installation

npm install @vechain/vechain-widgets

Peer Dependencies

npm install @chakra-ui/react @emotion/react @emotion/styled @tanstack/react-query

For the Governance widget, you'll also need:

npm install @vechain/vechain-kit

📋 Usage

All widgets are built with self-contained styles that won't conflict with your application, ensuring a consistent look and feel while maintaining your app's design system.

For detailed usage instructions, refer to each widget's documentation.

🔧 Development

# Build the package
yarn build

# Run in development mode with file watching
yarn dev

# Run type checking
yarn typecheck

# Run linting
yarn lint

📜 License

MIT