Using Saas UI in Next.js (Pages)
A guide for installing Saas UI with Next.js pages directory
Templates
Use one of the following templates to get started quickly. The templates are configured correctly to use Saas UI.
Installation
The minimum node version required is Node.20.x
1
Install dependencies
npm i @saas-ui/react@next @chakra-ui/react @emotion/react2
Setup provider
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>
)
}