Front UI Kit

The Front UI Kit is a set of React components that you can use to build plugins. The benefits of using the Front UI Kit include:

• Access to a wide array of components that plugins typically implement (such as buttons, menus, tabs, date pickers, etc.).
• Saving time compared to building the components from scratch.
• Uniformity in the design of the components, which helps Front users become familiar with your plugin more quickly.

Design Framework

The Front UI Kit provides React components written in TypeScript. As such, you must use JavaScript to build your plugin in order to use the Front UI Kit. To learn about these frameworks, refer to the following resources:

• React
• TypeScript

You can view the source code for the Front UI Kit on GitHub.

Install the Front UI Kit

The Front UI Kit is available as a library that you import into your React project. Complete the following steps to install the Front UI Kit:

1. Open a terminal window in the React project directory in which you are developing your plugin.
2. Run npm install @frontapp/ui-kit to install the Front UI kit. You can also use the command yarn add @frontapp/ui-kit if you prefer to use Yarn instead of npm.

👍

Tip: Peer dependencies

If the installation reports errors due to peer dependencies, install the peer dependencies before re-attempting to install the Front UI Kit. You can view the peer dependencies in the peerDependencies object of the package.json file.

3. Import a component from the Front UI kit via an import statement on the page you want to use the component. Then, copy the code for the component onto your page.

📘

Copy the code from the Storybook

To learn about the components available for you to import, refer to the Storybook section of this topic.

For example, to import and use the ActionMenu component into your project, use the following code:

import {ActionMenu} from '@frontapp/ui-kit';

...

<ActionMenu layerRootId="story--components-action-menu--basic">
  <ActionMenuItem iconName="Assign">Merge Contact</ActionMenuItem>
  <ActionMenuItem iconName="Copy">Copy Account Id</ActionMenuItem>
  <ActionMenuItem>Extra Long Name For A Dropdown</ActionMenuItem>
  <ActionMenuItemSpacer />
  <ActionMenuItem iconName="Preferences">
    Super long name dropdown item that should cause the tooltip to wrap when hovered over.
  </ActionMenuItem>
  <ActionMenuItem iconName="Close">Close</ActionMenuItem>
</ActionMenu>

Storybook

Storybook is a tool for exploring and documenting UI components. To familiarize yourself with the Front UI Kit, refer to our Storybook below, or view it on GitHub.

To use the Storybook:

1. Open the Storybook and click the Front UI Kit component you'd like to learn about from the table of contents.
2. After clicking on a component, the Storybook renders the component beneath the page title. This is how the component will look in your app.
3. Click Show code to view an example of how to add the component to your React code. Note that you must also copy the import statement shown in the Storybook to load the component on your page.

👍

Tip: Disregard the styling divs

When you copy the code for the component, you can disregard the styling elements that the Storybook displays, such as <StyledCenteredDiv>, <DefaultStyleProvider>, <StyledLayoutWrapperDiv>, etc. All you need to copy is the element that is imported onto the page. For example, if you want to use the Plugin Layout component, add the import {PluginLayout} from 'frontapp/ui-kit'; line to your page and copy the code within the <PluginLayout> element in the Storybook example. The styling divs are used for display purposes in the Storybook and derive from the styled-components library.

4. Some of the Storybook components can be used without code modification, but many of them will require you to customize the field values or add logic to the placeholder functions. Refer to the "Props" and "Stories" sections in the Storybook entries to learn about the details of each component.

Example

Refer to the Getting Started with the Plugin SDK tutorial to view a sample plugin and associated documentation. The sample plugin utilizes components from the Front UI Kit. Details are in Use the Front UI Kit component library section of the tutorial.