Flair

Getting started

Installation

To get started building with Flair, install flair-kit along with its peer dependencies with your package manager of choice.

npm install flair-kit classnames@2 goober@2
yarn add flair-kit classnames@2 goober@2
pnpm add flair-kit classnames@2 goober@2

Setting up

ThemeProvider

Flair uses React context to provides values to components. These values are colors, space tokens, radii tokens, etc. ThemeProvider also injects some global CSS using goober

import { ThemeProvider } from "flair-kit";


function App({ Component }) {
  return (
    <ThemeProvider>
      <Component />
    </ThemeProvider>
  );
}

Server rendering

Flair is powered by goober under the hood. Critical CSS can be extracted via extractCss() function provided by goober. <NoFlashScript /> should be used to prevent flickering. Consider the following example for Next.js.

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
} from "next/document";
import { extractCss } from "goober";
import { NoFlashScript } from "flair-kit";


export default class MyDocument extends Document {
  static async getInitialProps({ renderPage }: DocumentContext) {
    const page = await renderPage();


    // Extract the css for each page render
    const css = extractCss();


    return {
      ...page,
      styles: (
        <style
          id="_goober"
          // And inject it in here
          dangerouslySetInnerHTML={{ __html: css }}
        />
      ),
    };
  }


  render() {
    return (
      <Html>
        <Head />
        <NoFlashScript />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Fonts

Flair uses the free Work Sans font. The easiest way to load these fonts is by adding the following tags to your HTML document head.

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
  rel="stylesheet"
/>

An example of a Next.js project is also available in the repository.

NextPrinciples →