---
title: Create a custom brick
order: 4
status: published
summary: Create your first custom brick and register it in React Bricks.
estimatedTime: 5 min
keywords: create custom brick block component
---

## What you'll build

In this how-to, you'll create your first custom brick.

We'll start with a very simple example: a `TextImage` brick that, for now, just renders "Hello world".

The goal is to understand the minimum required structure of a brick:

- a React component
- the `types.Brick` type
- the `schema` property
- registration in the exported bricks list

In the next how-to, we'll make this brick visually editable.

## Create the folders

Inside your `/bricks` folder, create a folder for your custom theme (let's call it `acme`).

For example:

```bash {2}
bricks/
  acme/
```

Inside that folder, create a folder for the new brick:

```bash {3}
bricks/
  acme/
    TextImage/
```

Inside `TextImage`, create a `TextImage.tsx` file:

```bash {4}
bricks/
  acme/
    TextImage/
      TextImage.tsx
```

## Start from a simple React component

Let's begin with a plain React component:

```tsx
const TextImage = () => {
  return <h1 className="text-3xl font-extrabold">Hello world</h1>
}

export default TextImage
```

This is just a standard React component. To turn it into a brick, we only need two small changes.

> 👉 This example uses **Tailwind CSS**, but React Bricks works with any CSS framework.

## Turn it into a brick

First, change its type to `types.Brick`.

Then add a `schema` property with at least:

- `name`: the unique name of the brick
- `label`: the name shown in the visual editor

```tsx {1,7-10}
import { types } from 'react-bricks/rsc'

const TextImage: types.Brick = () => {
  return <h2 className="text-3xl font-extrabold">Hello world</h2>
}

TextImage.schema = {
  name: 'text-image',
  label: 'Text Image',
}

export default TextImage
```

At this point, `TextImage` is a valid brick.

> 👉 This example uses **Next.js with the App Router**, so we import from `react-bricks/rsc`. If you're using **Astro**, import from `react-bricks/astro` instead.

## Register the brick

Now add the brick to your exported bricks list.

In the starter projects, you can find an index file at `bricks/index.ts` that exports all bricks.
Let's add our new brick inside a new **Acme** theme:

```tsx {6,9-17}
import { types } from 'react-bricks/rsc'

import HeroUnit from './custom/MyHeroUnit'
import Pokemon from './custom/Pokemon'
import reactBricksUITheme from './react-bricks-ui'
import TextImage from './acme/TextImage/TextImage'

const bricks: types.Theme[] = [
  {
    themeName: 'Acme',
    categories: [
      {
        categoryName: 'Content',
        bricks: [TextImage],
      },
    ],
  },
  reactBricksUITheme, // React Bricks UI
  {
    themeName: 'Default',
    categories: [
      {
        categoryName: 'Custom bricks',
        bricks: [HeroUnit, Pokemon], // Custom bricks
      },
    ],
  },
]

export default bricks
```

## Use it in the editor

Once the brick is registered, it becomes available in the visual editor.

To test it:

- create a new page (e.g. "Test")
- click the "+" button to add a new brick
- select the **Acme** theme
- select the **Text Image** brick

You should see the brick render `Hello world`.

You can add multiple instances, but you won't be able to edit the content yet.

That's expected. For now, the brick has no editable props or fields.

## What's next

You now have a working custom brick.

In the next how-to, we'll make it visually editable by adding props and schema fields, so editors can change the content directly in the React Bricks editor.