The React component library for Startups

Saas UI is an advanced component library designed to build beautiful B2B and dashboard style apps with speed. It's built on top of Chakra UI and fully written in Typescript.

This repository contains all open source components, as well as the documentation website.

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.

Core

40+ essential open-source components built on top of Chakra UI.

• Authentication screens
• Powerful forms manager
• DatePicker / DateRangePicker
• Stepper, Timeline, DataTable and much more.

Pro

A premium frontend starter pack designed for SaaS products. Complete source code available in a monorepo that can serve as a starting point or as a reference for your project.

• 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 uses Yarn workspaces, to get started run:

yarn

Storybook

yarn storybook

Build

yarn build:packages

Website

Before running the website you need to build the props-docs by running this.

yarn build:props-docs

After that run the website with this command.

yarn w website dev

or

cd apps/website && yarn dev

License

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

@saas-ui/theme

2.6.1

Patch Changes

• 862937a: Bump chakra version

2.6.0

Minor Changes

• 803ede7: Updated Chakra UI version range to >=2.9.0 <3

2.5.1

Patch Changes

• f0ee3db: Updated to Chakra 2.10

2.5.0

Minor Changes

• 2ac496a: Upgraded to Chakra UI v2.9.3

2.4.2

Patch Changes

• 5e000e0: Removed background color from loading overlay fill variant

2.4.1

Patch Changes

• 4c03ddb: Added support for horizontal form fields

2.4.0

Minor Changes

• e75e99b: StructuredListItem now supports isDisabled props

2.3.4

Patch Changes

• 2f32548: Fixed issue where Chakra UI Card sizes would not apply
• 0778d23: Moved all StructuredList styling into theme

2.3.3

Patch Changes

• 2e7da38: Updated dependencies

2.3.2

Patch Changes

• d6d7ca3f: Added xl size to IconBadge
• 4e291385: Updated Input lg variant height

2.3.1

Patch Changes

• c0f203bf: Fixed issue where timeline content would not scale to width

2.3.0

Minor Changes

• 78bc41d0: Improved timeline behavior so it scales automatically with the icon and ocontent size used.
• 316388b9: Added ghost variant to the Badge theme

Patch Changes

• 8782a76b: Improved Navbar inner padding on small screens
• 8782a76b: Added new left-accent variant to the NavItem theme
• 8782a76b: Added new neutral color scheme to Button theme
• 8782a76b: Updated NavGroup to no longer be collapsible by default

2.2.3

Patch Changes

• f03246ac: Improved IconBadge sizing

2.2.2

Patch Changes

• 537804bf: Fixed NavLink line height

2.2.1

Patch Changes

• 4e728c26: Fixed border radius of sm input variant

2.2.0

Minor Changes

• 31d05ed5: Added new Navbar component 🥳
• ebba8404: Added new IconBadge component

Patch Changes

• 91412d77: Fixed theme incompatibility with Chakra UI 2.8

2.1.1

Patch Changes

• Fixed all packages index to use named exports

2.1.0

Minor Changes

• 5a384c28: Updated to Chakra UI 2.8.0

2.0.1

Patch Changes

• 493a548a: NavItem now renders an aria-current tag when the item is active.
• 493a548a: NavItem active state is now compatible with Remix and ReactRouter NavLink

2.0.0

Major Changes

• 8d6516c2: Removed Divider theming.
• 83f54180: Secondary button now uses solid variant and gray colorScheme.
• 8b82d945: Removed button package.
• f1e99198: Restructured packages.

Minor Changes

• 83f54180: Added new tertiary button variant.
• f79376c3: Renamed Sidebar condensed variant to compact, minor improvements.
• 046e42b8: Updated to Chakra UI 2.7
• 8e155c3b: Updated Stepper theme to Chakra UI 2.6

Patch Changes

• d3900eca: button primary, secondary and tertiary variants colorScheme can now be changed.
• d725a5da: Fix esm bundle import
• b521ce10: Fix Card theme
• d725a5da: Bump version
• 5ac0e9ba: Fix vertical stepper items not taking up the full parent width.
• 09dd16cc: Fix anatomy export
• a5898c44: Fix Divider label contrast
• 8045baed: Fix issue where primary variant color would always be gray
• f1e99198: Migrated from microbundle to tsup for builds
• 5b9d90e8: Fix filled and outline color tokens
• 7027d7c1: Improve Stepper seperator position on all sizes
• a7ef6dd9: Fixed issue where types for exports were not detected
• aeab9b0b: Fix solid button hover colors
• b895e5bd: Add Timeline theme to theme package.
• 0319aa57: Bump version
• 166978bd: Fix esm bundle filename.

