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/react next-themes2
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 systemThemeProviderfromnext-themesfor color mode
pages/_app.tsx
import { SuiProvider, defaultSystem } from '@saas-ui/react'
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 '@saas-ui/react'
export default function Home() {
return <Button>Click me</Button>
}