Stable in React

CSP Provider

Configures how Base UI components render inline <style> and <script> tags under a Content Security Policy: a nonce for each tag, or disableStyleElements to leave the styles out.

CSP Provider renders nothing to look at; its usage is in the code.

Hover a part or use it. The code follows. ·

8Tests passing in React · 0 failing

0.3 KiBSize

Not measured yetMemory

Not measured yetSpeed

productdevbook and 3 upstream authors5 commits · last Nov 3

Install#

One package per framework. CSP Provider's parts come from it; the anatomy tab at the top shows how they nest.

bun add @▢▢▢▢/react

One part. The example uses one of them; the data does not say which are required.

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

Examples#

CSPProvider has no live example: it changes the tags the components render, not how they look or behave.

Styling and accessibility#

The parts ship no styles. Style their states with these attributes; the CSS tab at the top has a sheet. The same CSS works in all five frameworks.

CSP Provider has no data attributes or CSS variables.

Keyboard

CSPProvider renders nothing you interact with and has no keys.

Set for you

nothing in the page; nonce on the inline tags of the components insidethe components keep working under a strict policy, with no change to what is readCSPProvider

API reference#

3 props across 1 parts, in React syntax, and className, style, render once for every part. Open a row to try it.

Filter props

CSPProvider · all parts

Use it in React#

What differs from the React API. Switch the framework at the top of the page.

@▢▢▢▢/react is the React 19 package. Its parts, props, data attributes and error messages are upstream Base UI's, and upstream's own tests run against it.

Parts
Each component is its own entry point and exports one namespace named after it.
```
import { Switch } from '@base-ui-next/react/switch'

export function Example() {
  return (
    <Switch.Root>
      <Switch.Thumb />
    </Switch.Root>
  )
}
```
A part renders the element its API reference names, such as a <span> for Switch.Root.
Props and events
Props and callbacks have upstream's names and signatures: onCheckedChange(checked, details), onOpenChange(open, details), onValueChange(value, details). details carries reason, event, cancel() and allowPropagation(). Native handlers are React's (onClick, onKeyDown), and event.preventBaseUIHandler() stops a part's own handler.
Styling
className takes a string or a function (state) => string; style takes an object or a function (state) => object. The state's data-* attributes are on the element for CSS.
render
render takes an element (render={<a href="/docs" />}) or a function (props, state) => element that spreads props on what it returns.
Refs
ref reaches the part's element. Imperative handles are ref props, as upstream: inputRef, and actionsRef ({ validate } on Field and Form, { unmount, close } on Dialog).
Binding
A part is controlled when its value prop (checked, open, value) is set, and uncontrolled with the default form (defaultChecked, defaultOpen, defaultValue). React has no two-way binding: pair the value with its change callback.
From @base-ui/react
Change the import from @base-ui/react/<component> to @▢▢▢▢/react/<component>.
From @base-ui/react
Nothing else changes: props, parts, data attributes and errors are the same.