LumnProvider

The root context provider for Lumn React components. It manages authentication, global styling (themes, colors), and API configuration.

typescript

import { LumnProvider, LumnPricing } from '@lumnsh/react';

function App() {
  return (
    <LumnProvider apiKey={process.env.NEXT_PUBLIC_LUMN_API_KEY} baseUrl={process.env.NEXT_PUBLIC_LUMN_API_BASE_URL}>
      <LumnPricing />
    </LumnProvider>
  );
}

LumnProviderProps

Parameter reference

Parameter	Type	Required	Description	Example
apiKey	string	Required	Your Lumn API Key (Client-side safe).	'lumn_test_...'
environment	LumnEnvironment	Optional	Display mode for UI components. Sandbox is for testing.	'sandbox'
theme	LumnTheme	Optional	Default theme for all child Lumn components.	'dark'
accentColor	string	Optional	Accent color for buttons and highlights (Hex/CSS).	'#10b981'
baseUrl	string	Optional	Custom API base URL (useful for proxying/on-prem).	'https://lumn.sh'

Interactive UI & Output

Paste your API key above to try

Live Customization

Changing these settings on the LumnProvider will automatically propagate to all child components.

Theme

Accent Color

Preview (Propagated to LumnPricing)

Enter API key to see live preview