Live features from our sportsbook design system
Every demo on this page is the real component, running live from the sportsbook we build our design system in. Tap the odds, build a bet, open a story, spin the wheel. Then switch the theme and watch one codebase dress itself for a different operator.
We design in Figma and build with Claude, so new features land here as we make them.
Engagement
Stories
Social-style stories for promotions, match previews and stats, at the top of the sportsbook. The button on a story puts a real, priced selection straight into the bet slip, with no new tab and no coupon page in between.
Loading the live demo. Open Stories on its own
Try this
- Open Haaland Boost and add the boosted price to the slip below.
- Tap or swipe through the stories, then press Escape to close the viewer.
- Switch theme: the rings and buttons follow the operator's brand.
Under the hood
- A standalone, framework-agnostic widget installed from its own package, the same way an operator outside our stack would install it.
- Themed through a short list of CSS custom properties, so it takes on any brand.
- Stories can target audience segments, and the operator says whether a match has started so finished events drop out.
Bet slip
Bet slip and multiples
A bet slip with a real multiples engine. Add selections and it works out every bet they allow, from doubles and trebles to full-cover bets all the way up to a Goliath, and flags price changes before a bet goes on.
Loading the live demo. Open Bet slip and multiples on its own
Try this
- Pick three prices from different matches, then open More Multiples to see the Trixie and Patent.
- Add an in-play price, switch on Simulate live prices, and accept the change in the slip.
- Add two selections from the same match and watch them group, because they can't be combined.
Under the hood
- The full UK ladder: Singles, Doubles, Trebles, Accumulator, Trixie, Patent, Yankee, Lucky 15, Canadian, Lucky 31, Heinz, Lucky 63, Super Heinz and Goliath.
- Acca boosts that step up from +5% at four legs to +70% at ten.
- Suspended selections block the bet until they're removed. In-play selections carry the live score.
Promotions
Price boosts and accas
The homepage's boost and acca carousels, wired to the slip. Boosts show the price before and after, and a pre-built acca goes on as a single bet with its legs listed underneath.
Loading the live demo. Open Price boosts and accas on its own
Try this
- Add a boost, then stake more than its cap and watch the returns.
- Open an acca's full list of legs, then add the whole thing in one tap.
- On a narrow frame like this one, open the slip from the bar along the bottom.
Under the hood
- A boost's maximum stake travels into the slip. Any stake above it settles at the original price.
- Accas are bundled selections with fixed legs, so the multiples engine never splits them up.
- The phone-width slip is the same component as the desktop one, behind a peek bar.
Same-game multis
Bet Builder
Build a same-game multi from match and player markets. A summary bar keeps the legs and the running price in view, and the finished builder goes into the slip as one bet.
Loading the live demo. Open Bet Builder on its own
Try this
- Pick a goalscorer, an assist and a match result, and watch the price build in the bar.
- Compare the builder's price with the legs multiplied together. It's lower, because legs from the same match are related.
- Add the builder to the slip, then build another one.
Under the hood
- One pick per market, from 2 to 8 legs.
- Player markets such as Score or Assist and Goalscorers sit alongside match markets as legs.
- The price is read from a pricing feed, never multiplied out from the legs. In the demo, a fixed discount stands in for the feed.
My bets
Cash out
Open bets with cash-out, from My Bets. Take the whole amount, or slide to cash out part of a bet and leave the rest running.
Loading the live demo. Open Cash out on its own
Try this
- Open Cash out part of this bet and drag the slider.
- Cash out a bet in full and confirm it.
- Cash out everything, then reset the demo.
Under the hood
- Every cash-out goes through a confirmation step that states the amount.
- A partial cash-out scales the remaining stake, returns and cash-out value.
- Currency comes from the account, never from the component.
Casino
Table games
Roulette, blackjack and baccarat, fully playable: chips move money, rounds resolve and wins pay. The tables are built on the same tokens as the sportsbook, so an operator rebrands them without touching a component.
Loading the live demo. Open Table games on its own
Try this
- Place chips on the roulette board and spin.
- Switch to blackjack and split a pair, or double down.
- Play a few hands of baccarat and watch the Big Road fill in.
Under the hood
- Real game engines behind the interface: blackjack splits up to four hands and offers insurance.
- 510 automated checks cover payout tables, drawing rules and the money ledger.
- Colour contrast is checked across every brand and table theme.
More on the way
We add to this page as we build
These components come from the same multi-brand system we design and build for operators: one set of tokens, any number of brands. The full sportsbook, casino and account area are on the demo site.
Ready to elevate your
iGaming experience?
Book a strategy call. We'll walk through your platform, identify the biggest design opportunities, and show you exactly how betCollab can move your product forward.
- Figma expertise
- Senior iGaming expertise from day one
- AI-accelerated delivery
- Scales to match your output
- No hiring, no ramp-up