v0.1.0 · Component gallery

Every component, live.

Copy any snippet and drop it into your app.

<MarketCard />

YES/NO prices, volume, status, close time. Flash-animates on tick.

<MarketCard ticker="KXALIENS-27" />

<ProbabilityDial />

Circular SVG gauge for the YES probability.

0¢YES

<ProbabilityDial ticker="KXALIENS-27" size={140} />

<Orderbook />

Live YES/NO depth. Layout "stacked" or "split".

YESPriceSize

NOPriceSize

<Orderbook ticker="KXALIENS-27" depth={6} layout="split" />

<CandlestickChart />

OHLC chart backed by lightweight-charts.

<CandlestickChart ticker="KXALIENS-27" interval={60} height={240} />

<TradeFeed />

Live trade tape with side, price, size, time.

Recent tradesSidePriceSizeTime

<TradeFeed ticker="KXALIENS-27" limit={6} />

<CountdownTimer />

Live countdown to a target time. Updates every second.

229d 1h 32m

<CountdownTimer to="2027-01-01T00:00:00Z" />

<TimeRangeSelector />

Controlled pill row. Pair with useCandlesticks.

const [range, setRange] = useState<TimeRange>("1d");
<TimeRangeSelector value={range} onChange={setRange} />

<TradeButton />

Deep-link to kalshi.com with optional builder code.

Trade YES Trade NO

<TradeButton ticker="KXALIENS-27" side="yes" />
<TradeButton ticker="KXALIENS-27" side="no" variant="ghost" />

<WatchlistButton />

Star toggle backed by localStorage. Drop into any card.

<WatchlistButton ticker="KXALIENS-27" />

<ShareCard />

Copy-link and tweet buttons. When the share URL points at a page with OG meta tags, Twitter / Slack / iMessage / Discord / LinkedIn render the unfurled image inline after the post is sent.

<ShareCard
  ticker="KXALIENS-27"
  title="Will the U.S. confirm aliens exist?"
  url={`https://kalshi-kit.dev/share/m/${TICKER}`}
/>

<MarketSparkline />

Tiny SVG trendline. Pairs with cards and tables.

<MarketSparkline ticker="KXALIENS-27" width={220} height={48} />

<EventSearch />

Debounced autocomplete across live events. Pick a result to fire onSelect.

<EventSearch onSelect={(market) => navigate(market.ticker)} />

<CategoryFilter />

Controlled category pill row. Drives MarketSearch / EventSearch.

const [category, setCategory] = useState<string | null>(null);
<CategoryFilter value={category} onChange={setCategory} />

<EventCard />

Header for a multi-outcome event.

<EventCard eventTicker="KXALIENS-27" />

<EventMarketList />

Ranked child markets under an event, with probability bars.

<EventMarketList eventTicker="KXALIENS-27" />

<ExchangeStatusBadge />

Trading status pill. Polls /exchange/status every 30s.

Checking…

<ExchangeStatusBadge />