4 Components

Component Showcase

Plug-and-play React components from @raga-neobank/ui powered by @raga-neobank/react hooks. Ready for production use.

@raga-neobank/uiTypeScriptTailwind CSSDark Mode

PortfolioCard

Display user portfolio with positions, P&L tracking, and bank information. Supports multiple variants and customizable display options.

Variants

Default

Raga Finance

Total Value

$18,225.00+$725.00 (+4.14%)

0x742d...bEb0

3 Positions

High Yield USDC

Base

$10,850.00

+8.50%

ETH Growth Vault

Ethereum

$4,800.00

-4.00%

Stable Yield

Polygon

$2,575.00

+3.00%

Compact

Portfolio Value

$18,225.00+4.14%

3 positions

Minimal

Header Balance

$18,225.00+4.14%

States

Loading

Error

Empty

No Positions Yet

Start earning yield by depositing into a vault. Your positions will appear here.

Interactive Demo

Options

Raga Finance

Total Value

$18,225.00+$725.00 (+4.14%)

0x742d...bEb0

3 Positions

High Yield USDC

Base

$10,850.00

+8.50%

ETH Growth Vault

Ethereum

$4,800.00

-4.00%

Stable Yield

Polygon

$2,575.00

+3.00%

VaultShowcase

Browse and filter available vaults with multiple layout options. Includes search, chain filtering, and interactive controls.

Layouts

Card (Grid)

Active

High Yield USDC

Base
Address0x1234...7890
Strategies2 active

Row (List)

High Yield USDC

Active
Base0x1234...7890

2

strategies

Compact

High Yield USDC

Base

States

Loading

Empty

No Vaults Available

There are no vaults available at this time. Check back later.

No Results

No Matching Vaults

Try adjusting your filters to find more vaults.

Interactive Demo

4 of 4 vaults

Active

High Yield USDC

Base
Address0x1234...7890
Strategies2 active
Active

ETH Growth Vault

Ethereum
Address0x2345...8901
Strategies1 active
Active

Stable Yield

Polygon
Address0x3456...9012
Inactive

Arbitrum Optimizer

Arbitrum
Address0x4567...0123
Strategies2 active

UserCard

Display user account information with wallet address, status, and metadata. Multiple variants for different contexts.

Variants

Default

Wallet Address

ActiveBank Connected

Created

Jan 15, 2024

Updated

Jun 20, 2024

Compact

0x742d35...f0bEb0

User Account

Active

Minimal

Header User

0x742d...bEb0

States

Loading

Error

Not Connected

Interactive Demo

Wallet Address

ActiveBank Connected

Created

Jan 15, 2024

Updated

Jun 20, 2024

TransactionPreview

Display transaction details before execution, including steps, gas estimates, and warnings. Track execution progress.

Variants

Default

Vault

High Yield USDC

Address

0x1234...7890

You Send

1000 USDC

You Receive

985.50 rvUSDC

Rate: 1 USDC = 0.9855 rvUSDC

Transaction Steps (2)

Total: 231.0K gas
1
Approve

Approve USDC spending

46.0K
2
Deposit

Deposit USDC into vault

185.0K
Estimated time: ~30sBalance: 5000 USDC

Compact

1000 USDC

High Yield USDC

985.50 rvUSDC

2 steps

With Warnings

Vault

High Yield USDC

Address

0x1234...7890

You Send

1000 USDC

You Receive

985.50 rvUSDC

Rate: 1 USDC = 0.9855 rvUSDC

Slippage may exceed 1% due to current market conditions

Transaction Steps (2)

Total: 231.0K gas
1
Approve

Approve USDC spending

46.0K
2
Deposit

Deposit USDC into vault

185.0K
Estimated time: ~30sBalance: 5000 USDC

Execution Flow

Simulate transaction execution by clicking the buttons below:

1
Approve

Approve USDC spending

46.0K
2
Deposit

Deposit USDC into vault

185.0K

Live Data

These components fetch real data from your configured API. Set up your environment variables to see live data.

Portfolio (Live)

User (Live)

Vaults (Live)