Create a brick

Create a custom brick

Create your first custom brick and register it in React Bricks.

Estimated time: 5 minRaw Markdown

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:

bricks/
  acme/

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

bricks/
  acme/
    TextImage/

Inside TextImage, create a TextImage.tsx file:

bricks/
  acme/
    TextImage/
      TextImage.tsx

Start from a simple React component

Let's begin with a plain React component:

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

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:

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.