@thru/design

Every component exported from @thru/design/web, grouped by section.

Actions

Button — variants
Button — sizes & disabled

Forms

Input
Select
Checkbox
Switch
RadioGroup
Toggle / ToggleGroup
NumberField
OTPField
Slider
slippage40
Field / Fieldset / Form
Connection

Used for read calls only.

Overlays

Dialog
AlertDialog
Popover
Tooltip (wrapped in Provider)
PreviewCard
Combobox
Autocomplete
Menu

Navigation & Disclosure

Tabs

Overview panel content.

Accordion

Collapsible
NavigationMenu
ScrollArea
Toolbar

Display

Card — variants
Default

Token-driven surface.

Elevated

Raised surface.

Outlined

Bordered surface.

Tag — tones
neutraldarkbrickskygrassyellow
Avatar
LHTN
Progress
deploying
x
Meter
blockspace used
x
Separator
Above
Below
AB
Spinner
Address — truncated identifier + copy
tao8TehQ…9UhIPh-stao8TehQ…9UhIPh-sthru.system
Timestamp

Jun 27, 2024, 12:00:00 AM

2 minutes ago

2026-06-29 00:00:00 UTC

Banner — wing bar
Skeleton
Detail — label / value rows
balance12.40 THRU
ownertao8TehQ…9UhIPh-s
executableyes

Theme

Light

light
Default card

Semantic tokens drive this surface.

deploying
x

Dark

dark
Default card

Semantic tokens drive this surface.

deploying
x

Wallet

Disc
ΞB₿
ChainIcon / TokenIcon (brand logos where the registry has one)
EBSABPΞ$₿₮
ButtonArea
CopyButton
Spacer (between two boxes)
leftright
ShowAfter (fades in after 300ms)
visible
ThemeSwitch

current: light

Balance (click the amount to refresh → spinner)
ΞA
Ether
on Arbitrum
₿P
Wrapped BTC
on Polygon
₮B
Tether
on Base
ChainsPath
ΞEthereum
BΞEthereum
Details
Deposit
Deposit crypto
taAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMD
PresetsInput
$10$50$100
Frame + Screen (composed wallet surface)
app.thru.orgmainnet
Send funds
Choose an amount and destination.
ΞEthereum

Wallet surfaces

ConnectButton — sizes
ConnectButton — variants
ConnectButton — loading
DepositButton — sizes
DepositButton — variants
DepositButton — with balance
DepositButton — loading
DepositButton — light and dark
ConnectButton — connected (chip + account menu)
ConnectButton — menu (switch account swaps the chip)
Dove — sizes, draw-on, streaks, inherit color
Brand marks — ThruDisc / ThruWordmark / PoweredBy
Thruthru
Powered bythru
Steps / Checklist
Passkey created
Deploying account
Connecting to Meridian
  • See your address and balances
  • Ask you to approve transactions
TxTree — nested collapsible review tree
fee_payertaFEEpay…3xK9Qd
fee0 · sponsored
compute_units300,000,000 CU
state_units10,000
memory_units10,000
expires_after100 slots
program_idx12
data_size64
meridian_router::swap_exact_in
  amount_in    250000000                                  u64     // 250.00 USDC
  min_out      81200000000000000                          u64     // 0.0812 ETH
  pool         taP0oLX7rQ2mK9vN4bH8yT3cW6dJ1sF5gA0eZ9qWn   pubkey
  recipient    ta3O0xtsQ9mKfL2pR7vWcE4yHbN8dJ6gT1uZhFavv   pubkey
  deadline     1789000420                                 i64     // in 46 s
data0x7f3a9c…c21e
WalletOverlay — the in-situ flow (click to run; scrim / Esc closes)
WalletSheet — Add funds accordion (the rail unfolds under its row)
meridian.xyzmainnet
Add funds
Choose how to fund your Thru Wallet. Whatever you send, it arrives as $.
Network
Your Base address
0x4f1d8c2ab7e93f60d15c7a2e9b08d4f36a1c5e72
Deposits land inMain · taAAAA…AAMD
WalletSheet — every screen

