---
title: Render differently in admin and frontend
category: Custom bricks
order: 14
status: published
summary: Detect whether a brick is rendering in the Admin interface or on the public frontend and render different UI accordingly.
estimatedTime: 4 min
keywords: admin frontend isadmin useadmincontext render differently
---

## What you'll build

In this how-to, you'll learn how to render different UI in a brick depending on where it is rendered:

- inside the React Bricks Admin interface
- on the public frontend site

This is useful when you want to show editing helpers in the admin, but cleaner output on the public site.

## When this is useful

Sometimes a brick needs slightly different behavior in different environments.

For example, you may want to:

- show an editing hint only in the admin
- add padding to carousel images in admin so editors can focus a slide without triggering image selection
- disable the click action on some UI element in admin
- react differently when the full-screen preview is active

## For Next.js App Router with RSC: `isAdmin()`

If you're using Next.js App Router with React Server Components, React Bricks provides the `isAdmin()` function.

It returns:

- `true` if execution runs inside the Admin interface
- `false` otherwise

Here is a simple example using a `TextImage` brick:

```tsx {9,13}
import { isAdmin, RichText, Text, types } from 'react-bricks/rsc'

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}

const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {
  const admin = isAdmin()

  return (
    <div className="container">
      {admin ? (
        <div className="mb-4 rounded-lg bg-amber-50 px-4 py-2 text-sm text-amber-800">
          You are editing this brick in the Admin interface.
        </div>
      ) : null}

      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />

      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
      />
    </div>
  )
}
```

This pattern works well when the brick is a server component and you only need to know whether it is running in admin or not.

Docs reference:
[`isAdmin()`](https://docs.reactbricks.com/rsc/#isadmin)

## For Next.js pages or Astro: `useAdminContext`

If you're using Next.js pages or Astro, you can use the `useAdminContext` hook instead.

Example usage:

```tsx
const { isAdmin, previewMode } = useAdminContext()
```

The hook returns:

- `isAdmin`: `true` in the Admin interface and `false` on the public frontend
- `previewMode`: `true` when the full-screen preview is active in the Admin interface

Here is an example:

```tsx {9,13}
import { RichText, Text, types, useAdminContext } from 'react-bricks/frontend'

interface TextImageProps {
  title: types.TextValue
  description: types.TextValue
}

const TextImage: types.Brick<TextImageProps> = ({ title, description }) => {
  const { isAdmin, previewMode } = useAdminContext()

  return (
    <div className="container">
      {isAdmin && !previewMode ? (
        <div className="mb-4 rounded-lg bg-sky-50 px-4 py-2 text-sm text-sky-800">
          You are editing this brick in the Admin interface.
        </div>
      ) : null}

      <Text
        propName="title"
        value={title}
        placeholder="Type a title..."
        renderBlock={({ children }) => (
          <h2 className="text-3xl font-extrabold">{children}</h2>
        )}
      />

      <RichText
        propName="description"
        value={description}
        placeholder="Type a description..."
        renderBlock={({ children }) => (
          <p className="text-lg text-slate-600">{children}</p>
        )}
      />
    </div>
  )
}
```

In this example:

- the helper message is shown in the admin
- it is hidden in full-screen preview mode
- it is also hidden on the public frontend

Docs reference:
[`useAdminContext`](https://docs.reactbricks.com/api-reference/hooks/use-admin-context)

## Which one should you use?

Use:

- `isAdmin()` for Next.js App Router with `react-bricks/rsc`
- `useAdminContext()` for Next.js pages or Astro

So the choice depends on the React Bricks package and rendering model you are using.

## A simple rule of thumb

If your brick is a server component in a Next.js App Router project, use `isAdmin()`.

If your brick is using the hook-based environment, use `useAdminContext()`.

Your brick can now render differently in admin and frontend.