Install

How to get up and running quickly with Fuegokit React.
SourceStorybookFigma
Access to Fuegokit npm packages, source code repositories, and some content is limited to Appfire staff. Log in with Slack to continue.

Install

Install Fuegokit in your project with your package manager of choice.

With npm

npm install @fuegokit/react

With yarn

yarn add @fuegokit/react

Fuegokit is published using Appfire's internal npm registry. Your team lead should have provided you with the credentials you need. To get the proper credentials, follow the instructions here.

Usage

Once you install the package, you can import Fuegokit React components into your application using ES Module import syntax:

// ES Modules
import {Box, Text, ThemeProvider} from '@fuegokit/react'

Or using CommonJS require syntax:

// CommonJS
const {Box, Text, ThemeProvider} = require('@fuegokit/react')

Peer dependencies

Fuegokit ships with a few libraries labeled as peer dependencies. These are libraries we've separated and don't bundle, because they're commonly installed in a host project consuming Fuegokit React, and having multiple versions can introduce errors.

Fuegokit requires the following libraries to be installed along with it:

  • styled-components at version 5.0.0 or higher
  • react at versions 17.0.2 or higher
  • react-dom at versions 17.0.2 or higher
Install Fuegokit React with peer dependencies:
npm install @fuegokit/react react@17.0.2 react-dom@17.0.2 styled-components@5.0.0


// or


yarn add @fuegokit/react react@17.0.2 react-dom@17.0.2 styled-components@5.0.0

Global styles

To define global styles using styled-components, add a GlobalStyles component, and use Fuegokit's design tokens to define global variables:

/components/GlobalStyles.tsx

import {createGlobalStyle} from 'styled-components'
import {themeGet} from '@fuegokit/react'


export const GlobalStyles = createGlobalStyle`
 * {
    margin: 0;
  }
  body, html, #root {
    height: 100%

Using ThemeProvider

Add Fuegokit React’s ThemeProvider to the root of your application. Include the BaseStyles component that ships with Fuegokit React.

You can optionally include theme providers from other tools.

/src/index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import {BaseStyles, ThemeProvider} from '@fuegokit/react'
import {GlobalStyles} from './components'


import {OtherThemeProvider} from 'some-other-ui-library-or-state-management-library'


ReactDOM.render(

Compose components

Compose components using design system theme values.

/src/index.tsx

import {Box, Text, themeGet} from '@fuegokit/react'


const MyComponent = ({children, ...props}) => {
  return (
    <StyledBox>
      <Text as="h2">{children}</Text>
    </StyledBox>
  )
}

See also