Getting Started with Nextjs

A guide for installing Saas UI with Nextjs projects

1. Installation

In your Next.js project, install Saas UI by running either of the following:

npm i @saas-ui/react @chakra-ui/react @chakra-ui/next-js @emotion/react @emotion/styled framer-motion

2. Provider Setup

After installing Saas UI, you need to set up the SaasProvider at the root of your application. If you already have ChakraProvider in your app, you can replace this with SaasProvider.

Go to pages/_app.js or pages/_app.tsx (create it if it doesn't exist) and wrap the Component with the SaasProvider:

// pages/_app.js
import { SaasProvider } from '@saas-ui/react'


function MyApp({ Component, pageProps }) {
  return (
    <SaasProvider>
      <Component {...pageProps} />
    </SaasProvider>
  )
}


export default MyApp

3. Link Component

Configure a linkComponent to make the Saas UI Link works with the Next.js router.

import Link, { LinkProps } from 'next/link'
import { SaasProvider } from '@saas-ui/react'


const NextLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
  (props, ref) => <Link ref={ref} {...props} />
)


function MyApp({ Component, pageProps }) {
  return (
    <SaasProvider linkComponent={NextLink}>
      <Component {...pageProps} />
    </SaasProvider>
  )
}

4. Customizing Theme

If you intend to customise the default theme object to match your design requirements, you can extend the theme from @chakra-ui/react.

Chakra UI provides an extendTheme function that deep merges the default theme with your customizations.

// 1. Import the extendTheme function
import { extendTheme } from '@chakra-ui/react'


// 2. Import the Saas UI theme
import { SaasProvider, theme as baseTheme } from '@saas-ui/react'


// 2. Extend the theme to include custom colors, fonts, etc
const colors = {
  brand: {
    900: '#1a365d',
    800: '#153e75',
    700: '#2a69ac',
  },
}


const theme = extendTheme({ colors }, baseTheme)


// 3. Pass the `theme` prop to the `SaasProvider`
function MyApp({ Component, pageProps }) {
  return (
    <SaasProvider theme={theme}>
      <Component {...pageProps} />
    </SaasProvider>
  )
}

To further customize components or build your own design system, the theme-tools package includes useful utilities.

6. Color Mode Script

The color mode script needs to be added before the content inside the body tag for local storage syncing to work correctly.

When setting the initial color mode, we recommend adding it as a config to your theme and reference that in the ColorModeScript.

To use ColorModeScript on a site with strict Content-Security-Policy, you can use the nonce prop that will be passed to the <script> tag.

// pages/_document.js


import { ColorModeScript } from '@chakra-ui/react'
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import theme from './theme'


export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          {/* 👇 Here's the script */}
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

Was this helpful?