Using Saas UI in Next.js (App)
A guide for installing Saas UI with Next.js app 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
Create a providers.tsx file in the app directory and wrap your application
with the SuiProvider and ThemeProvider at the root of your application.
app/providers.ts
'use client'
import { SuiProvider, defaultSystem } from '@saas-ui/react'
import { ThemeProvider } from 'next-themes'
export function Providers({ children }: { children: React.ReactNode }) {
return (
<SuiProvider value={defaultSystem}>
<ThemeProvider attribute="class" disableTransitionOnChange>
{children}
</ThemeProvider>
</SuiProvider>
)
}app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html suppressHydrationWarning>
<head />
<body>
<Providers>{children}</Providers>
</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>
}