Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt

Use this file to discover all available pages before exploring further.

CSPProvider

Provides a default Content Security Policy (CSP) configuration for Base UI components that require inline <style> or <script> tags.

Import

import { CSPProvider } from '@base-ui/react/csp-provider';

Component Signature

function CSPProvider(props: CSPProvider.Props): React.ReactElement

Props

children
React.ReactNode
The content to be wrapped by the CSP provider.
nonce
string | undefined
The nonce value to apply to inline <style> and <script> tags.
disableStyleElements
boolean | undefined
default:"false"
Whether inline <style> elements created by Base UI components should not be rendered. Instead, components must specify the CSS styles via custom class names or other methods.

Type Definitions

CSPProvider.Props

interface CSPProviderProps {
  children?: React.ReactNode;
  nonce?: string | undefined;
  disableStyleElements?: boolean | undefined;
}

CSPProvider.State

interface CSPProviderState {}

Usage Example

import { CSPProvider } from '@base-ui/react/csp-provider';

function App() {
  return (
    <CSPProvider nonce="your-nonce-value" disableStyleElements={false}>
      {/* Your Base UI components */}
    </CSPProvider>
  );
}

Build docs developers (and LLMs) love