Components

Eight ways to show a live match: badges, dots, pulses, broadcast signals and match clocks. Includes color, size, paused and finished states.

A raised, color-aware betting control that installs independently of any theme.

Inspired by metal-fx by Jakub Antalik. An animated liquid-metal border wraps neutral and brand buttons that follow the active theme.

A compact numeric input with composable accessories and value-transforming actions.

A self-contained playing card with face layouts, three sizes, native div props, and an optional custom back image.

Wrap it once at the root and every price in the tree renders in the format the user picked. Ships Odds, useOdds and useOddsValue. Add Odds Format Select to let users switch, and Animated Odds for rolling digits.

A reusable mutually-exclusive choice control with radio-group semantics.

An inline badge pairing a direction icon with a value for rising or falling prices.

A prominent amount entry layout with composable quick actions.

A drop-in for the provider's Odds component with rolling digits. Same props, same format switching, animated with NumberFlow.

Smooth, animated number transitions for changing prices.

A numeric field that formats as you type and shrinks its type to keep the whole amount in view.

Settles a slip of one or more legs: the result, the price, the returns and the profit.

A trade ticket built from parts: the pick up top, buy or sell, market or limit, the outcomes, then a stake and what it returns. Every part is optional, so leave out the sides or the order type and the slip just buys at the market, or list several legs for a combo.

A composable read-only summary for calculated bet results.

A settled bet as a printed ticket: every selection's result, the returns and the profit, torn off at the bottom. One leg is a single, many are an accumulator.

Presentational blackjack cards and hands: hidden cards, soft/hard totals, active hands and settled outcomes.

A simple button component.

A card surface shell with betui elevation. Children own their own padding.

A transcript that follows new messages, assembled from header, message and composer slots.

Every circuit on the 2026 calendar, traced from OpenF1 location data and keyed by its circuit_key, so a car's raw location lands on the outline as is.

Derives a readable foreground and a bottom edge from an arbitrary hex color.

A contest pass: the matchup tinted by both teams, torn off along a perforation from the players, squads and prize.

An ISO country flag from FlagCDN. SVG by default, with soft corners, plain and brand border variants. PNG and WebP sizes include retina sources.

Formats numeric values as localized currency.

A wallet currency menu with real crypto SVG marks, balances, and keyboard selection.

A horizontal rail you throw with a pointer, trackpad or wheel. Inertia, rubber-banded ends, optional snap, and cards that scale and tilt away from centre.

A tactile raised-key button that sinks on press, plus the track and surface it shares with the segmented control and stepper.

The sportsbook coupon: fixtures under a bar per day, the 1x2 and a handicap on every row, with ▲ ▼ to walk the handicap ladder. Every price toggles on its own, ready for a bet slip, and the prices drop under the teams on narrow screens.

A game's lines between two teams, composed from parts: logos over their own colours, where the picks lean, and a column of picks per market.

A football helmet in side profile, painted from team colours at runtime so one drawing serves every team.

The Bet UI input used across every theme.

A football jersey from the front, painted from team colours at runtime: a stand-in for a player headshot.

An in-play fixture: live pulse, running score either side of the minute, competition underneath.

A scoreboard over a running commentary: the fixture holds still while the feed underneath takes new lines.

A market and its outcomes, the backbone of a sportsbook: composed from parts around a MarketGrid. Every price toggles on its own, ready for a bet slip.

Groups market selections by columns, rows, or inline.

A played fixture on a card: league, date, both crests and the score.

A pocket scoreboard built from parts: logos and names either side of the score and clock, 144px wide so two and a half sit across a phone.

A live ticker of match events: new lines push the feed up and the oldest fades off the top.

Who wins, composed from parts: both teams over a wash of their colours, each payout on a glass tile.

The conversion and formatting functions behind every odds component. Call them directly when you need a plain string outside React.

A shadcn Select bound to provider state, so changing it re-formats every price on the page. Compose the trigger and items however you like, narrow the list with the formats prop, or skip it and drive the provider from any control with useOdds.

Plugs OpenF1 into the race tracker. A typed fetch, raceAt to turn a session's rows into tracker props at any moment, and useOpenF1Race to follow a session live or replay one inside the free rate limit.

Bids and asks with cumulative depth, last trade and spread.

A selection with its event and price, stacked or inline. Compose the parts and drop an Odds in the price slot to follow the OddsProvider.

A pick'em toggle: an outline that floods with the pick colour, grouped so each market takes one side.

A prediction market at a glance, built from parts: the question over a chance dial or a line per outcome, Yes and No to buy, and fills that float up off the buttons as they trade.

A player prop, composed from parts: the player over their team colour, the line, and less or more.

One-tap stake buttons on a single price: each shows its amount over what it would win, and the win rolls as the odds move.

A live race on its real circuit: every car where it is on the lap, the leader's margin and laps to go, the running order with sector bars underneath. Plain props, so any timing feed plugs in.

A live world clock: one row per time zone, with day/night, offset from local and relative dates.

A tight badge for won, lost, void or open. Five styles over one tone family per result.

A tactile quantity stepper: minus, count and plus in one raised-key control.

A printed ticket to compose: header, legs, details and serial on paper with a torn or straight edge, perforated where it would tear.

Circuit geometry behind the race tracker: lays an outline out for drawing, finds a car's place on the lap from raw x/y, and traces new circuits from one lap of location samples.