Build intuitive apps that your customers will love

Saas UI is a React component library and starterkit
that doesn't get in your way and helps you
build intuitive SaaS products with speed.

React

Accessible

All components strictly follow WAI-ARIA standards.

Themable

Fully customize all components to your brand with theme support and style props.

Composable

Compose components to fit your needs and mix them together to create new ones.

Productive

Designed to reduce boilerplate and fully typed, build your product at speed.

	Amount	Name
	30+	Open Source Components

Renata AlinkFounder

/

Name: Saas UI
Status

Less boilerplate
build with speed.

Saas UI ships with an extensive set of foundational and advanced components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility.

Try it out:

import * as React from 'react'
import { FormDialog, Field } from '@saas-ui/react'

interface CreateProjectInputs {
  name: string
}

export const CreateProject = (props) => {
  return (
    <FormDialog<CreateProjectInputs>
      title="Create project"
      defaultValues={{
        name: '',
      }}
      {...props}
    >
        <Field
          name="name"
          label="Name"
          help="Choose a cool name for this project"
          rules={{ required: 'Please enter a name' }}
        />
    </FormDialog>
  )
}

Make it yours.

Saas UI is built on top of Chakra UI, all components are built with the same excellent design principles. Effortlessly compose and customize components directly through CSS-in-JS style props or by creating a custom theme.

<Banner
  bg={useColorModeValue('white', 'gray.900')}
  colorScheme="purple"
  backgroundClip="padding-box"
  borderRadius="full"
  border="2px solid transparent"
  position="relative"
  py="2"
  px="3"
  cursor="pointer"
  overflow="visible"
  transitionProperty="common"
  transitionDuration="normal"
  boxShadow="lg"
  _before={{
    content: `""`,
    position: 'absolute',
    zIndex: -1,
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
    borderRadius: 'inherit',
    margin: '-2px',
    bgGradient: 'linear(to-r, purple.500, cyan.500)',
  }}
  _hover={{
    boxShadow: 'sm',
  }}
>
  <BannerIcon boxSize="1" />
  <BannerContent fontSize="sm">
    <BannerTitle>Pre-order Saas UI Pro now!</BannerTitle>
    <BannerDescription display={{ base: 'none', md: 'block' }}>
      50% discount for early adopters.
    </BannerDescription>
  </BannerContent>
  <BannerCloseButton position="absolute" top="2" right="4" />
</Banner>

export default {
  variants: {
    gradient: (props) => {
      return {
        container: {
          background: mode('white', 'gray.900')(props),
          backgroundClip: 'padding-box',
          borderRadius: 'full',
          border: '2px solid transparent',
          position: 'relative',
          py: 2,
          px: 2,
          cursor: 'pointer',
          overflow: 'visible',
          transitionProperty: 'common',
          transitionDuration: 'normal',
          boxShadow: 'lg'
          _before: {
            content: '""',
            position: 'absolute',
            zIndex: -1,
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
            borderRadius: 'inherit',
            margin: '-2px',
            bgGradient: 'linear(to-r, purple.500, cyan.500)'
          }
          _hover: {
            boxShadow: 'sm'
          }
        },
        icon: {
          boxSize: '1'
        },
        content: {
          fontSize: 'sm'
        },
        description: {
          display: { base: 'none', md: 'block' }
        },
        close: {
          position: 'absolute',
          top: 2,
          right: 4
        }
      }
    }
  }
}

Core components

Get started for free with 30+ open source components. Including authentication screens with Clerk, Supabase and Magic. Fully functional forms with React Hook Form. Data tables with React Table.

Read documentation

yarn add @saas-ui/react

Solid foundations

We don't like to re-invent the wheel, neither should you. We selected the most productive and established tools in the scene and built Saas UI on top of it.

Including Chakra UI, React Hook Form, React Table, React Query, Recharts, and more...

Saas UI is the ONLY template out there that does the code structure that I think can scale 😄

Start your next idea two steps ahead

We take care of all your basic frontend needs, so you can start building functionality that makes your product unique.

authentication

navigation

crud

settings

multi-tenancy

layouts

billing

a11y testing

server-side rendering

documentation

onboarding

storybooks

theming

upselling

unit testing

feature flags

responsiveness

Plays well with others

Saas UI is backend agnostic and works with the framework
or starter pack that you love.

Next.js Blitz.js RedwoodJS Supabase

As a Frontend dev, I've spent countless hours creating the same UI components over and over again for numerous products. Saas UI finally put an end to that with a component library that is ready to be integrated into a world-class SaaS app on Day 1. Highly recommended for any new product you're building!

Building SaaS products requires you to be a generalist on many fronts. However many developers aren't very design savvy and vice versa.

SaaS UI tries to fill this gap by giving developers an extensive set of beautifully crafted components built on best in class tools. While on the same time serve as a great foundation for designers to create their brand.

With SaaS UI you'll save hundreds of hours building essential functionaly for your product. Time that you can use to validate new ideas, find your perfect product market fit and build functionality that makes your product unique.

Eelco Wiersma

Founder Saas UI

Not your standard
dashboard template.

Saas UI Pro includes everything you need to build frontends that scale.
Use it as a template for your next product or foundation for your design system.

Components.

All premium components are available on a private NPM registery, no more copy pasting and always up-to-date.

Starterkits.

Example apps in Next.JS, Electron. Including authentication, billing, example pages, everything you need to get started FAST.

Documentation.

