Theme Provider
Wrapper component that injects CSS custom properties onto a <div>, allowing descendant components to inherit overridden theme values. Keys without a -- prefix are automatically prefixed with --color-.
[SRC]tsx
1import { ThemeProvider } from "@mdrbx/nerv-ui";
Basic Theme Override
CUSTOM COLORSinspection frame
live inspectionframe-01
THEMED PANEL
Custom properties cascade to all children.
Raw CSS Variables
Use the -- prefix to set arbitrary CSS custom properties directly.
RAW VARIABLESinspection frame
live inspectionframe-01
RAW OVERRIDES
Keys starting with -- are passed through as-is.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| theme | Record<string, string> | {} | Theme overrides — keys are CSS custom property names (without -- prefix gets --color- prepended), values are CSS values |
| children* | ReactNode | — | Child content that inherits the theme overrides |
| className | string | "" | Additional CSS classes on the wrapper div |
[i]KEY PREFIXING
Keys without a -- prefix are automatically converted to --color-{key}. For
example, "nerv-green": "#ff00ff" becomes --color-nerv-green: #ff00ff. Keys
that already start with -- are passed through unchanged.