signin

meridian.xyzmainnet
Thru Wallet
Sign in to Meridian
Powered bythru

loading · sign up

meridian.xyzmainnet
Creating your account
Approve the passkey prompt from your browser.
Passkey created
Deploying account
Connecting to Meridian
Powered bythru

permissions

meridian.xyzmainnet
Connect to Meridian
meridian.xyz is asking to:
  • See your address and balances
  • Ask you to approve transactions
  • Spend up to 50 USDC per day without asking

connected

meridian.xyzmainnet
Connected
You’re signed in to Meridian.

error

meridian.xyzmainnet
Couldn’t sign in
The passkey request was cancelled or timed out.
NotAllowedError: The operation either timed out or was not allowed. See https://www.w3.org/TR/webauthn-2/#sctn-privacy-considerations-client for details.
Powered bythru

tx · approve

meridian.xyzmainnet
Approve transaction
Meridian wants to send this transaction. Does it look right?
Accountta3O0xts…ZhFavv
ProgramMeridian RoutertatPH9XJ…Y3iFaj8

tx · pending

meridian.xyzmainnet
Signing transaction
Confirm with your passkey to sign.
Signed with passkey
Submitting to Thru
Waiting for confirmation
Powered bythru

tx · done

meridian.xyzmainnet
Transaction submitted
Meridian will update once Thru confirms.
Signature5Kd9Wq…A5gF

deposit · chooser

meridian.xyzmainnet
Add funds
Choose how to fund your Thru Wallet. Whatever you send, it arrives as $.
Deposits land inMain · taAAAA…AAMD

deposit · crypto

meridian.xyzmainnet
Deposit crypto
Send tokens from any network. Deposits settle as $.
Network
Your Base address
0x4f1d8c2ab7e93f60d15c7a2e9b08d4f36a1c5e72

deposit · card

meridian.xyzmainnet
Buy $
Pay with Apple Pay or Google Pay · US only.
Pay with
You pay
You receive ≈ $49.00Fee $1.00
By proceeding with this payment, you agree to Coinbase’s Guest Checkout Terms of Service, User Agreement and Privacy Policy.
pay.coinbase.comhosted by Coinbase

deposit · your details

meridian.xyzmainnet
Your details
Coinbase needs a US mobile number and an email for guest checkout. First purchase only · they text you a code.

deposit · verify

meridian.xyzmainnet
Verify with Coinbase
First purchase only. Coinbase confirms your phone, then remembers you for 60 days.
pay.coinbase.comhosted by Coinbase
Enter the code sent to +1 (•••) •••-4821
Code expires in 4:52Resend code
Verification by Coinbase

deposit · pending (crypto)

meridian.xyzmainnet
Deposit detected
$250.00 on Base · confirming on-chain.
Detected $250 on Base
Confirming · 4 of 12 blocks
Settling to your Thru Wallet
Safe to close — we’ll notify you when it lands.

deposit · pending (card)

meridian.xyzmainnet
Processing payment
Apple Pay authorized · Coinbase is buying your $.
Authorized $50.00 · Apple Pay
Buying $49.00 on Coinbase
Sending to your Thru Wallet
Safe to close — we’ll notify you when it lands.

deposit · done (crypto)

meridian.xyzmainnet
+$250.00
Added to Main · taAAAA…AAMD
FromBase · $250
Fees$0.00
New balance$1,534.50

deposit · done (card)

meridian.xyzmainnet
+$49.00
Added to Main · taAAAA…AAMD
FromApple Pay · $50.00
Fees$1.00 Coinbase · $0 Thru
New balance$1,333.50
WalletSheet — Add funds, light and dark

deposit · chooser · light

meridian.xyzmainnet
Add funds
Choose how to fund your Thru Wallet. Whatever you send, it arrives as $.
Deposits land inMain · taAAAA…AAMD

deposit · crypto · light

meridian.xyzmainnet
Deposit crypto
Send tokens from any network. Deposits settle as $.
Network
Your Base address
0x4f1d8c2ab7e93f60d15c7a2e9b08d4f36a1c5e72