Extensively documented, including storybooks, best practices, use-cases and examples.

Onboarding.

Add user onboarding flows, like tours, hints and inline documentation without breaking a sweat.

Feature flags.

Implement feature toggles for your billing plans with easy to use hooks. Connect Flagsmith, or other remote config services once you're ready.

Upselling.

Components and hooks for upgrade flows designed to make upgrading inside your app frictionless.

Themes.

Includes multiple themes with darkmode support, always have the perfect starting point for your next project.

Generators.

Extend your design system while maintaininig code quality and consistency with build-in generators.

Monorepo.

All code is available as packages in a high-performance Turborepo, you have full control to modify and adjust it to your workflow.

Image showing the Saas UI billing settings

Loved by developers and designers

“Amazingly well thought-out set of components. I snagged them and have been able to create beautiful and functional UI super quick! This filter UI is some of my favorite 🤤”

“In order to be able to build beautiful portals in an efficient way, we were we looking for a turnkey solution, with enough flexibility. SaaS UI is exactly what we were looking for. Eelco is very thoughtful. We had factored in that early adopting comes with some risk - but so far all any issues are quickly remedied and there are almost weekly new useful features for us!”

“Imagine a well thought out SaaS UI with super cool integrations like @HookForm @chakra_ui and @date_fns that power the whole thing! Like WAT?!”

Pricing for every stage

Pay once and get life-time access to our high quality components.

Open Source

Basic components, perfect to get started.

Free forever

MIT License

Authentication (Clerk/Supabase/Magic)

Forms (react-hook-form)

Modals manager

Hotkeys

Web3 components

And much more...

Bootstrap

Complete frontend stack for bootstrappers and small teams.

€199,-

€99,-

One developer

Unlimited projects

Advanced components

Multiple themes

Next.js and Electron boilerplates

Private discord community

1 year of updates

Private beta access

Startup

Unlimited license for growing teams.

€999,-

€499,-

Unlimited developers

Unlimited projects

Everything from Bootstrap

1 year of updates

Private beta access

Membership

Limited access membership for teams that want to get moving fast.

Starting at

€2000,-

/ month

Custom component development

Help with implementation

Project setup

Hands-on support

VAT may be applicable depending on your location.

Stay up to date

Not ready to pre-order yet? Leave your details and we'll keep you informed.

Frequently asked questions

How many products can I use Saas UI Pro for?: The single license can be used for unlimited self hosted SaaS products or internal tools and maximum one client project. You can buy as many licenses as you need.
The unlimited license does not have any restrictions.

Can I use Saas UI Pro for client work?: Yes, that's totally up to you, as long as it fits the license you purchase.

Can I use Saas UI Pro for Open Source projects?: No currently not. A large part of Saas UI is already released under MIT license. We try to give back to the community as much as possible.

Does Saas UI include Figma, Sketch or other design files?: No, Saas UI does not include any design assets. Maintaining design resources costs a lot of extra effort. We believe small teams can move much faster by designing directly in code, with help of Storybooks.

Does Saas UI have a Javascript version?: No, we believe Typescript is the way to go in order to produce highly productive and qualitative code that scales.

What does 'lifetime access' mean?: Saas UI Pro is a one-time purchase, with no recurring subscription. You will have access to all assets of the Saas UI library forever.

What does '1 year of updates' include?: We'll add new components and improvements to the library as we get new ideas and feedback, you will receive these updates during the first year. After that you can renew your license for a reduced fee.

We might release different stacks, for example for Vue and backends, these will be sold seperately.

I'm not satisfied, can I get my money back?: Yeah, no hard feelings. Saas UI is opinionated and might not suit your style, let us know within 14 days of your purchase and we'll refund your money.

Do you offer technical support?: Once you sign up you get access to our Discord community, where you can ask questions, report bugs or feature requests and get help from other customers.

If you require more specialised support or consultancy contact us at hello@saas-ui.dev

Build intuitive apps that your customers will love

Accessible

Themable

Composable

Productive

Github

Less boilerplate
build with speed.

Make it yours.

Core components

Solid foundations

Tien Thinh

Start your next idea two steps ahead

Plays well with others

Sukhpal Saini

Building SaaS products requires you to be a generalist on many fronts. However many developers aren't very design savvy and vice versa.

Not your standard
dashboard template.

Components.

Starterkits.

Documentation.

Onboarding.

Feature flags.

Upselling.

Themes.

Generators.

Monorepo.

Loved by developers and designers

Makenna Smutz

Milan van Schaik

@moshyfawn

Pricing for every stage

Open Source

Bootstrap

Startup

Membership

Stay up to date

Frequently asked questions

.css-xi606m{text-align:center;}Build intuitive apps that your customers will love

Accessible

Themable

Composable

Productive

Github

Less boilerplate build with speed.

Make it yours.

Core components

Solid foundations

Tien Thinh

Start your next idea two steps ahead

Plays well with others

Sukhpal Saini

Building SaaS products requires you to be a generalist on many fronts. However many developers aren't very design savvy and vice versa.

Components.

Starterkits.

Documentation.

Onboarding.

Feature flags.

Upselling.

Themes.

Generators.

Monorepo.

Loved by developers and designers

Makenna Smutz

Milan van Schaik

@moshyfawn

Pricing for every stage

Open Source

Bootstrap

Startup

Membership

Stay up to date

Frequently asked questions

Build intuitive apps that your customers will love

Less boilerplate
build with speed.