> ## Documentation Index > Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt > Use this file to discover all available pages before exploring further. # > The `` component provides support for Makeswift's CSS-in-JS runtime in Next.js' App Router. ## Props Optional key used when creating an [Emotion cache](https://emotion.sh/docs/@emotion/cache) for styles. Pass a unique value to avoid conflicts when multiple Emotion instances share the same key. Toggle the built-in CSS reset. Set to `false` when using `@layer`-based CSS frameworks like Tailwind. See this [guide](/developer/guides/troubleshooting/tailwind-styles-being-overridden) for more information. The children components to render. ## Example The following example shows how the `` is used to implement the `` client component as outlined in the [App Router Installation guide](/developer/app-router/installation). The `` is subsequently utilized in the App Router's [root layout](https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layouts). ```tsx src/makeswift/provider.tsx theme={null} "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 ( {children} ); } ``` ```tsx src/app/layout.tsx theme={null} 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 ( {children} ); } ```