How to get up and running quickly with Saas UI.

Saas UI is built on top of Chakra UI, before you continue it's recommended to have a basic understanding of how Chakra UI works. You can find the documentation on the Chakra UI website.

Framework Quickstarts

Custom Installation

Install in an existing project

Inside your React project directory, install Chakra UI if you haven't done so already:

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Install Saas UI by running this:

yarn add @saas-ui/react
npm i @saas-ui/react

Set up Provider

For Saas UI to work correctly, you need to set up the SaasProvider at the root of your application.

The SaasProvider will handle the basic Chakra UI setup for you. It configures the color mode manager, add the Saas UI base theme, css reset and global styles.

Direct integration

Go to the root of your application and do this:

import * as React from 'react'
// 1. import `SaasProvider` component
import { SaasProvider } from '@saas-ui/react'
function App({ Component }) {
// 2. Use at the root of your app
return (
<Component />

SaasProvider Props

resetCSSbooleantrueautomatically includes <CSSReset />
themeTheme@chakra-ui/themeoptional custom theme
colorModeManagerStorageManagerlocalStorageManagermanager to persist a users color mode preference in
portalZIndexnumberundefinedcommon z-index to use for Portal
linkComponentReact.ReactNodeundefinedWrapper component for router enabled links
onErrorfunctionundefinedCallback called whenever an error is triggered inside an ErrorBoundary

Under the hood

Besides setting up the Saas UI specific context, this is how the basic Chakra setup looks like internally.

export function SaasProvider({
}: SaasProviderProps) {
const context = {
return (
<SaasContext.Provider value={context}>
<ChakraProvider {...rest} theme={theme || defaultTheme}>

Was this helpful?