OpenAPI: Fix Scalar integration

.changeset/funny-terms-poke.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': patch
+---
+
+Fix Scalar integration

packages/openapi/src/scalar/client.tsx

@@ -9,6 +9,7 @@ import { MethodLabel } from '@/ui/components/method-label';
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
 import type { OpenAPIV3_1 } from 'openapi-types';
+import '@scalar/api-client-react/style.css';
 
 export default function ScalarPlayground({
   path,
@@ -40,9 +41,7 @@ export default function ScalarPlayground({
       <ApiClientModalProvider
         configuration={{
           theme: 'moon',
-          spec: {
-            content: spec,
-          },
+          content: spec,
         }}
       >
         <Trigger path={path} method={method} />

packages/openapi/src/scalar/index.tsx

@@ -4,7 +4,7 @@ import { lazy } from 'react';
 
 const Client = lazy(() => import('./client'));
 
-export function APIPlayground({
+function APIPlayground({
   path,
   method,
   ctx,
@@ -20,6 +20,8 @@ export function APIPlayground({
 
 /**
  * Enable Scalar for API playgrounds by wrapping your options inside.
+ *
+ * Requires `@scalar/api-client-react` to be installed, it imports the styles automatically.
  */
 export function withScalar(
   options: CreateAPIPageOptions = {},