Components
18 components. Each one is the single source of truth.
BUTTONS
CARD
DEFAULT
Static. No interaction.
<Card>
GLOW
Hover — light follows cursor.
<Card glow>
CUSTOM BORDER
For do/don't, accent states.
style={{ borderColor }}
INPUTS
SMALL ELEMENTS
BADGES
BACK BUTTON
AMOUNT PRESETS
COIN ICONS
NAVIGATION
NAVBAR — FLOATING
NAVBAR — DEFAULT
TAB BAR
OVERLAYS & PROGRESS
MODAL
Animated entry. Escape or backdrop to close.
STEPPER
SPARKLINE
UP TREND
DOWN TREND
NO FILL
COMPACT (COIN LIST)
<Sparkline data={[...]} width={80} height={32} filled />
Color is auto-derived from first→last value. Pass positive prop to force it.
PNL BADGE
POSITIVE — MD
+$420.50(+12.40%)NEGATIVE — MD
$89.20(3.20%)POSITIVE — SM
+$420.50(+12.40%)PCT ONLY
(+12.40%)<PnlBadge pnlUsd={420.50} pnlPct={12.4} size="md" showUsd />
P&L is always anchored to the user's last buy price, not lifetime or 24h change.
SKELETON
COIN ROW (LOADING STATE)
<Skeleton width={80} height={12} rounded="md" />
Uses the .skeleton class (shimmer animation defined in globals.css).
TOAST
TRIGGER EXAMPLES
const { toast } = useToast(); toast({ type: "success", title: "...", message: "..." })
Requires ToastProvider in the root layout. Auto-dismisses after 4 seconds.
PIN INPUT
INTERACTIVE — ENTER 123456 TO SUCCEED
Try 123456 to succeed, anything else to see the error state.
<PinInput length={6} onComplete={(pin) => {}} error={false} masked />
Supports paste, backspace navigation, shake-on-error, and masked/unmasked modes. onComplete fires once per entry session.
PHONE FRAME
Your coins
$4,281
+2.10%
Device mockup for landing and demo pages.
Notch, status bar, rounded corners. Pass any content as children.
<PhoneFrame width={390} height={844}>