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 framer-motion goober

yarn add flair-kit classnames framer-motion goober

pnpm add flair-kit classnames framer-motion goober

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>
    );
  }
}