‹ components

MarketTabs

draftv0.9.0·open in canvas

Browser-like open-market tabs for trading workspaces: symbol, token icon, live price, optional change, close, and add.

Installnpx shadcn add @cids/market-tabs
Live demo

Motion · tap to replay

honors reduced-motion

Color and opacity transitions at 150ms. Active tab scrolls into view on market changes.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { MarketTabs } from "@/design-system";

<MarketTabs
  markets={[
    { symbol: "SOL-PERP", label: "SOL", price: "$184.26", changePct: 3.64 },
    { symbol: "BTC-PERP", label: "BTC", price: "$73,420", changePct: -0.42 },
  ]}
  activeSymbol="SOL-PERP"
  onActiveChange={setActiveSymbol}
  onClose={closeMarket}
  onAdd={openSearch}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

defaultactivehoverdisabled marketclose availableone-tab no-closeadd enabled/disabledhorizontal overflow.

Browser-like open-market tabs for trading workspaces: symbol, token icon, live price, optional change, close, and add.

Anatomy

+ SOL  $184.26  +3.64%  x + BTC  $73,420  -0.42%  x + [+]
  active tab gets a brand underline

Props

PropTypeDefaultNotes
marketsMarketTabItem[]--Each item has symbol, optional label, price, changePct, iconSrc, disabled.
activeSymbolstring--Active tab key.
onActiveChange(symbol:string)=>void--Activates a market.
onClose(symbol:string)=>void--Renders close buttons when provided and more than one tab exists.
onAdd() => void--Renders the trailing add button.
addDisabledbooleanfalseDisables the add button, e.g. tab cap reached.
addLabelstringAdd marketAdd button accessible label.
aria-labelstringOpen marketsNames the tablist.
classNamestring--cn-merged.

Motion

Color and opacity transitions at 150ms. Active tab scrolls into view on market changes.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.