Install Bet UI
Bet UI components use your shadcn theme, plus a few tokens for brand, outcomes, surfaces, and headings. Start with our base theme, then make those values yours.
Start with the base
It includes the standard shadcn tokens and every extra token Bet UI expects. Edit the installed values in your app's CSS to match your product.
Install the base theme
In a project with shadcn and Tailwind CSS set up, run:
pnpm dlx shadcn@latest add https://betui.fyi/r/default.jsonThe theme adds light and dark values to your CSS. Review the resulting stylesheet, then change the brand, outcome, and surface values there. You can inspect every value in the base theme.
Add a component
Install only the pieces you need. Here's the Bet Button to get started:
pnpm dlx shadcn@latest add https://betui.fyi/r/bet-button.jsonWhat the extra tokens do
A default shadcn theme does not define these Bet UI roles. Components with direct CSS values have fallbacks, but token based utilities such as text-brand and shadow-surface need the mappings below.
--brand · --brand-foreground
Your product color and readable text on top of it. Separate from shadcn’s --primary.
--yes · --yes-foreground · --no · --no-foreground
Positive and negative picks, prices, and results, each with its own foreground color.
--surface-edge · --surface-shadow
A subtle edge and elevation for cards, tickets, and controls.
--font-heading
An optional display face for larger market and game headings. The base uses its sans face.
Using your own theme?
If a component appears unstyled or a color is missing, add these tokens to your global CSS. The @theme inline block makes Tailwind utilities available; the light and dark blocks give them values. Replace the example colors and shadow with your own.
Define both the color and its foreground for readable text. Keep shadcn's --primary for general actions; --brand identifies your product, while --yes and --no describe outcomes.
Explore the themes
The other themes are starting points and inspiration. Compare their token sets, borrow a direction, then edit the values for your own interface.
View themes