Skip to main content

Design System Integration

Introduction​

A consistent design system is integrated to the all of the app types by using nextui and theme.js file which can be generated by using the structure defined by nextui create theme docs and using nextui createTheme method.

nextui is a library that uses stitches internally to style components in the react ecosystem. It allows users to write styles in css within the js files. It also has components and provides customized theming. To know more about nextui visit nextui org docs.

nextui provides <NextUIProvider> which is a theme provider component which accepts a theme prop (created using createTheme nextui method and json) which overrides the nextui default theme.

How to use​

  1. The <NextUIProvider> is kept at the highest level in the component chain. This allows all of the components within it to inherit the theme prop. In case of our Next.js app the <NextUIProvider> is added in src/pages/_app.js.
  2. nextui provides a default theme that can be used out of the box.
  3. To customize, create a theme using the structure defined by nextui create theme and wrap it in createTheme nextui method and store it as src/themes/theme.js.
  4. Now in all nextui styled components, theme props is available to use as following:
export const Button = styled('button', {
  fontSize: '$3',
  color: '$fontColor',
  margin: '1em',
  padding: '0.25em 1em',
  border: '2px solid black',
  borderRadius: '$1',
  display: 'block',
  length: '1'
});

Know Issue​

The length property used in styled method is added temporarily for the issue of nextui styled method with typescript v4.6.2. Will not be required once the issue is resolved. Issue: https://github.com/modulz/stitches/issues/947

More about cutomizing theming can be found in nextui customize theme docs.