Back to Dashboard

Components Library

Visual reference library of all reusable components in this project starter template. Use this page to understand available components and their variations when building new projects.

Button

Primary button component with two variants: filled (dark purple #5025B8) and outline (medium purple border #6941C6). Includes hover effects, disabled state, and consistent sizing.

File: app/components/Button.tsx
Filled Variant (Send)variant="filled"
Outline Variant (Receive)variant="outline"
Disabled Statedisabled={true}
Custom Size (Large)fontSize="18px", padding="12px 24px"
Custom Size (Small)fontSize="14px", padding="6px 12px"

MetricDisplay

Standardized metric display component for consistent KPI/metric presentation. Features fixed font size (32px), light weight (300), and consistent spacing.

File: app/components/MetricDisplay.tsx
Default (White Value)valueColor="text-white"

Total Portfolio Value

$245,680

Success ColorvalueColor="text-[var(--color-success)]"

Total Rewards (30d)

$1,850

Right AlignedclassName="text-right"

APY Average

8.2%

PanelHeader

Reusable header component for panels and cards. Supports multiple sizes, divider types (solid, gradient, dashed), and optional right actions.

File: app/components/PanelHeader.tsx
Medium Size with Solid Dividersize="medium", dividerType="solid"

Panel Title

Optional subtitle text

Large Size with Gradient Dividersize="large", dividerType="gradient"

DeFi Vaults Portfolio

Automated yield strategies

Small Size with Dashed Dividersize="small", dividerType="dashed"

Small Header

CapitalFlowCard

Interactive card displaying capital flow metrics with chart visualization. Includes period selector (7d, 30d, 90d) and bar chart showing deposits vs withdrawals. Representative of all metric cards with charts.

File: app/components/CapitalFlowCard.tsx
Full Card with ChartInteractive period selector, responsive chart

Vaults Capital Flow

+$0.00

VaultsTable

Data table component with multiple columns displaying vault information. Features panel header with gradient divider, hover effects on rows, and responsive horizontal scroll. Representative of all table structures in the project.

File: app/components/VaultsTable.tsx
Full Data TablePanelHeader, table with hover effects, risk badges

DeFi Vaults Portfolio

Automated yield strategies across multiple protocols

VaultProtocolChainStrategyTVLAPYDepositedDeposited (USD)EarnedEarned (USD)Risk LevelActions
Upshift USDC VaultUpshiftEthereumMulti-Protocol Yield$12.5M8.2%25,000 USDC$25,000164.38 USDC$164.38Medium
Upshift ETH VaultUpshiftEthereumLiquid Staking + DeFi$8.3M6.5%10.5 ETH$25,2000.34 ETH$816Low
Upshift BTC VaultUpshiftBitcoinWrapped BTC Lending$15.2M4.8%0.75 BTC$32,2500.012 BTC$516Low
Upshift Multi-Asset VaultUpshiftArbitrumAutomated Rebalancing$6.8M12.3%Mixed Assets$15,000Mixed$184.50High

TabNavigation

Tab switcher component with active state highlighting. Features underline indicator for active tab and hover effects for inactive tabs. Responsive with horizontal scroll on mobile.

File: app/components/TabNavigation.tsx
Tab Navigation BaractiveTab state, onClick handlers

BottomMetrics

Grid layout component for displaying three metric cards (CapitalFlowCard, VaultsRewardsCard, VaultsApyCard). Responsive 3-column grid that stacks on mobile. Representative of card grid patterns.

File: app/components/BottomMetrics.tsx
3-Column Metrics GridResponsive grid with gap-[var(--grid-gap)]

Vaults Capital Flow

+$0.00

Vaults Rewards

+$0.00

Vaults APY

0.00%

|

+0.00%