Facio Design System components for React

Getting started

Install and get started with Facio Design System components for React for web applications.

1. How to install

If your project uses react and react-dom version 16.14.0 or higher, run:


npm i --save @faciocode/react

The @faciocode/react npm package installs all Facio Design System UI components for React that you need.

This command will use the latest stable release. Please, always use latest distribution channel.

Not a React-based project?

Install our style tokens separately:


npm i --save @faciocode/styles

2. How to load the fonts

This package does not provide "Open Sans" font, only its font family names.

Load the Open Sans font with 400, 600, 700 and 800 font weights:


<link href="https://fonts.gstatic.com"
      rel="preconnect" />
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap"
      rel="stylesheet">

3. How to use

A quick example to get you started:

(Note that we enclose all your application in a ThemeProvider component)


import {
  CssBaseline,
  ThemeProvider
} from "@faciocode/react";

export const App = () => {
  <ThemeProvider>
    <CssBaseline />
    <ContainedButton color={"brand"}>
      Hello Button
    </ContainedButton>
  </ThemeProvider>
}

Check our Design System Storybook for all React components.

This package only works fine with the use of <ThemeProvider />, essential for applying styles correctly.

Please do not try to override Facio Design System theme palette or another style tokens. Use the Design System themes and components as-is.

Additional information

Please note the package peer dependencies react >= 16.14.0 and react-dom >= 16.14.0;
We recommend at least LTS Node version (v14.15.4+);
If your project uses TypeScript, we need TypeScript 4.1.2 at least;

Bundled in this package

Installing @faciocode/react will also install the following packages:

@faciocode/mui-styles
@faciocode/styles
@material-ui/core
Other dependencies for styling.

You don't need to install them separately to use the Design System.

Questions?

For how-to questions and other issues, please use the issues section on our GitHub repo.

Changelog

Just upgraded? Please read the Changelog.

No Preview