# Ship It: React Integration in 5 Minutes
> ChainHackers Weekly - Developer Notes Entry #4
**Published by:** [ChainHacker](https://paragraph.com/@chainhacker/)
**Published on:** 2025-06-22
**Categories:** react, betswirl, sdk, devtools, web3
**URL:** https://paragraph.com/@chainhacker/betswirl-sdk-react-integration
## Content
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.From Storybook to npmLast 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 npmThe 5-Minute Integration ChallengeWe 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. Minute 1: Create the Appnpm create vite@latest betswirl-ui-react-demo -- --template react-ts cd betswirl-ui-react-demo npm installVite + React + TypeScript. The holy trinity of modern web dev.Minute 2: Install BetSwirlnpm install @betswirl/uiOne package. All the games. All the Web3 complexity handled.Minute 3: Wire Up the ProvidersRemember 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( ) Same providers we've been using, but now they're properly packaged and documented.Minute 4: Add a Game// 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 ( ) } That's it. The game handles wallet connection, betting, on-chain randomness, everything.Minute 5: Deploy to VercelPush to GitHub, connect to Vercel, click deploy. Done. 🎮 Live Demo 💻 GitHub RepoBeyond the 5 Minutes: All Games LiveWant 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 StackBlitzWhat's Different Now?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 bundledTheme-aware: Light/dark/custom themes just workMobile-ready: Finally sorted the responsive layoutsTypeScript-first: Full type safety, autocomplete heavenWhat's Next?KenoToken Selector: v0.2.0 targetFor the BuildersIf you're thinking about adding games to your dApp:Try the demo first: See if the UX fits your vibeCheck your audience: BetSwirl supports multiple chains, but components work with one chain at a timeRevenue share is automatic: 30% of house edge to you, handled on-chain (see docs)Join our Discord: We're helping early integrators personallyShip It CultureA 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/uiNeed help?Twitter: @ChainHackerClanFarcaster channel: /betswirlDiscord: Join the BetSwirl builders
## Publication Information
- [ChainHacker](https://paragraph.com/@chainhacker/): Publication homepage
- [All Posts](https://paragraph.com/@chainhacker/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@chainhacker): Subscribe to updates
- [Twitter](https://twitter.com/ChainHackerClan): Follow on Twitter
## Optional
- [Collect as NFT](https://paragraph.com/@chainhacker/betswirl-sdk-react-integration): Support the author by collecting this post
- [View Collectors](https://paragraph.com/@chainhacker/betswirl-sdk-react-integration/collectors): See who has collected this post