Project structure

How to find your way in the project.

Saas UI Pro is setup as a monorepo which is managed by Yarn v3 and Turbo Repo.

The folder structure looks as following:

PathDescription
saas-uiAll Saas UI Pro packages and components live in here.
appsExample apps are in this folder
apps/nextjsThe Next.js app
apps/electronThe Electron app
packagesThis contains all shared application code, as well as your own custom packages.
packages/app-configContains all client side configuration files.
packages/app-grapqhlThis is the Graphql api client (react-query), generated by graphql-codegen.
packages/app-nextjsNext.js specific code, shared between the nextjs-app and electron-app.
packages/appThis contains all application code that is shared between the example apps.
packages/app/src/modules/coreThe app's core functionality, for example layouts, that is shared across modules.
packages/app/src/modules/*All feature specific code is grouped within individual modules.
packages/mock-graphqlA Mock Graphql server.
packages/ui-storybookYour storybook.
packages/ui-themeYour custom Chakra UI theme. This extends the Saas UI Pro theme by default.
tooling/test-utilsHelper functions for testing.

Was this helpful?