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.

Next.js app template

Installation

The minimum node version required is Node 22.x

Install dependencies

npx @saas-ui/cli@rc init

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 { Provider as SuiProvider } from '#components/setup/provider/provider'
import { defaultSystem } from '@saas-ui/chakra-preset'
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>
  )
}

Use Saas UI components

app/page.tsx

import { Button } from '@chakra-ui/react'

export default function Home() {
  return <Button>Click me</Button>
}

Contributing

Next.js (Pages)

Overview

Frameworks