How to Create a Custom Brick

In this guide we'll see how to create brick, which is a visually editable content block. Let's suppose we work for "Acme" and we want to create a brick with an editable Image and Text.

Create the folders and file

Let's start by creating a new "acme" folder under the `react-bricks/bricks` folder. This folder will contain all the bricks for "Acme". Then, inside "acme", create another folder named "TextImage" for the TextImage brick. Then create the brick file "TextImage.tsx" within it.

Create a minimal component

While we could quickly create a new brick using the snippets plugin by typing "brick", let's walk through the process step by step instead.

First, let's begin with an empty file and import the types from React Bricks. Since this project uses Next.js with the App router and Server Components, we'll import the types from "react-bricks/rsc".

import { types } from 'react-bricks/rsc'

Now, let's create a simple React component rendering an <h1> tag:

import { types } from 'react-bricks/rsc'

const TextImage = () => (
  <h1>Hello World!</h1>
)
  
export default TextImage

Turn the component into a Brick

Let's turn this component into a Brick. First of all, set the component TypeScript type to "brick".

import { types } from 'react-bricks/rsc'

const TextImage: types.Brick = () => (
  <h1>Hello World!</h1>
)
  
export default TextImage

You will see that now you have a TypeScript error: this is because a brick needs a `schema` property. Let's add the schema. The only required properties are `name` (a unique name for this brick) and `label` (the display name for the Admin UI).

import { types } from 'react-bricks/rsc'

const TextImage: types.Brick = () => (
  <h1>Hello World!</h1>
)
  
TextImage.schema = {
  name: 'acme-text-image',
  label: 'Text Image',
}

export default TextImage

Congratulations! You now have a fully working brick. But... you still cannot see it in the editor. Why? because we need to add it to the set of available bricks.

Add the Brick to the available bricks

Open the index.ts file under the /bricks folder.

import { types } from 'react-bricks/rsc'

const TextImage: types.Brick = () => (
  <h1>Hello World!</h1>
)
  
TextImage.schema = {
  name: 'acme-text-image',
  label: 'Text Image',
}

export default TextImage

Here we'll add our new "Acme" theme. Each React Bricks theme has categories, like "Headings", "Call to actions", "Features". Inside the "acme" theme we create a "Content" category with our "TextImage" brick, imported from its file.