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
npx @saas-ui/cli@rc init2
Setup provider
Wrap your application with the SuiProvider component at the root of your
application.
This provider composes the following:
- the local
Providerinstalled by the Saas UI CLI ThemeProviderfromnext-themesfor color mode
pages/_app.tsx
import { Provider as SuiProvider } from '#components/setup/provider/provider'
import { defaultSystem } from '@saas-ui/chakra-preset'
import { ThemeProvider } from 'next-themes'
export default function App({ Component, pageProps }: AppProps) {
return (
<SuiProvider value={defaultSystem}>
<ThemeProvider attribute="class" disableTransitionOnChange>
<Component {...pageProps} />
</ThemeProvider>
</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>
)
}3
Use Saas UI components
app/page.tsx
import { Button } from '@chakra-ui/react'
export default function Home() {
return <Button>Click me</Button>
}