COMPONENT rounds-timeline

Rounds Timeline

Polymarket-style bottom bar for navigating recurring market rounds. Shows inline tabs with result indicators (▲ above / ▼ below), a "Past" popover dropdown grouped by date, and a streak strip. Pure presentation — pass rounds data directly. Key props: rounds (Round[]), activeRoundId (number), onRoundSelect (callback), period ("15m"|"1d"), underlying? (string), visibleCount? (number, default 5).

Install

$ npx shadcn@latest add https://ui.purrdict.xyz/r/rounds-timeline.json

Usage

import { RoundsTimeline } from "@/components/hip4/rounds-timeline"
import type { Round } from "@/components/hip4/rounds-timeline"

const rounds: Round[] = [
  { id: 1, expiry: "2026-03-30T09:30:00Z", result: "above", targetPrice: 67000, settlePrice: 67500 },
  { id: 2, expiry: "2026-03-29T09:30:00Z", result: "below", targetPrice: 68000, settlePrice: 66000 },
  { id: 3, expiry: "2026-03-28T09:30:00Z", result: null, targetPrice: 66500 },
]

<RoundsTimeline
  rounds={rounds}
  activeRoundId={3}
  onRoundSelect={(round) => router.push(`/market/${round.id}`)}
  period="1d"
  underlying="BTC"
  className="sticky bottom-0"
/>

Props

Prop	Type	Description
`rounds`	Round[]	All rounds sorted by expiry desc. Each: { id, expiry, result, settlePrice?, targetPrice }
`activeRoundId`	number	ID of the currently viewed round
`onRoundSelect`	(round: Round) => void	Called when a round tab or dropdown item is clicked
`period`	string	"15m" = time labels, "1d" = date labels
`underlying`	string	Optional asset symbol for icon (e.g. "BTC", "HYPE")
`visibleCount`	number	Inline tabs before overflow into Past dropdown. Default: 5
`className`	string	Additional Tailwind classes (e.g. sticky positioning)

Dependencies

Registry components

popover