Preview Card

@▢▢▢▢/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.