Remember when we said we were "nearly package-ready"? Well, we shipped it. The npm package is live, the React integration is smoother than butter, and we've got a complete demo app deployed on Vercel. Here's how the journey unfolded.

Last week we had two games (CoinToss and Dice) living happily in our Storybook demo. This week? They're on npm, ready to drop into any React app.

📦 @betswirl/ui on npm

We wanted to prove that integrating BetSwirl games could be stupidly simple. So we set ourselves a challenge: from zero to deployed casino dApp in 5 minutes. Here's what happened.

npm create vite@latest betswirl-ui-react-demo -- --template react-ts
cd betswirl-ui-react-demo
npm install

Vite + React + TypeScript. The holy trinity of modern web dev.

npm install @betswirl/ui

One package. All the games. All the Web3 complexity handled.

Remember our provider jungle from the Storybook days? We cleaned it up:

// main.tsx
// Full code: https://github.com/chainhackers/betswirl-ui-react-demo/blob/main/src/main.tsx
// ... imports for React, Wagmi, OnchainKit, BetSwirl
import '@betswirl/ui/styles.css'  // Don't forget this!

const queryClient = new QueryClient()
const config = createConfig({
  chains: [base],
  transports: { [base.id]: http() },
})

const onChainKitConfig: AppConfig = {
  wallet: {
    display: "modal",
  }
}

createRoot(document.getElementById('root')!).render(
  <WagmiProvider config={config}>
    <QueryClientProvider client={queryClient}>
      <OnchainKitProvider chain={base} config={onChainKitConfig}>
        <BetSwirlSDKProvider initialChainId={base.id}>
          <App />
        </BetSwirlSDKProvider>
      </OnchainKitProvider>
    </QueryClientProvider>
  </WagmiProvider>
)

Same providers we've been using, but now they're properly packaged and documented.

// App.tsx
// Full code: https://github.com/chainhackers/betswirl-ui-react-demo/blob/main/src/App.tsx
import { CoinTossGame } from '@betswirl/ui'

function App() {
  return (
    <div className="App">
      <h1>My Casino dApp</h1>
      <div style={{ margin: '2rem 0' }}>
        <CoinTossGame />
      </div>
    </div>
  )
}

That's it. The game handles wallet connection, betting, on-chain randomness, everything.

Push to GitHub, connect to Vercel, click deploy. Done.

Live Demo
GitHub Repo

Want to see all three games in action? Check out our full demo showcasing CoinToss, Dice, and our latest addition:

🎰 Play All Games Demo
Edit on StackBlitz

Remember our first post about "stuffing an elephant into a telephone booth"? Well, we found a way. The components are:

• Self-contained: All Web3 logic bundled

• Theme-aware: Light/dark/custom themes just work

• Mobile-ready: Finally sorted the responsive layouts

• TypeScript-first: Full type safety, autocomplete heaven

• Keno

• Token Selector: v0.2.0 target

If you're thinking about adding games to your dApp:

1. Try the demo first: See if the UX fits your vibe

2. Check your audience: BetSwirl supports multiple chains, but components work with one chain at a time

3. Revenue share is automatic: 30% of house edge to you, handled on-chain (see docs)

4. Join our Discord: We're helping early integrators personally

A few weeks ago, we were picking cat backgrounds in Figma. Now we have a production npm package ready for integration. The lesson? Ship early, iterate in public, see what happens.

Ready to build?

npm install @betswirl/ui

Need help?

• Twitter: @ChainHackerClan

• Farcaster channel: /betswirl

• Discord: Join the BetSwirl builders