Server-side rendering

spacing-ui is SSR-safe out of the box. There are no window references during render, and hydration-sensitive behavior (focus, portals) is deferred until after mount.

Next.js App Router

Import primitives directly in Server Components. Any interactive part (Dialog, Select, Tabs, Tooltip) can then be wrapped in a Client Component boundary as usual:

// app/page.tsx (Server Component)
import { PriceTabs } from "./price-tabs";
 
export default function Page() {
  return <PriceTabs />;
}

// app/price-tabs.tsx
"use client";
import { Tabs } from "@spacing-ui/core";
export function PriceTabs() { ... }

Hydration and portals

Content rendered through a portal (Dialog.Overlay, Select.Content, Tooltip.Content) mounts on the client after hydration. The initial server HTML omits portal contents — this is expected and does not cause a hydration mismatch.