deposit · card · light

meridian.xyzmainnet
Buy $
Pay with Apple Pay or Google Pay · US only.
Pay with
You pay
You receive ≈ $49.00Fee $1.00
By proceeding with this payment, you agree to Coinbase’s Guest Checkout Terms of Service, User Agreement and Privacy Policy.
pay.coinbase.comhosted by Coinbase

deposit · your details · light

meridian.xyzmainnet
Your details
Coinbase needs a US mobile number and an email for guest checkout. First purchase only · they text you a code.

deposit · verify · light

meridian.xyzmainnet
Verify with Coinbase
First purchase only. Coinbase confirms your phone, then remembers you for 60 days.
pay.coinbase.comhosted by Coinbase
Enter the code sent to +1 (•••) •••-4821
Code expires in 4:52Resend code
Verification by Coinbase

deposit · pending (crypto) · light

meridian.xyzmainnet
Deposit detected
$250.00 on Base · confirming on-chain.
Detected $250 on Base
Confirming · 4 of 12 blocks
Settling to your Thru Wallet
Safe to close — we’ll notify you when it lands.

deposit · pending (card) · light

meridian.xyzmainnet
Processing payment
Apple Pay authorized · Coinbase is buying your $.
Authorized $50.00 · Apple Pay
Buying $49.00 on Coinbase
Sending to your Thru Wallet
Safe to close — we’ll notify you when it lands.

deposit · done (crypto) · light

meridian.xyzmainnet
+$250.00
Added to Main · taAAAA…AAMD
FromBase · $250
Fees$0.00
New balance$1,534.50

deposit · done (card) · light

meridian.xyzmainnet
+$49.00
Added to Main · taAAAA…AAMD
FromApple Pay · $50.00
Fees$1.00 Coinbase · $0 Thru
New balance$1,333.50

deposit · chooser · dark

meridian.xyzmainnet
Add funds
Choose how to fund your Thru Wallet. Whatever you send, it arrives as $.
Deposits land inMain · taAAAA…AAMD

deposit · crypto · dark

meridian.xyzmainnet
Deposit crypto
Send tokens from any network. Deposits settle as $.
Network
Your Base address
0x4f1d8c2ab7e93f60d15c7a2e9b08d4f36a1c5e72

deposit · card · dark

meridian.xyzmainnet
Buy $
Pay with Apple Pay or Google Pay · US only.
Pay with
You pay
You receive ≈ $49.00Fee $1.00
By proceeding with this payment, you agree to Coinbase’s Guest Checkout Terms of Service, User Agreement and Privacy Policy.
pay.coinbase.comhosted by Coinbase

deposit · your details · dark

meridian.xyzmainnet
Your details
Coinbase needs a US mobile number and an email for guest checkout. First purchase only · they text you a code.

deposit · verify · dark

meridian.xyzmainnet
Verify with Coinbase
First purchase only. Coinbase confirms your phone, then remembers you for 60 days.
pay.coinbase.comhosted by Coinbase
Enter the code sent to +1 (•••) •••-4821
Code expires in 4:52Resend code
Verification by Coinbase

deposit · pending (crypto) · dark

meridian.xyzmainnet
Deposit detected
$250.00 on Base · confirming on-chain.
Detected $250 on Base
Confirming · 4 of 12 blocks
Settling to your Thru Wallet
Safe to close — we’ll notify you when it lands.

deposit · pending (card) · dark

meridian.xyzmainnet
Processing payment
Apple Pay authorized · Coinbase is buying your $.
Authorized $50.00 · Apple Pay
Buying $49.00 on Coinbase
Sending to your Thru Wallet
Safe to close — we’ll notify you when it lands.

deposit · done (crypto) · dark

meridian.xyzmainnet
+$250.00
Added to Main · taAAAA…AAMD
FromBase · $250
Fees$0.00
New balance$1,534.50

deposit · done (card) · dark

