Ethereum staking
Liquid staking
APY
3.82%
- TVL
- $1.2B
- Unstaking
- Flexible
beUI Pro for mobile presale is open — Lifetime $99 for the first 100 licenses
Crypto Wallet
6 variants
Wallet interfaces for portfolio balances, asset details, and transaction activity with integration-ready callbacks.
Swap, send, and buy
crypto-trade-widget.tsxOne wallet card for swapping, sending, and buying tokens, with flipping token pills, rolling quotes, recent contacts, and confirmation states.
You pay
$0.003.184 ETH
You receive
$0.006,240.5 USDC
TSXcomponents/previews/premium/crypto-trade-widget-preview.tsx
"use client";
import { CryptoTradeWidget } from "@/components/premium/crypto-wallet/crypto-trade-widget";
export function CryptoTradeWidgetPreview() {
return <CryptoTradeWidget demo />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/crypto-trade-widget
Cross-chain bridge
crypto-bridge.tsxBridge any token on any network to any token on another, with a recipient field and contacts, a route picker that shows what each route delivers, and a live transfer view that fills stage by stage.
Bridge
FromEthereum0x7a3d…b41c
$0.003.184 ETH
ToBase
$0.00Minimum received 0
TSXcomponents/previews/premium/crypto-bridge-preview.tsx
"use client";
import { CryptoBridge } from "@/components/premium/crypto-wallet/crypto-bridge";
export function CryptoBridgePreview() {
return <CryptoBridge />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/crypto-bridge
Portfolio overview
crypto-portfolio.tsxA wallet overview with a scrubbable balance chart, an allocation meter, privacy mode, and holdings with sparklines and network badges.
Personal wallet
Total balance
$10,928.23
+$994.47 (10.01%) · 1W
Your assets
5 assets- USD Coin4,280.5 USDC$4,280.50−0.01%
- Ethereum1.42 ETH$3,408.00+4.67%
- Wrapped Bitcoin0.035 WBTC$2,100.00−2.91%
- Chainlink42.6 LINK$631.33+5.11%
- Arbitrum820 ARB$508.40−6.06%
Demo portfolio · Sample balances and prices
TSXcomponents/previews/premium/crypto-portfolio-preview.tsx
"use client";
import { useState } from "react";
import {
AnimatedModal,
AnimatedModalDescription,
AnimatedModalTitle,
} from "@/components/motion/animated-modal";
import { Button } from "@/components/motion/button";
import { CryptoPortfolio } from "@/components/premium/crypto-wallet/crypto-portfolio";
export function CryptoPortfolioPreview() {
const [action, setAction] = useState<"Send" | "Receive" | "Settings" | null>(
null,
);
return (
<>
<CryptoPortfolio
demo
walletAddress="0x0000000000000000000000000000000000003567"
onSettings={() => setAction("Settings")}
onSend={() => setAction("Send")}
onReceive={() => setAction("Receive")}
/>
<AnimatedModal
open={action !== null}
onOpenChange={(open) => {
if (!open) setAction(null);
}}
panelClassName="max-w-sm rounded-2xl p-6"
>
<AnimatedModalTitle className="text-xl font-medium">
{action} preview
</AnimatedModalTitle>
<AnimatedModalDescription className="mt-3 text-sm leading-6 text-muted-foreground">
This sample wallet lets you explore the interface. Sending and
receiving become available when your app connects a wallet.
</AnimatedModalDescription>
<Button
onClick={() => setAction(null)}
className="mt-5 h-9 rounded-full"
>
Got it
</Button>
</AnimatedModal>
</>
);
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/crypto-portfolio
Staking vaults
crypto-staking.tsxAn earn dashboard with live-ticking rewards, claimable positions, filterable vault cards with APY sparklines, and a stake dialog with projected reward bars.
Earn
- Total staked
- $32,654.75
- Rewards earned
- $221.5812
- Average APY
- 4.02%
Your positions
Ethereum staking
12.50 ETH · $30,154.75
+0.08421337
ETH · 3.82% APY
Stable yield
2,500.00 USDC · $2,500.00
+18.42651
USDC · 6.41% APY
Vaults
- Low risk
- Low risk
Stable yield
Overcollateralized lending
APY
6.41%
- TVL
- $812.0M
- Unstaking
- Flexible
- Medium risk
Arbitrum delegation
Governance staking
APY
7.24%
- TVL
- $96.4M
- Unstaking
- 21 days
- Medium risk
Chainlink pool
Oracle network staking
APY
4.50%
- TVL
- $638.0M
- Unstaking
- 28 days
- High risk
Bitcoin basis vault
Delta-neutral basis trade
APY
9.86%
- TVL
- $58.2M
- Unstaking
- 7 days
- Medium risk
Optimism staking
Sequencer rewards
APY
5.12%
- TVL
- $41.7M
- Unstaking
- 14 days
Demo vaults · Sample yields, balances, and rewards
TSXcomponents/previews/premium/crypto-staking-preview.tsx
"use client";
import { CryptoStaking } from "@/components/premium/crypto-wallet/crypto-staking";
export function CryptoStakingPreview() {
return <CryptoStaking demo />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/crypto-staking
Asset detail
crypto-asset-detail.tsxAn asset page with a scrubbable price chart, a period range marker, your position and returns, and market stat tiles.
Ethereum
ETH · Ethereum
Current price
$2,400.00
+$218.40 (10.01%) · 1W
Your position
$3,408.00
1.42 ETH
Price range
1WLow$2,181.60High$2,400.00
Performance
All timeTotal return
+$611.50
Average cost
$2,100.00
- Unrealized return
- +$426.00 (14.29%)
- Realized return
- +$185.50
Stats
- Market cap
- $288.6B
- Fully diluted valuation
- $288.6B
- 24h volume
- $14.2B
- Circulating supply
- 120.2M ETH
- All-time high
- $4,891.70
About Ethereum
Ethereum is a network for apps, digital assets, and smart contracts. ETH is its native asset, used to pay network fees and help secure the network through staking.
Demo asset · Sample prices and balance
TSXcomponents/previews/premium/crypto-asset-detail-preview.tsx
"use client";
import { useState } from "react";
import {
AnimatedModal,
AnimatedModalDescription,
AnimatedModalTitle,
} from "@/components/motion/animated-modal";
import { Button } from "@/components/motion/button";
import { CryptoAssetDetail } from "@/components/premium/crypto-wallet/crypto-asset-detail";
export function CryptoAssetDetailPreview() {
const [action, setAction] = useState<"Send" | "Receive" | null>(null);
return (
<>
<CryptoAssetDetail
demo
performance={{
averageCost: 2100,
unrealizedReturn: 426,
unrealizedPercent: 14.29,
realizedReturn: 185.5,
}}
stats={[
{ label: "Market cap", value: "$288.6B" },
{ label: "Fully diluted valuation", value: "$288.6B" },
{ label: "24h volume", value: "$14.2B" },
{ label: "Circulating supply", value: "120.2M ETH" },
{ label: "All-time high", value: "$4,891.70" },
]}
onSend={() => setAction("Send")}
onReceive={() => setAction("Receive")}
/>
<AnimatedModal
open={action !== null}
onOpenChange={(open) => {
if (!open) setAction(null);
}}
panelClassName="max-w-sm rounded-2xl p-6"
>
<AnimatedModalTitle className="text-xl font-medium">
{action} preview
</AnimatedModalTitle>
<AnimatedModalDescription className="mt-3 text-sm leading-6 text-muted-foreground">
This sample wallet lets you explore the interface. Sending and
receiving become available when your app connects a wallet.
</AnimatedModalDescription>
<Button
onClick={() => setAction(null)}
className="mt-5 h-9 rounded-full"
>
Got it
</Button>
</AnimatedModal>
</>
);
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/crypto-asset-detail
Transaction activity
crypto-activity.tsxSearchable activity with status tabs and counts, paired token marks for swaps, and a details sheet with a live status timeline.
Activity
8 transactionsToday
- Swapped ETH for USDCEthereum8:42 AM+358.92 USDCPending
- Received USDCFrom 0x8b3f…e1f27:15 AM+500 USDC$500.00
This week
- Sent ETHTo 0x51ac…4b3c3:30 PM−0.08 ETH$192.00
- Received ARBFrom 0xc0ff…c9d89:05 AM+320 ARB$198.40
September
- Swapped USDC for WBTCEthereum10:20 AM+0.00415 WBTCFailed
August
- Swapped USDC for LINKEthereum2:10 PM+42.6 LINK−630 USDC
- Received ETHFrom Ledger10:00 AM+0.6 ETH$1,440.00
- Sent USDCTo Demo recipient10:00 AM−250 USDC$250.00
Demo activity · No live wallet transactions
TSXcomponents/previews/premium/crypto-activity-preview.tsx
"use client";
import { CryptoActivity } from "@/components/premium/crypto-wallet/crypto-activity";
export function CryptoActivityPreview() {
return <CryptoActivity demo />;
}
Source code is locked
Get access to install premium components and view the full source.
Open dashboardInstall
$ bunx --bun shadcn add @beui-pro/crypto-activity