How to Create a Custom Brick

Welcome to this guide on creating your first brick—a visually editable content block!

Let's start by creating a new "acme" folder for our custom theme "Acme" under the `react-bricks/bricks` folder. Inside "acme", create another folder named "TextImage" for our Text Image brick. Then create the brick file "TextImage.tsx" within it.

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 React component that returns an <h1> tag:

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

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