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

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.

Install our style tokens separately:

npm i --save @faciocode/styles

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">

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.

• 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;

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.

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

Just upgraded? Please read the Changelog.