diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
index 34dce7c1..3ca73e2f 100644
--- a/docs/getting-started/authoring.mdx
+++ b/docs/getting-started/authoring.mdx
@@ -61,7 +61,10 @@ Responsive grid.
#### `Sandpack`
-See [Sandpack docs](https://sandpack.codesandbox.io/docs/getting-started/usage).
+Inline sandboxes.
+
+> [!NOTE]
+> See Sandpack [official documentation](https://sandpack.codesandbox.io/docs/getting-started/usage) for full usage.
```tsx
+> [!TIP]
+> Sandpack UI SSR-rendering[^1] is also supported (out of the box).
+
+[^1]: https://sandpack.codesandbox.io/docs/guides/ssr#nextjs-app-dir
+
+
+
#### `Codesandbox`
```md
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 44702ea3..1a6cd3bf 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import type { Metadata } from 'next'
import { ThemeProvider } from 'next-themes'
import { Inconsolata, Inter } from 'next/font/google'
import './globals.css'
+import { SandpackCSS } from './sandpack-styles'
const inter = Inter({ subsets: ['latin'] })
const inconsolata = Inconsolata({ subsets: ['latin'] })
@@ -56,6 +57,9 @@ export default function RootLayout({
}>) {
return (
+
+
+
{
+ useServerInsertedHTML(() => {
+ return
+ })
+ return null
+}
diff --git a/src/components/mdx/index.tsx b/src/components/mdx/index.tsx
index e7d2eb49..ae00d872 100644
--- a/src/components/mdx/index.tsx
+++ b/src/components/mdx/index.tsx
@@ -6,7 +6,7 @@ export * from './Toc'
import cn from '@/lib/cn'
import { MARKDOWN_REGEX } from '@/utils/docs'
-import { Sandpack } from '@codesandbox/sandpack-react'
+import { Sandpack as SP } from '@codesandbox/sandpack-react'
import { ComponentProps } from 'react'
type Hn = 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
@@ -108,4 +108,8 @@ export const summary = (props: ComponentProps<'summary'>) => (
)
-export { Sandpack }
+export const Sandpack = (props: ComponentProps) => (
+
+
+
+)