​
Props

​
cacheKey
string
default:"mswft"

Optional key used when creating an Emotion cache for styles. Pass a unique value to avoid conflicts when multiple Emotion instances share the same key.

​
enableCssReset
boolean
default:true

Toggle the built-in CSS reset. Set to false when using @layer-based CSS frameworks like Tailwind. See this guide for more information.

​
children
React.Node

The children components to render.

​
Example

The following example shows how the <RootStyleRegistry> is used to implement the <MakeswiftProvider> client component as outlined in the App Router Installation guide. The <MakeswiftProvider> is subsequently utilized in the App Router’s root layout.

"use client";

import { runtime } from "@/makeswift/runtime";
import {
  ReactRuntimeProvider,
  RootStyleRegistry,
} from "@makeswift/runtime/next";
import "@/makeswift/components";

export function MakeswiftProvider({
  children,
  previewMode,
}: {
  children: React.ReactNode;
  previewMode: boolean;
}) {
  return (
    <ReactRuntimeProvider previewMode={previewMode} runtime={runtime}>
      <RootStyleRegistry>{children}</RootStyleRegistry>
    </ReactRuntimeProvider>
  );
}

​
Props

​
cacheKey
string
default:"mswft"

Optional key used when creating an Emotion cache for styles. Pass a unique value to avoid conflicts when multiple Emotion instances share the same key.

​
enableCssReset
boolean
default:true

Toggle the built-in CSS reset. Set to false when using @layer-based CSS frameworks like Tailwind. See this guide for more information.

​
children
React.Node

The children components to render.

​
Example

The following example shows how the <RootStyleRegistry> is used to implement the <MakeswiftProvider> client component as outlined in the App Router Installation guide. The <MakeswiftProvider> is subsequently utilized in the App Router’s root layout.

"use client";

import { runtime } from "@/makeswift/runtime";
import {
  ReactRuntimeProvider,
  RootStyleRegistry,
} from "@makeswift/runtime/next";
import "@/makeswift/components";

export function MakeswiftProvider({
  children,
  previewMode,
}: {
  children: React.ReactNode;
  previewMode: boolean;
}) {
  return (
    <ReactRuntimeProvider previewMode={previewMode} runtime={runtime}>
      <RootStyleRegistry>{children}</RootStyleRegistry>
    </ReactRuntimeProvider>
  );
}