2.0.0-rc.17

Patch Changes

• 09dd16cc: Fix anatomy export

2.0.0-rc.16

Major Changes

• 8d6516c2: Removed Divider theming.

Minor Changes

• 046e42b8: Updated to Chakra UI 2.7

2.0.0-rc.15

Patch Changes

• b895e5bd: Add Timeline theme to theme package.

2.0.0-rc.14

Patch Changes

• 5ac0e9ba: Fix vertical stepper items not taking up the full parent width.

2.0.0-rc.13

Patch Changes

• 7027d7c1: Improve Stepper seperator position on all sizes
• Bump version

2.0.0-rc.12

Patch Changes

• 7027d7c1: Improve Stepper seperator position on all sizes

2.0.0-next.11

Minor Changes

• 8e155c3b: Updated Stepper theme to Chakra UI 2.6

2.0.0-next.10

Patch Changes

• aeab9b0b: Fix solid button hover colors

2.0.0-next.9

Patch Changes

• a5898c44: Fix Divider label contrast
• 8045baed: Fix issue where primary variant color would always be gray

2.0.0-next.8

Patch Changes

• Fix esm bundle import

2.0.0-next.7

Patch Changes

• d3900eca: button primary, secondary and tertiary variants colorScheme can now be changed.
• Bump version

2.0.0-next.6

Patch Changes

• a7ef6dd9: Fixed issue where types for exports were not detected

2.0.0-next.5

Patch Changes

• 5b9d90e8: Fix filled and outline color tokens

2.0.0-next.4

Patch Changes

• b521ce10: Fix Card theme

2.0.0-next.3

Major Changes

• 83f54180: Secondary button now uses solid variant and gray colorScheme.

Minor Changes

• 83f54180: Added new tertiary button variant.

2.0.0-next.2

Minor Changes

• f79376c3: Renamed Sidebar condensed variant to compact, minor improvements.

2.0.0-next.1

Patch Changes

• 166978bd: Fix esm bundle filename.

2.0.0-next.0

Major Changes

• 8b82d945: Removed button package.
• f1e99198: Restructured packages.

Patch Changes

• f1e99198: Migrated from microbundle to tsup for builds

1.8.2

Patch Changes

• Fix types path

1.8.1

Patch Changes

• b2302a3: Add types to package.json exports

1.8.0

Minor Changes

• aea16c7: Improved Sidebar behavior and theme.

1.7.0

Minor Changes

• 1f074c98: Upgrade to Chakra 2.4.8. Using .mjs for esm bundles.

1.6.2

Patch Changes

• 69d328f: Moved NavItem font color to root of the theme.

1.6.1

Patch Changes

• 7cf5223: Improved Sidebar theme added toggle and toggleWrapper parts.

1.6.0

Minor Changes

• d92f516: Updated to Chakra UI 2.4.1

1.5.0

Minor Changes

• bc1f403: Improved Tooltip styles for Saas UI theme.

Patch Changes

• 0a77fc0: Cleaned up NavItem theme.

1.4.0

Minor Changes

• 466b3ca: Updated to Chakra UI 2.3.6

1.3.1

Patch Changes

• fd41596: Clean up AppShell theme

1.3.0

Minor Changes

• 0d83ca5: Added AppShell component to core
• 40a9465: Added Sidebar component to core

1.2.0

Minor Changes

• f6ec7dc: Fixed issue where Next.js would not resolve Chakra UI components correctly.

1.1.0

Minor Changes

• 2c058b4: The Saas UI theme now uses InterVariable instead of Inter by default.

1.0.0

Major Changes

• 1db5bf9: Initial release candidate

Minor Changes

• 3ae6be1: breaking: Updated to Chakra UI 2.1
• 532a7d4: Updated to Chakra UI 2.2.1
• 7a16ef7: Updated to Chakra UI 2.2.1
• 3ae6be1: breaking: React 18 support.

Patch Changes

• 15c3960: Re-publish.
• 1744543: Updated dependencies.
• dc6376f: Updated all readme files, added better descriptions and links to docs and source code.
• 1fdf52a: Modern bundles now use .mjs extension.
• 532a7d4: Fixed all theme onconsistencies.
• 4fd1fb3: Fixed components exports.

