Saas UI Pro

Getting started

First of all thanks a lot for signing up!

Come say hello at Discord, I'm always around to help and your feedback will really help move the project forward.

Roadmap

https://roadmap.saas-ui.dev

Storybook

https://storybook.saas-ui.pro

Documentation

https://saas-ui.dev/docs/pro/overview

Installation

In case you use this repository as a reference or for testing purposes, go ahead and clone the repo.

If you're using the repository as a template for a new project, download the source as a ZIP file, or use the Use this template button to create a new fresh repository without Saas UI's history.

Once you have a copy of the source on your computer, run yarn to install all dependencies.

yarn install

And then run the generators to generate the React Query hooks.

yarn generate

Install from NPM

Instructions for installing @saas-ui/pro from NPM can be found in the Storybook documentation.

Configuration

All client side app configuration files can be found in packages/app-config.

Running the apps

Saas UI Pro comes with 2 example apps, Next.js, Electron.

You can start the apps from their subfolder in apps/, or from the project root using one of these commands:

yarn dev:web

yarn dev:desktop

Authentication

The apps mocks authentication by default. Follow these steps to configure Supabase for Next.js.

More about authentication.

Project structure

Saas UI Pro makes use of workspaces and uses the following folder structure.

Path	Description
saas-ui	All Saas UI Pro packages and components live in here.
apps	Example apps are in this folder
apps/web	The Next.js app
apps/desktop	The Electron app
packages	This contains all shared application code, as well as your own custom packages.
packages/app-config	Contains all client side configuration files.
packages/app-features	This contains all application code, grouped by feature.
packages/app-features/core	The app's core functionality, for example layouts, that is shared across modules.
packages/app-features/*	All resource specific code is grouped within individual modules, more on this below.
packages/app-nextjs	Next.js helpers.
packages/api-client	This is the API client wrapper, uses mocked API fetchers by default.
packages/api-graphql-client	This is the Graphql API client, generated by graphql-codegen.
packages/api-mock-graphql	This is the Graphql API mock service, running on MSW
packages/api-mocks	API fetchers returning mocked/fake data.
packages/mock-graphql	A Mock Graphql server, Mock Service Workers.
packages/ui	Your component library.
packages/ui-storybook	Your storybook.
packages/ui-theme	Your custom Chakra UI theme. This extends the Saas UI Pro theme by default.
tooling/test-utils	Helper functions for testing.

Package naming

Packages that are prefixed with app contain frontend application code. Your UI library related codes lives in ui prefixed packages. API related code lives in api prefixed packages.

Features

Application code is grouped by feature, this means that all related assets, like components, hook, pages are grouped in a single feature folder. This setup will help to keep the code base maintainable as it (and your team) grows. It will make it easier to add/remove new features and prevent any unwanted side effects when refactoring or removing functinality, due to too much interdependencies.

A few rules to make sure the codebase stays maintainable.

• Core (or common) functionality is located in the core feature, other features can import from core.
• A feature cannot import functionality from other features, except the core feature.
• If a component is used in multiple features and doesn't depend on external state (like data fetching), consider adding it to the ui library, otherwise add it to the core feature.
• Keep components clean, eg if there is complex business logic, like useQuery or useMutation hooks, move them into a separate file in hooks/

License

See LICENSE.