Client Only for Solid

Render content only on the client side.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

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

PreviewCode

API Reference

ClientOnly

data-slot="client-only"

PropType

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.

asChild?(props: ParentProps) => JSX.Element

Render your own element: a function that gets the part's props to spread on it.

Type: (props: ParentProps) => JSX.Element