Avon MegaVault Widget

Initialising Vault Session

Theme Playground

Swap between presets and tweak brand colors live. Drop this widget into any app and feed it the palette you need.

Presets

Customize

Widget background

Border

Primary text

Secondary text

Accent A

Accent B

Tag background

Tab Active BG

Tab Active Text

Tab Inactive BG

Tab Inactive Text

Tab List BG

Input Card BG

Stats Card BG

Stats Heading

Stats Subheading

Action BTN BG

Action BTN Text

Secondary BTN BG

Secondary BTN Text

Slider Track BG

Slider Thumb BG

Slider Tooltip BG

Slider Tooltip Text

Success

Error

Pending

Primary Font Class

Secondary Font Class

Corner Radius

Install & Embed

Install the widget package so your app can render the component.
```
pnpm i @avon_xyz/widget
# or
npm install @avon_xyz/widget
# or
yarn add @avon_xyz/widget
```
Import the prebuilt widget styles once (for example in your global stylesheet or _app.tsx):
```
import "@avon_xyz/widget/styles.css";
```
Tweak the palette above, then copy the snippet below to paste into your product just like in the docs.

Embed snippet

<MegaVaultPositionWidget
  chainId={4326 | 6343}
  referrerAddress="0x..."
  appName="My App"
  widgetBackground="#ffffff"
  borderColor="#dedede"
  textPrimary="#000000"
  textSecondary="#000000"
  accent="#000000"
  accentSecondary="#db3069"
  tagBackground="#dedede"
  tabActiveBackground="#000000"
  tabActiveText="#ffffff"
  tabInactiveBackground="transparent"
  tabInactiveText="#000000"
  tabListBackground="#dedede"
  inputCardBackground="#fafafa"
  secondaryCardBackground="#fafafa"
  secondaryCardHeading="#000000"
  secondaryCardSubheading="#000000"
  actionButtonBackground="#000000"
  actionButtonText="#ffffff"
  secondaryButtonBackground="#ffffff"
  secondaryButtonText="#000000"
  sliderTrackBackground="#ffffff"
  sliderThumbBackground="#000000"
  sliderTooltipBackground="#000000"
  sliderTooltipText="#ffffff"
  success="#0f9d58"
  error="#e63946"
  pending="#000000"
  primaryFontClass=""
  secondaryFontClass="font-supply-mono"
  borderRadius="12px"
  onConnectWallet={() => {
    // add fn to open wallet modal here
  }}
/>