Client Only

Component

About

A wrapper that renders its children only after the app has hydrated on the client, used to safely mount browser-only widgets (random IDs, timestamps, window-dependent UI) inside server-rendered pages without hydration mismatches.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Client Only to your project and fits it to your theme.

Code

How Client Only is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import ClientOnly from "@/components/ui/client-only";

function randomId() {
  return Math.random().toString(36).slice(2, 10).toUpperCase();
}

export default function ClientOnlyDemo() {
  const sessionId = randomId();
  const renderedAt = new Date().toLocaleTimeString();

  return (
    <div className="flex w-full max-w-sm flex-col gap-3 rounded-lg border border-border bg-card p-6 text-card-foreground shadow-sm">
      <span className="text-sm font-medium text-muted-foreground">
        Session snapshot
      </span>
      <ClientOnly
        fallback={
          <div className="flex flex-col gap-2">
            <div className="h-4 w-32 animate-pulse rounded bg-muted" />
            <div className="h-4 w-20 animate-pulse rounded bg-muted" />
          </div>
        }
      >
        <div className="flex flex-col gap-1">
          <p className="text-lg font-semibold tracking-tight">{sessionId}</p>
          <p className="text-xs text-muted-foreground">
            Rendered on the client at {renderedAt}
          </p>
        </div>
      </ClientOnly>
    </div>
  );
}