meridian.xyzmainnet
+$49.00
Added to Main · taAAAA…AAMD
FromApple Pay · $50.00
Fees$1.00 Coinbase · $0 Thru
New balance$1,333.50
PasskeyPopup — in situ (details arrive after 1.5s; Continue runs the flow)
Thruapp.tid.sh
Sign in with Thru
Waiting for app details…
  • Confirm with Touch ID, Face ID or a security key
This window opened so your browser can verify the passkey on tid.sh
Waiting for app details
PasskeyPopup — five states, 440 × 640 window, light and dark

waiting for app details · light

Thruapp.tid.sh
Sign in with Thru
Waiting for app details…
  • Confirm with Touch ID, Face ID or a security key
This window opened so your browser can verify the passkey on tid.sh
Waiting for app details

review request · light

Thruapp.tid.sh
MMeridianmeridian.xyzVerified
Sign in with Thru
Meridian wants to sign you in with your Thru Wallet passkey.
  • Confirm with Touch ID, Face ID or a security key
  • Meridian receives your address, never your passkey
This window opened so your browser can verify the passkey on tid.sh
Sign in with Thru. Request from meridian.xyz.

waiting for passkey · light

Thruapp.tid.sh
Waiting for your passkey
Confirm with Touch ID, Face ID or your security key in the browser prompt.
Request received from meridian.xyz
Verifying passkey
Returning to Meridian
This window opened so your browser can verify the passkey on tid.sh
Waiting for your passkey

signed in · auto-closes · light

Thruapp.tid.sh
Signed in
Returning you to Meridian. This window closes on its own.
taAAAA…AAMDMain · passkey$1,284.50
This window opened so your browser can verify the passkey on tid.sh
Signed in

error · light

Thruapp.tid.sh
Couldn’t sign in
The passkey request was cancelled or timed out.
NotAllowedError: The operation either timed out or was not allowed. See https://www.w3.org/TR/webauthn-2/#sctn-privacy-considerations-client for details.
This window opened so your browser can verify the passkey on tid.sh
Couldn’t sign in

waiting for app details · dark

Thruapp.tid.sh
Sign in with Thru
Waiting for app details…
  • Confirm with Touch ID, Face ID or a security key
This window opened so your browser can verify the passkey on tid.sh
Waiting for app details

review request · dark

Thruapp.tid.sh
MMeridianmeridian.xyzVerified
Sign in with Thru
Meridian wants to sign you in with your Thru Wallet passkey.
  • Confirm with Touch ID, Face ID or a security key
  • Meridian receives your address, never your passkey
This window opened so your browser can verify the passkey on tid.sh
Sign in with Thru. Request from meridian.xyz.

waiting for passkey · dark

Thruapp.tid.sh
Waiting for your passkey
Confirm with Touch ID, Face ID or your security key in the browser prompt.
Request received from meridian.xyz
Verifying passkey
Returning to Meridian
This window opened so your browser can verify the passkey on tid.sh
Waiting for your passkey

signed in · auto-closes · dark

Thruapp.tid.sh
Signed in
Returning you to Meridian. This window closes on its own.
taAAAA…AAMDMain · passkey$1,284.50
This window opened so your browser can verify the passkey on tid.sh
Signed in

error · dark

Thruapp.tid.sh
Couldn’t sign in
The passkey request was cancelled or timed out.
NotAllowedError: The operation either timed out or was not allowed. See https://www.w3.org/TR/webauthn-2/#sctn-privacy-considerations-client for details.
This window opened so your browser can verify the passkey on tid.sh
Couldn’t sign in
Pair a new device — new-device side, every state (light and dark)

intro · add this device · light

meridian.xyzmainnet
Add this device
Approve it from a device that already has your account.
This device
Jerry’s iPhoneiPhone · Safari 26 · new passkey
Powered bythru

code · creating · light

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Creating a pairing code…
Powered bythru

code · ready · light

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Expires in 4:52
Waiting for your other device
Powered bythru

code · approved · light

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Approved · signing in
Powered bythru

code · expired · light

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Code expired
Code expired
Codes last 5 minutes.
Powered bythru

code · error · light

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Powered bythru

