Custom components

note

This document applies to sfb-toolkit@5.x.x and sfb-theme-components@0.0.352 or newer. For older versions please see here.

The Plaza theme enables you to create themes using our React components library, which is included in the latest sfb-toolkit version. The toolkit includes components that you can use to quickly build and customize your storefront pages through the Theme Editor. For example, you can integrate Slider, Carousel, ProductBanner, and many more components with your Plaza theme.

If none of the components in our library suit your needs, you can create custom components. Custom components are components that you can create and customize through the schema object.

The Getting Started section contains everything you need to know to start building your custom components according to our guidelines and best practices.

caution

While custom components allow for great flexibility please check the risks associated with using them.

Installation

caution

Once custom components are installed there is currently no command to automatically reverse this action! See here for instructions on how to manually remove them.

To setup your theme to use custom components, execute the following command:

sfb-toolkit components

For a more in depth explanation on this command please see here.

Creating new component

You can create a new component by executing the command below. For more information about this command see here.

sfb-toolkit components-add

Reuse our UI library components

You can reuse existing UI elements (atoms and components) from our UI library for your custom components. For example, if you want to reuse the Button atom in your custom component, add the following import:

Components

To reuse a component you can execute the following toolkit command to create a local copy of the component(s) selected. For more information about this command see here.

sfb-toolkit components-copy

The components available to be copied will be listed after the components-copy command is executed.

note

The components available depend on the version of the UI library (sfb-theme-components) used by the theme.

Atoms

info

Atoms are small UI elements that we use to create components.

To reuse one of our atoms you can import them directly from @appdirect/sfb-theme-components/src/atoms:

import Button from '@appdirect/sfb-theme-components/src/atoms/button/Button';

Availability

@appdirect/sfb-toolkit@5.x.x
@appdirect/sfb-theme-components@0.0.352+