shadcn.io is an independent project built on shadcn/ui
Installation
Usage
import { ClientOnly } from "@/components/ui/client-only";<ClientOnly>
<div class="rounded-xl border bg-muted px-4 py-3 text-foreground text-sm">
This content is only rendered on the client side.
</div>
</ClientOnly>Demos
Fallback
FAQ
What does ClientOnly render on the server?
Its fallback prop, or nothing when you give none. The children render only after the component mounts in the browser, so they are not in the server's HTML. Search engines that read only the first HTML will not see them.
Why can children be a function?
A function child is called only after mount, so code inside it can read window, localStorage or navigator without a guard. Plain nodes are already created by the parent when it renders, even though ClientOnly holds them back. Pass a function when creating them touches a browser API.
Does ClientOnly avoid hydration mismatches?
Yes for what it wraps: the server and the first client render both show the fallback, then an effect flips a flag and the children render. The cost is one extra render, and a visible change from the fallback to the content.
What should I use as the fallback?
Something with the same size as the content, such as a skeleton or an empty box, so the layout does not jump when the children arrive. With no fallback, nothing is shown until mount.
When should I use ClientOnly instead of the useIsClient hook?
Use ClientOnly to wrap a subtree. Use useIsClient when you need the boolean to branch inside a component. Both are false on the server and on the first client render, and both turn true in an effect.
API Reference
ClientOnly
data-slot="client-only"
childrenJSX.Element | (() → JSX.Element)
What renders once it's mounted in the browser: nodes, or a function that returns them.
- Type
JSX.Element | (() → JSX.Element)
fallback?JSX.Element
What renders on the server and until it mounts.