code · error + developer mode · light

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Powered bythru

done · light

meridian.xyzmainnet
Jerry’s iPhone added
It can now sign in to your account.
Powered bythru

intro · add this device · dark

meridian.xyzmainnet
Add this device
Approve it from a device that already has your account.
This device
Jerry’s iPhoneiPhone · Safari 26 · new passkey
Powered bythru

code · creating · dark

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Creating a pairing code…
Powered bythru

code · ready · dark

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Expires in 4:52
Waiting for your other device
Powered bythru

code · approved · dark

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Approved · signing in
Powered bythru

code · expired · dark

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Code expired
Code expired
Codes last 5 minutes.
Powered bythru

code · error · dark

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Powered bythru

code · error + developer mode · dark

meridian.xyzmainnet
Approve on your other device
Scan with a device that has your account
Powered bythru

done · dark

meridian.xyzmainnet
Jerry’s iPhone added
It can now sign in to your account.
Powered bythru
Pair a new device — approver page (app.tid.sh/pair), iOS and web, light and dark

review · ios · light

thruapp.tid.sh/pair

Add this device to your account?

It gets the same access as this one.

Jerry’s iPhoneiPhone · Safari 26 · via meridian.xyz
Requested20 seconds ago
Add to
taAAAA…AAMDMain · passkey on this device$1,284.50

Only approve a device you have in front of you.

Signed in as taAAAA…AAMD on Jerry’s iPhone 15

review · web · light

thruapp.tid.sh/pair

Add this device to your account?

It gets the same access as this one.

Jerry’s iPhoneiPhone · Safari 26 · via meridian.xyz
Requested20 seconds ago
Add to
taAAAA…AAMDMain · passkey on this device$1,284.50

Only approve a device you have in front of you.

Signed in as taAAAA…AAMD on Jerry’s MacBook

review · two accounts · ios · light

thruapp.tid.sh/pair

Add this device to your account?

It gets the same access as this one.

Jerry’s iPhoneiPhone · Safari 26 · via meridian.xyz
Requested20 seconds ago
Add to

Only approve a device you have in front of you.

Signed in as taAAAA…AAMD on Jerry’s iPhone 15

review · two accounts · web · light

thruapp.tid.sh/pair

Add this device to your account?

It gets the same access as this one.

Jerry’s iPhoneiPhone · Safari 26 · via meridian.xyz
Requested20 seconds ago
Add to

Only approve a device you have in front of you.

Signed in as taAAAA…AAMD on Jerry’s MacBook

approving · ios · light

thruapp.tid.sh/pair

Adding Jerry’s iPhone

Keep this page open for a moment.

  1. Passkey verified
  2. Adding the device to your account
Signed in as taAAAA…AAMD on Jerry’s iPhone 15

approving · web · light

thruapp.tid.sh/pair

Adding Jerry’s iPhone

Keep this page open for a moment.

  1. Passkey verified
  2. Adding the device to your account
Signed in as taAAAA…AAMD on Jerry’s MacBook

done · ios · light

thruapp.tid.sh/pair

Jerry’s iPhone added

Jerry’s iPhone 15this device
Jerry’s iPhoneadded just now
Signed in as taAAAA…AAMD on Jerry’s iPhone 15

done · web · light

thruapp.tid.sh/pair

Jerry’s iPhone added

Jerry’s MacBookthis device
Jerry’s iPhoneadded just now
Signed in as taAAAA…AAMD on Jerry’s MacBook

expired / malformed link · ios · light

thruapp.tid.sh/pair

This code has expired

Tap New code on your new device and scan again.

Signed in as taAAAA…AAMD on Jerry’s iPhone 15

expired / malformed link · web · light

thruapp.tid.sh/pair

This code has expired

Tap New code on your new device and scan again.

Signed in as taAAAA…AAMD on Jerry’s MacBook

not signed in here · ios · light

thruapp.tid.sh/pair

Sign in first

Sign in on this device, then scan the code again.

not signed in here · web · light

thruapp.tid.sh/pair

Sign in first

Sign in on this device, then scan the code again.

