Theming

Every Rabit component reads from the theme you pass to RabitProvider. Set your brand colors, corner radius, and fonts once — the auth modal, wallet dashboard, buttons, and panels all follow.

app/providers.tsx


<RabitProvider
  config={{
    /* …projectId, apiKey, chains… */
    theme: {
      colors: {
        primary: '#295B4F',   // buttons, accents
        secondary: '#569F8C',
      },
      borderRadius: 'medium',  // 'none' | 'small' | 'medium' | 'large'
      fonts: {
        body: 'Inter, sans-serif',
        monospace: 'JetBrains Mono, monospace',
      },
    },
  }}
>
  {children}
</RabitProvider>

Options

Prop	Type	Default	Description
`colors.primary`	`string`	—	Primary action color (buttons, links, highlights).
`colors.secondary`	`string`	—	Secondary accent color.
`colors.background`	`string`	—	Surface background (defaults to a dark theme).
`colors.text`	`string`	—	Primary text color.
`borderRadius`	`'none' \| 'small' \| 'medium' \| 'large'`	`'large'`	Corner rounding across all components.
`fonts.body`	`string`	—	Body font stack.
`fonts.monospace`	`string`	—	Monospace font stack (addresses, amounts).

★

Match your app in one line

Set colors.primary to your brand color and borderRadius to match your buttons — that alone makes the wallet feel native to your product.

Reading the theme yourself

Style your own UI to match with useTheme():


import { useTheme } from 'rabitwallet'
 
const theme = useTheme()
<div style={{ background: theme.colors.surface, borderRadius: theme.radius.md }} />