YO Kit Provider

YoKitProvider is an optional theming provider for the pre-built UI components in @yo-protocol/react (VaultCard, DepositModal, RedeemModal).

Usage

import { YoKitProvider } from '@yo-protocol/react'

// Use a preset theme
<YoKitProvider theme="dark">
  <App />
</YoKitProvider>

// Or customize the theme
<YoKitProvider theme={{
  colors: {
    primary: '#6366f1',
    background: '#0f0f0f',
  },
}}>
  <App />
</YoKitProvider>

Props

Prop	Type	Default	Description
children	ReactNode	—	Required
theme	'light' | 'dark' | Partial<YoKitTheme>	'dark'	Theme preset or custom overrides

Theme Object

When providing a custom theme, you can override any subset of:

interface YoKitTheme {
  colors: Record<string, string>
  radii: Record<string, string>
  fonts: Record<string, string>
  shadows: Record<string, string>
}

Custom themes are merged on top of the dark theme defaults.

How It Works

YoKitProvider injects a <style> tag with CSS custom properties into the document head. The pre-built components reference these variables for styling.

This is separate from the docs-site theme (managed by next-themes). You only need YoKitProvider if you use the pre-built UI components.