The CMS for React.Really.

Leverage your React components!

In React Bricks CMS you define your visually editable content blocks ("bricks") as React components (using the react-bricks library).

You don't have to go back and forth between the headless CMS to set up fields and the frontend where you query and use them.

You define your fields as props of your component, never leaving your code editor.

React Bricks is a React library (written in TypeScript), for React developers.

Structure of a React Bricks app

A React Bricks application (for example created with Next.js or Gatsby) is composed of:

  • An Admin section which uses React Bricks Admin components (Editor, Playground, AppSettings)
  • The Pages which use the Viewer component from React Bricks
  • The visually editable content blocks that we call "bricks"
Schema of a React Bricks application with React CMS blocks

What are these bricks?

The bricks are React components that make up your design sytem. You create them in code, using the React Bricks library and your content creators use them to compose content.

For visually editable props like text and images, you just use React Bricks components inside of your JSX code.

For other props, like a background color you map your props to sidebar controls, using the brick's schema.

React Bricks is very flexible

Almost everything in React Bricks is fully customizable.

For example, you can provide your own React components as sidebar controls, you can have custom fields on pages, you can use external content from a headless CMS or an e-commerce system, you can access everything in your content blocks via React hooks, you can use any React framework, any React router, any CSS library: make it your own!