Installation
How to install and set up Saas UI in your project
Framework Guide
Saas UI works in all modern React frameworks, we've put together step-by-step guides for these frameworks
Next.js
Easily add Saas UI with Next.js app directory
Remix
Use Saas UI in your Remix application
Vite
Use Saas UI in your Vite application
The minimum node version required is Node.20.x
Installation
To manually set up Saas UI in your project, follow the steps below.
1
Install Saas UI
npm i @saas-ui/react@next @emotion/reactThe @chakra-ui/react package is not required, it is automatically installed when you install Saas UI, all components are exported from the @saas-ui/react package.
2
Setup provider
Wrap your application with the SuiProvider at the root of your application.
import { SuiProvider, defaultSystem } from '@saas-ui/react'
function App({ Component, pageProps }) {
return (
<SuiProvider system={defaultSystem}>
<Component {...pageProps} />
</SuiProvider>
)
}Now you can start using Saas UI components in your project.
CLI
Install elements, blocks and templates from the CLI.
TBD
Ejecting
TBD