1.0.0-rc.5

Patch Changes

• Fixed components exports.

1.0.0-rc.4

Patch Changes

• 1744543: Updated dependencies.

1.0.0-rc.3

Patch Changes

• dc6376f: Updated all readme files, added better descriptions and links to docs and source code.

1.0.0-rc.2

Minor Changes

• 532a7d4: Updated to Chakra UI 2.2.1
• 7a16ef7: Updated to Chakra UI 2.2.1

Patch Changes

• 532a7d4: Fixed all theme onconsistencies.

1.0.0-rc.1

Patch Changes

• Re-publish.

1.0.0-rc.0

Major Changes

• 1db5bf9: Initial release candidate

Minor Changes

• 3ae6be1: breaking: Updated to Chakra UI 2.1
• 3ae6be1: breaking: React 18 support.

Patch Changes

• 1fdf52a: Modern bundles now use .mjs extension.

0.8.2

Patch Changes

• 7e9e6dc: Fixed issue where the Snackbar spinner would always be white.

0.8.1

Patch Changes

• Updated Chakra UI version range not to include 2.x

0.8.0

Minor Changes

• 9abc079: Saas UI theme colors no longer generated on the fly.

0.7.2

Patch Changes

• a396394: Improved Stepper styling on small screens.

0.7.1

Patch Changes

• 0024834: Improved Input fields outline variant contrast for better a11y

0.7.0

Minor Changes

• 9391c44: Fixed peer dependency issues.

0.6.0

Minor Changes

• 9d11ba5: Added StepForm and Stepper components

0.5.2

Patch Changes

• 87b29a8: Renamed Loading to Loader. Loading will be removed in 1.0

0.5.1

Patch Changes

• Updated dependencies [4aef278]
  • @saas-ui/palette@0.5.0

0.5.0

Minor Changes

• e511ffd: Added a11y testing to all packages

Patch Changes

• Updated dependencies [e511ffd]
  • @saas-ui/system@0.4.0

0.4.11

Patch Changes

• 09d4167: Added PropertyList component and improved a11y

0.4.10

Patch Changes

• Improved List a11y

0.4.9

Patch Changes

• 52688c1: Improved List semantics and styling
• 1ce9ba9: Improved ObjectField semantics and styles

0.4.8

Patch Changes

• be249e2: Improved ghost variant in lightmode

0.4.7

Patch Changes

• 4eba003: Improved Button colors in lightmode

0.4.6

Patch Changes

• Removed build in styles

0.4.5

Patch Changes

• Bump version

0.4.4

Patch Changes

• afc15d8: Improved Card styling

0.4.3

Patch Changes

• b3159a7: Only publish dist and src files
• Updated dependencies [b3159a7]
  • @saas-ui/palette@0.4.1
  • @saas-ui/system@0.3.1

0.4.2

Patch Changes

• d3edc56: Remove unused color tokens

0.4.1

Patch Changes

• Bump version

0.4.0

Minor Changes

• 638a054: Added new layout package with EmptyState and Loading components
• 4733b8f: Added new MenuDialog component

0.3.0

Minor Changes

• Release list component

0.2.1

Patch Changes

• 7141944: Improve button color accesibility
• e448f31: Saas UI theme now longer shows outlines when buttons/links are focused with a mouse click
• 6c55bef: Now using semantic tokens for presence colors

0.2.0

Minor Changes

• Upgrade to Chakra UI 1.8.1

Patch Changes

• Updated dependencies
  • @saas-ui/palette@0.4.0
  • @saas-ui/system@0.3.0

0.1.6

Patch Changes

• Update card dependencies
• Updated dependencies
  • @saas-ui/system@0.2.5

0.1.5

Patch Changes

• Update correct dependencies

0.1.4

Patch Changes

• Updated dependencies
  • @saas-ui/system@0.2.4

0.1.3

Patch Changes

• Improved exports configuration
• Updated dependencies
  • @saas-ui/system@0.2.3

0.1.2

Patch Changes

• Republish with correct deps
• Updated dependencies
  • @saas-ui/system@0.2.2

0.1.1

Patch Changes

• Fix version mismatch
• Updated dependencies
  • @saas-ui/system@0.2.1

0.1.0

Minor Changes

• Initial release of Saas UI Core

Patch Changes

• Updated dependencies
  • @saas-ui/system@0.2.0