KivoraProvider
Theme and color mode context for your application.
Text and Markdown example
1<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>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
1import { KivoraProvider } from "@kivora/nextjs";Interactive examples run inside a component with "use client". The playground's Copy button includes the imports needed for the current example.
API reference 0.2.0
Types from the installed published version, including component properties and common HTML attributes. “Optional” does not imply a default value; omitting a property lets the component decide.
| Property | Type | Description |
|---|---|---|
childrenRequired | ReactNode | Content or child elements of the component. |
colorMode | "light" | "dark" | "system" | Light, dark or system preference mode. |
theme | string | 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; }; } | Changes to the theme object; does not generate CSS variables. |
TypeScript definition
Review each component's properties and published declaration. Native and accessibility attributes are inherited from the element specified by its type.
KivoraProvider4 properties
1declare function KivoraProvider({ children, colorMode, theme, themeOverrides }: KivoraProviderProps): React.JSX.Element;