Statflo Component Library

Introduction

The Statflo Component Library provides a set of React components that can be used to build React applications consistent with the Statflo brand.

Getting Started

Installation

First add or install this package as a dependency in your existing React project

yarn add @statflo/ui

or

npm install @statflo/ui

Font

In order to use the Statflo brand font, copy over this link in the head of your HTML file.

<link rel="stylesheet" href="https://cdn.statflo.com/brandon/brandon.css" />

Import CSS

Import the CSS file into the main app file (ie. App.tsx).

import "@statflo/ui/index.css";

Setup Tailwind

This library uses Tailwind CSS for styling the different components. To gain access to the Statflo theme and tailwind configuration, setup tailwind and add the below code to your tailwind.config.js file.

The theme and configuration files are available under the tailwind folder for reference.

const base = require("@statflo/ui/tailwind/tailwind-workspace-preset.js");

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...base,
  // ... any other config
};

Usage

import { Button } from "@statflo/ui";

<Button type="secondary">Hello World</Button>

Please see each component in our Storybook for specific documentation related to their usage.