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_accentColor

Type:"aurora" | "cobalt" | undefined(optional)

Default:"aurora"

The accent color to use for all components under the Root:

• "aurora": StrataKit’s preferred green accent color.
• "cobalt": Blue accent color for better compatibility with older, iTwinUI-based applications.

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