Skip to main content

Customizing the Admin UI

You can customize the React Bricks Admin to make it your own:

You can provide your own logo that will appear on the Admin header

Login UI​

By providing the React Bricks configuration loginUI object you can:

  • Customize the right image (or remove it)
  • Add your logo with width and height
  • Change the welcome text and its CSS style

By default the Admin has 3 menu items: Editor, Playground and Settings (for the editor "Deploy").

By providing the React Bricks configuration getAdminMenu function, you can customize the menu items for the Admin and Editor users. The function receives an object as argument and you have isAdmin available on the object, so that you can provide two different menu items for Admin and Editor users.

Block icons position​

You can choose to have the action icons of a block (add new before/after, move up/down, remove, duplicate) either outside of the blocks (default) or inside of the blocks, setting the React Bricks configuration blockIconsPosition accordingly.

Click to edit side​

You can choose the corner of the screen where the click to edit button appears.
The click to edit button allows the editors, when they are logged in, to enter the editor interface directly from a page of the website.
By default the icon is in the bottom right corner, but you may change it (for example if you have a chat widget in that position) or disable it, by setting the React Bricks configuration clickToEditSide accordingly.

Responsive breakpoints​

By default editors can preview pages at 375px (mobile), 768px (tablet) and 100% (desktop) resolutions. You can provide your own array of breakpoints, choosing the screen size and type of device (for the icon), setting the React Bricks configuration responsiveBreakpoints array.

Features​

You may also customize the functionalities available to your users (for example the autosave, preview, Unsplash integration etc) setting the Feature flags.