Building blocks

There are several patterns we could follow when composing components and building custom components using Fuegokit React.

In general, it's preferable that you use Fuegokit React components as building blocks in conjunction with the sx prop.

Using the themeGet function

Fuegokit React components can be used with the styled function from both styled-components and emotion to compose new components, and the themeGet function serves as the primary entrypoint for access design token values in a particular theme.

When accessing theme values and passing them into a styled factory function, use the themeGet function, and provide the theme key (e.g., colors, fontWeights, etc):

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

const MyBox = ({children}) => {
  return <StyledBox>{children}</StyledBox>
}

const StyledBox = styled(Box)`
  background: ${themeGet('colors.background.neutral.default.default')};

Prefer using themeGet with a composed component as the entrypoint to Fuegokit's theme object.

Use Fuegokit React's low-level primitives instead of using ad hoc elements when a Fuegokit component could be used.

<MyText as="h2">
  Space wide numberings
</MyText>
const MyText = styled(Text)...

Compose components with Fuegokit React somponents as building block to maintain theme-awareness

<MyText>
  Space wide numberings
</MyText>
const MyText = styled(h2)...

Don't

Don't compose components from native HTML elements whenever a Fuegokit React components can suffice

Only use the `sx` prop for a limited set of CSS declarations. For better readability, compose an abstraction with `themeGet` instead. For more detailed guidance on when to compose with `themeGet` vs when to use the `sx` prop, see the docs on the `sx` prop.

Using the sx prop

When building components with Fuegokit React, prefer using the sx prop as the entrypoint to Fuegokit's theme object and using Fuegokit React's low-level primitives instead of using ad hoc elements when a Fuegokit component could be used.

This allows us to maintain referential integrity to our theme, while the styling library becomes an implementation detail.

It also reduces maintenance burden, and ensures that gaps in the design system are surfaced instead of encouraging consumers to constantly add workarounds.

<Text as="h2" sx={{color: "text.default"}}>
  Space wide numberings
</Text>

Use Fuegokit React components with the `sx` prop as building blocks

<h2 style={{color: '#172B4D'}}>
  Space wide numberings
</h2>

Don't

Don't use hard-coded values when Fuegokit React components can suffice

Using the as prop

The as prop allows consumers to change the root element that a component renders. It sets styles for the root HTML element rendered by the component.

Adding polymorphic behavior is a common use case when using Fuegokit React components, but it should always use semantic HTML that allows screen readers and other tools to support interaction.

Changing the root element can affect the accessibility of the component. Only use HTML elements related to the existing root element of the component. If in doubt, a member of the design systems team is available to assist in the #design-systems channel in Slack.

If you are extending Fuegokit React components with styled-components or another CSS-in-JS library, use the forwardedAs prop to avoid breaking polymorphism:

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

const MyBox = ({children}) => {
  return <StyledBox forwardedAs="ul">{children}</StyledBox>
}

const StyledBox = styled(Box)`
  background: ${themeGet('colors.background.neutral.default.default')};

Composing components

Building blocks

Using the themeGet function

Using the sx prop

Using the as prop

See also