review · ios · dark

thruapp.tid.sh/pair

Add this device to your account?

It gets the same access as this one.

Jerry’s iPhoneiPhone · Safari 26 · via meridian.xyz
Requested20 seconds ago
Add to
taAAAA…AAMDMain · passkey on this device$1,284.50

Only approve a device you have in front of you.

Signed in as taAAAA…AAMD on Jerry’s iPhone 15

review · web · dark

thruapp.tid.sh/pair

Add this device to your account?

It gets the same access as this one.

Jerry’s iPhoneiPhone · Safari 26 · via meridian.xyz
Requested20 seconds ago
Add to
taAAAA…AAMDMain · passkey on this device$1,284.50

Only approve a device you have in front of you.

Signed in as taAAAA…AAMD on Jerry’s MacBook

review · two accounts · ios · dark

thruapp.tid.sh/pair

Add this device to your account?

It gets the same access as this one.

Jerry’s iPhoneiPhone · Safari 26 · via meridian.xyz
Requested20 seconds ago
Add to

Only approve a device you have in front of you.

Signed in as taAAAA…AAMD on Jerry’s iPhone 15

review · two accounts · web · dark

thruapp.tid.sh/pair

Add this device to your account?

It gets the same access as this one.

Jerry’s iPhoneiPhone · Safari 26 · via meridian.xyz
Requested20 seconds ago
Add to

Only approve a device you have in front of you.

Signed in as taAAAA…AAMD on Jerry’s MacBook

approving · ios · dark

thruapp.tid.sh/pair

Adding Jerry’s iPhone

Keep this page open for a moment.

  1. Passkey verified
  2. Adding the device to your account
Signed in as taAAAA…AAMD on Jerry’s iPhone 15

approving · web · dark

thruapp.tid.sh/pair

Adding Jerry’s iPhone

Keep this page open for a moment.

  1. Passkey verified
  2. Adding the device to your account
Signed in as taAAAA…AAMD on Jerry’s MacBook

done · ios · dark

thruapp.tid.sh/pair

Jerry’s iPhone added

Jerry’s iPhone 15this device
Jerry’s iPhoneadded just now
Signed in as taAAAA…AAMD on Jerry’s iPhone 15

done · web · dark

thruapp.tid.sh/pair

Jerry’s iPhone added

Jerry’s MacBookthis device
Jerry’s iPhoneadded just now
Signed in as taAAAA…AAMD on Jerry’s MacBook

expired / malformed link · ios · dark

thruapp.tid.sh/pair

This code has expired

Tap New code on your new device and scan again.

Signed in as taAAAA…AAMD on Jerry’s iPhone 15

expired / malformed link · web · dark

thruapp.tid.sh/pair

This code has expired

Tap New code on your new device and scan again.

Signed in as taAAAA…AAMD on Jerry’s MacBook

not signed in here · ios · dark

thruapp.tid.sh/pair

Sign in first

Sign in on this device, then scan the code again.

not signed in here · web · dark

thruapp.tid.sh/pair

Sign in first

Sign in on this device, then scan the code again.

Neutral skin

Sheet + Stepper — branded default vs [data-tds-skin] vs host accent
Phone
Step 1 of 3.
Pinned action, 48px touch metric.
Phone
Step 1 of 3.
Pinned action, 48px touch metric.
Phone
Step 1 of 3.
Pinned action, 48px touch metric.
Phone
Step 1 of 3.
Pinned action, 48px touch metric.
Detail — summary rows (sans label, mono tabular value)
You pay$50.00
Coinbase fee (est. 2.5%)$1.25
You receive$48.75

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Body

Body 1 — the quick brown fox.

Body 3 — the quick brown fox.

Body 4 — the quick brown fox.

Body 5 — the quick brown fox.

UI & Button label

Ui 1

Ui 2

Ui 3

Ui 4

Ui 5

Button 1 label

Toast

by kind (signal accent + timeout bar)
Text / Paragraph

Text variant=ui4 (mono)

Paragraph — the default body copy (type-body-3, renders a p).