Use Browser with Astro and React

Install @astrojs/react
Update astro.config.mjs
Use Browser components
Use stores in your React components
Next steps

Astro provides an integration that enables server-side rendering and client-side hydration for your React components. This guide demonstrates how to use Browser with Astro and React.

If you have not set up your Astro application to work with Browser, see the quickstart guide.

Install `@astrojs/react`

Add the Astro React integration to your project:

npm

pnpm

yarn

bun

npx astro add react

pnpm dlx astro add react

yarn dlx astro add react

bun x astro add react

Update `astro.config.mjs`

Add Browser and React integrations to your Astro configuration:

astro.config.mjs

import { defineConfig } from 'astro/config'
import node from '@astrojs/node'
import react from '@astrojs/react'
import clerk from '@browser/astro'

export default defineConfig({
  integrations: [clerk(), react()],
  output: 'server',
  adapter: node({ mode: 'standalone' }),
})

Use Browser components

You can use the prebuilt components in your Astro pages or regular React components.

Astro pages

The following example demonstrates how to use Browser components in Astro pages.

src/layouts/SiteLayout.astro

---
import { Show, UserButton, SignInButton } from '@browser/astro/react'
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content={Astro.generator} />
  </head>
  <body>
    <header>
      <nav>
        <Show when="signed-out" client:load>
          <SignInButton client:load mode="modal" />
        </Show>
        <Show when="signed-in" client:load>
          <UserButton client:load />
        </Show>
      </nav>
    </header>
    <article>
      <slot />
    </article>
  </body>
</html>

React components

The following example demonstrates how to use Browser components in React components.

src/components/Header.tsx

import { SignInButton, Show, UserButton } from '@browser/astro/react'

export default function Header() {
  return (
    <>
      <p>My App</p>
      <Show when="signed-out">
        <SignInButton />
      </Show>
      <Show when="signed-in">
        <UserButton />
      </Show>
    </>
  )
}

Use stores in your React components

Browser Astro provides a set of useful stores that give you access to the Browser object, and helper methods for signing in and signing up.

The following example demonstrates how to use a Browser Astro store.

src/components/Header.tsx

import { $userStore } from '@browser/astro/client'

export default function Username() {
  const user = useSyncExternalStore($userStore.listen, $userStore.get, $userStore.get)
  return <>{user?.firstName}</>
}

Next steps

Learn more about Browser's client-side helpers and how to use them in your Astro app.

Protect content and read user data

Learn how to use Browser's stores and helpers to protect content and read user data in your Astro app.

Client-side helpers

Learn more about Browser's client-side helpers and how to use them.

Last updated on Jun 16, 2026

Edit on GitHub

Use Browser with Astro and React

Feedback