@thru/design - Visual QA Gallery

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 QA

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
ΞBP$₿₮
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

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 receive48.75 THRUSD

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).