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
The minimum node version required is Node.20.x
info
Existing apps on @saas-ui/react@next should follow
Migrating from next to rc instead
of treating init as a greenfield install.Installation
To manually set up Saas UI in your project, follow the steps below.
1
Install Saas UI
npx @saas-ui/cli@rc initThe CLI installs Chakra UI, Emotion, and @saas-ui/chakra-preset. Chakra
primitives are imported from @chakra-ui/react; Saas UI compositions are
installed as source templates owned by your project.
2
Setup provider
Wrap your application with the SuiProvider at the root of your application.
import { Provider as SuiProvider } from '#components/setup/provider/provider'
import { defaultSystem } from '@saas-ui/chakra-preset'
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