> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# <RootStyleRegistry>

> The `<RootStyleRegistry>` component provides support for Makeswift's CSS-in-JS runtime.

The `<RootStyleRegistry>` component provides support for Makeswift's CSS-in-JS runtime.

## Props

**`classNamePrefix`** `string` — default: ms

Optional prefix for Makeswift-generated CSS classes.

---

**`enableCssReset`** `boolean`

Toggle the built-in CSS reset. Set to `false` when using `@layer`-based CSS
frameworks like Tailwind. See this
[guide](/developer/docs/guides/troubleshooting/tailwind-styles-being-overridden)
for more information.

---

**`forceImportant`** `boolean` — default: false

When `true`, Makeswift-generated CSS declarations will include the
[`!important` qualifier](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/important),
helping them override conflicting styles from your site. Enable this if
external CSS prevents content from appearing as configured in Makeswift.

---

**`children`** `React.Node`

The children components to render.

---

## Example

#### App Router

The following example shows how the `<RootStyleRegistry>` is used to implement the `<MakeswiftProvider>` client component as outlined in the [App Router Installation guide](/developer/docs/get-started/installation/app-router). The `<MakeswiftProvider>` is subsequently utilized in the App Router's [root layout](https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layouts).

**`src/makeswift/provider.tsx`**

```tsx src/makeswift/provider.tsx
"use client";

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

export function MakeswiftProvider({
  children,
  siteVersion,
}: {
  children: React.ReactNode;
  siteVersion: SiteVersion | null;
}) {
  return (
    <ReactRuntimeProvider siteVersion={siteVersion} runtime={runtime}>
      <RootStyleRegistry>{children}</RootStyleRegistry>
    </ReactRuntimeProvider>
  );
}
```

**`src/app/layout.tsx`**

```tsx src/app/layout.tsx
import type { Metadata } from "next";
import { draftMode } from "next/headers";
import { Inter } from "next/font/google";
import { getSiteVersion } from "@makeswift/runtime/next/server"
import { MakeswiftProvider } from "@/makeswift/provider";
import "@/makeswift/components";
import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <MakeswiftProvider siteVersion={await getSiteVersion()}>
          {children}
        </MakeswiftProvider>
      </body>
    </html>
  );
}
```