saas-js/saas-ui

A design system and source component registry for SaaS products

---

Saas UI helps teams build B2B applications and dashboards with Chakra UI. Chakra primitives come from @chakra-ui/react, Saas UI tokens and recipes come from @saas-ui/chakra-preset, and editable compositions such as Sidebar are installed into applications with @saas-ui/cli.

This repository contains the preset, registry compiler and templates, CLI, supporting packages, examples, and documentation website.

Get started

Initialize an existing React project:

npx @saas-ui/cli@rc init

Add editable components or compositions:

npx @saas-ui/cli@rc add sidebar

Initialization installs compatible Chakra, Emotion, and preset dependencies, creates components.json, and installs local provider setup. See the CLI README for command details.

Existing @saas-ui/react users should follow the migration guide. The package remains available during the transition; this repository does not claim that npm deprecation or removal has already occurred.

Links

💡 Documentation

🧭 Roadmap

🖼 Storybooks

🌟 Saas UI Pro

Sponsors ❤️

Saas UI is sponsored by these amazing companies and people.

• LocalXPose
• Frank Faubert

Contributing & Support

Want to help? Great! Check out the contributing guidelines and feel free to open a PR or discussion for feature requests and feedback.

If you'd like to support the project financially, you can become a sponsor of Saas UI or consider ordering Saas UI Pro Beta. All funds will go toward the further development of Saas UI. This will give you access to the private Git repository with the beta and our private Discord server for support.

Open source

The open-source distribution includes:

• Chakra tokens, recipes, semantic styling, and system configuration
• Editable registry components and application compositions
• CLI initialization, installation, migration, diff, and update workflows
• Supporting hooks, forms, authentication, and modal packages

Pro

A premium catalog of editable application blocks for SaaS products. Pro blocks are installed as source through the authenticated registry and can compose public registry items.

• Example Next.js SaaS app (https://demo.saas-ui.dev)
• Authentication screens (Supabase/Magic/Clerk/Custom)
• App layout
• DataGrid and DataBoard (Kanban) with filtering/pagination
• User account pages
• Settings pages
• Feature flags
• Billing/subscription management (Lemonsqueezy)
• Mocked API with React Query
• Custom color schemes
• Glass theme
• Onboarding flows
• Example pages (CRM, Inbox)

Using this repo

The docs website depends on private packages (@saas-ui-pro/react), and won't build fully without access to the private Git submodule.

This repository is a pnpm workspace. Install pnpm 10 or newer, then run:

pnpm install

Storybook

pnpm storybook

Build

pnpm build:packages

Website

Run the documentation website with:

pnpm dev:web

The site in apps/website is prepared for Cloudflare Workers. See apps/website/README.md for the local Workers preview command, required env vars, and Workers Builds settings. Do not deploy or change DNS until cutover is approved.

License

All code in this repository, except for the Saas UI branding assets are licensed under MIT.