Using Saas UI in Next.js (Pages)
A guide for installing Saas UI with Next.js pages directory
Use one of the following templates to get started quickly. The templates are configured correctly to use Saas UI.
The minimum node version required is Node.20.x
1
npm i @saas-ui/react@next @chakra-ui/react @emotion/react2
Wrap your application with the SuiProvider component at the root of your
application.
This provider composes the following:
SaasProviderfrom@saas-ui/reactfor the styling system
pages/_app.tsx
import { SuiProvider, defaultSystem } from '@saas-ui/react'
export default function App({ Component, pageProps }: AppProps) {
return (
<SuiProvider value={defaultSystem}>
<Component {...pageProps} />
</SuiProvider>
)
}In the pages/_document.tsx file, add the suppressHydrationWarning prop to
the html element.
pages/_document.tsx
import { Head, Html, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html suppressHydrationWarning>
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}