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/webNext.js frontend app.
apps/desktopNextron (Electron + Next.js) desktop 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 web and desktop.
packages/appThis contains all application code that is shared between the example apps.
packages/app-features/coreThe app's core functionality, for example layouts, that is shared across modules.
packages/app-features/*All feature specific code is grouped within individual modules.
packages/ui-storybookYour storybook.
packages/ui-themeYour custom Chakra UI theme. This extends the Saas UI Pro theme by default.
packages/mock-graphqlA Mock Graphql server.
tooling/test-utilsHelper functions for testing.

Was this helpful?