# KivoraProvider

Theme and color mode context for your application.

## How to use it

Mount it in a layout Client Component. colorMode updates the document's dark class. themeOverrides changes the context object; customize CSS colors with variables.

The provider is already mounted in this documentation. Avoid nesting providers with different color modes: both update the document's dark class.

## Import


```tsx
import { KivoraProvider } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<div><Badge variant="secondary">Shared theme</Badge><p style={{marginTop:16}}>This playground is already inside KivoraProvider. Change the theme using the controls above.</p></div>
```


## API: KivoraProvider


```typescript
declare function KivoraProvider({ children, colorMode, theme, themeOverrides }: KivoraProviderProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | ReactNode | Yes | Content or child elements of the component. |
| colorMode | "light" \| "dark" \| "system" | No | Light, dark or system preference mode. |
| theme | string | No | Component theme or theme identifier, depending on the API. |
| themeOverrides | { color?: { background?: string; foreground?: string; card?: string; cardForeground?: string; popover?: string; popoverForeground?: string; primary?: string; primaryForeground?: string; secondary?: string; secondaryForeground?: string; muted?: string; mutedForeground?: string; accent?: string; accentForeground?: string; destructive?: string; destructiveForeground?: string; border?: string; input?: string; ring?: string; }; radius?: { sm?: string; md?: string; lg?: string; xl?: string; }; spacing?: { xs?: number; sm?: number; md?: number; lg?: number; xl?: number; }; fontSize?: { sm?: number; base?: number; lg?: number; }; } | No | Changes to the theme object; does not generate CSS variables. |

Source: https://kivora.pro/docs/componentes/kivora-provider