@compass-labs/widgets

Embeddable DeFi widgets for React applications, powered by Compass Labs.

Installation

``bash
npm install @compass-labs/widgets
`

Quick Start

`tsx
import { CompassProvider, VaultsList } from '@compass-labs/widgets';
import '@compass-labs/widgets/styles.css';

function App() {
return (
apiKey="your-compass-api-key"
defaultChain="base"
>
onDeposit={(vault, amount, txHash) => {
console.log('Deposited:', amount, 'to', vault.name);
}}
/>

);
}
`

Components

$3

Display yield-bearing vaults from protocols like Morpho.

`tsx
showApy={true}
showTvl={true}
showUserPosition={true}
assetFilter={['USDC', 'ETH', 'WBTC']}
onVaultSelect={(vault) => console.log('Selected:', vault)}
onDeposit={(vault, amount, txHash) => console.log('Deposited')}
onWithdraw={(vault, amount, txHash) => console.log('Withdrew')}
/>
`

$3

Display Aave V3 lending markets.

`tsx
showApy={true}
showUserPosition={true}
onMarketSelect={(market) => console.log('Selected:', market)}
onSupply={(market, amount, txHash) => console.log('Supplied')}
onWithdraw={(market, amount, txHash) => console.log('Withdrew')}
/>
`

$3

Display Pendle fixed-yield markets.

`tsx
showApy={true}
showExpiry={true}
showTvl={true}
onMarketSelect={(market) => console.log('Selected:', market)}
onDeposit={(market, amount, txHash) => console.log('Deposited')}
onWithdraw={(market, amount, txHash) => console.log('Withdrew')}
/>
`

Theming

Customize the look by providing a theme object:

`tsx
apiKey="your-api-key"
defaultChain="base"
theme={{
colors: {
primary: '#6366f1',
background: '#0a0a0f',
surface: '#1a1a24',
border: '#2a2a3a',
text: {
primary: '#ffffff',
secondary: '#a0a0a0',
tertiary: '#666666',
},
success: '#22c55e',
warning: '#eab308',
error: '#ef4444',
},
borderRadius: '12px',
fontFamily: 'Inter, system-ui, sans-serif',
}}
>
{/ widgets /}

`

Or use CSS variables directly:

`css
.compass-widget {
--compass-color-primary: #6366f1;
--compass-color-background: #0a0a0f;
--compass-color-surface: #1a1a24;
--compass-color-border: #2a2a3a;
--compass-color-text-primary: #ffffff;
--compass-color-text-secondary: #a0a0a0;
--compass-border-radius: 12px;
--compass-font-family: 'Inter', system-ui, sans-serif;
}
`

Requirements

- React 18+ or 19+
- @privy-io/react-auth for wallet connection
- @tanstack/react-query` for data fetching

Documentation

Full documentation available at docs.compasslabs.ai.

License

MIT