Root API

Import

import { Root } from "@stratakit/foundations";

Root.Root

Base element: <div>

Component to be used at the root of your application. It ensures that StrataKit styles and fonts are loaded and automatically applied to the current page or the encompassing shadow-root.

Make sure to specify the colorScheme and density props.

Example:

<Root colorScheme="dark" density="dense">
  <App />
</Root>

colorScheme

Type: "light" | "dark" (required)

The color scheme to use for all components under the Root.

density

Type: "dense" | undefined (optional)

The density to use for all components under the Root.

portalContainer

Type: ReactElement<unknown, string | JSXElementConstructor<any>> | undefined (optional)

Allows to customize the root portal container element.

rootNode

Type: Document | ShadowRoot | undefined (optional)

Default: document

The root node to which this Root component is attached.

This needs to be set when the Root is rendered within shadow DOM or a popout window.

synchronizeColorScheme

Type: boolean | undefined (optional)

Default: true

Whether to synchronize the color scheme with the parent document (or shadow-root host).

This is useful when you don’t have explicit control over the color scheme of the host.

It can be disabled if you want to isolate StrataKit’s styles to <Root> and its descendants.

unstable_htmlSanitizer

Type: ((html: string) => string) | undefined (optional)

An HTML sanitizer function that will be used across all components wherever DOM elements are created from HTML strings.

When this prop is not passed, sanitization will be skipped.

Example:

unstable_htmlSanitizer={DOMPurify.sanitize}

Additional props

• render