Overview

Welcome to the Help Scout React UI Kit! This UI Kit is a collection of reusable and customizable components that follow a modern design system. Built using React, these components are designed to be simple, flexible, and easy to integrate into your projects.

Installation

To install the React UI Kit, run the following command:

npm install @helpscout/ui-kit

or

yarn add @helpscout/ui-kit

Components

The React UI Kit currently includes the following components:

1. Accordion
2. Button
3. DefaultStyle
4. Heading
5. Icon
6. Link
7. List
8. Spinner
9. Text

Each component has its own set of props that can be used to customize its appearance and behavior. The documentation provides detailed information on how to use these components, along with example usage and the list of available props for each component.

Usage

To use a component from the React UI Kit, simply import it and use it in your React application:

import { Button } from "@helpscout/ui-kit";

function App() {
  return (
    <div>
      <Button theme="primary">Click me!</Button>
    </div>
  );
}

📘 Explore the component reference for examples and detailed information on each component’s available props and usage, or check out the UI Kit’s Storybook below to play directly with each component.

Storybook

Storybook is a powerful open-source tool that helps us create, organize, and showcase our UI components in a structured, interactive environment. It allows us to develop components in isolation, making it easier to design and iterate without worrying about app-specific dependencies and requirements. By providing a sandbox for our components, we can display various states and props, enabling our team and collaborators to access a living style guide that reflects our latest UI designs.

Below, you’ll find an embedded version of the Storybook for our React UI Kit. Feel free to explore the components, experiment with different configurations, and discover the full capabilities of our UI library.