Client Only

import { ClientOnly } from "@anantya/uix";

Overview

ClientOnly renders its children only in the browser, once the page is hydrated, and a fallback before that. Use it for content that can't render on the server, or would render differently there, such as a time in the reader's own time zone.

Prefer content that renders on the server where you can: it shows in the first paint, and search engines see it.

Signature

function ClientOnly(props: ClientOnlyProps): ReactNode;

interface ClientOnlyProps {
  children?: ReactNode;
  fallback?: ReactNode;
}

Parameters

Returns

fallback on the server and during hydration, so the server and client HTML match, then its children. When it mounts after hydration, such as on a page reached with a client-side link, it renders its children straight away.

Example

"use client";

import { ClientOnly } from "@anantya/uix";

const dueAt = new Date("2026-11-30T17:00:00+05:30");

function LocalTime({ date }: { date: Date }) {
  const text = new Intl.DateTimeFormat("en-IN", { dateStyle: "medium", timeStyle: "short" }).format(
    date,
  );
  return <time dateTime={date.toISOString()}>{text}, your time</time>;
}

export default function LocalDueTime() {
  return (
    <p className="text-sm">
      INV-2026-0142 is due on{" "}
      <ClientOnly fallback="30 Nov 2026, 5:00 pm IST">
        <LocalTime date={dueAt} />
      </ClientOnly>
    </p>
  );
}

Notes

• Put code that needs the browser, such as Intl with the reader's time zone or window, in a component you pass as a child, as LocalTime is in the example. An expression written straight into the children still runs on the server
• Give fallback content that makes sense on its own and is about the same size, such as the time in your main market's time zone, so the page doesn't shift when the children appear
• To change only how something looks by screen size, use Tailwind's breakpoints, such as md:, instead. They are right from the first paint