Skip to content
Saas UI
HomeFeatures

Themes

New!
PricingDocumentationBuy Pro

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

Screenshot of a ListPage in Saas UI Pro

Used by indie founders and startups worldwide

  • Polypane

  • You Got Bud

  • Startec logo
AmountName
30+Open Source Components
Renata AlinkFounder
/
1

Personal information

2

Account

Name
Saas UI
Status

Github

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.

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>

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...

Tien Thinh

@turbothinh
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.

    authenticationnavigationcrudsettingsmulti-tenancylayoutsbillinga11y testingserver-side renderingdocumentationonboardingstorybooksthemingupsellingunit testingfeature flagsmobileuser-profilesdata-fetchingssrsubscriptions

Plays well with others

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

Next.jsBlitz.jsRedwoodJSSupabase

Sukhpal Saini

saasbase.dev (Ex-IBM)

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

Loved by developers and designers

Makenna Smutz

Founder - Heron

“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 🤤”

Milan van Schaik

CTO - CultureKit

“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!”

@moshyfawn

Software Engineer - React Hook Form

“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?!”

Pro license

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 dashboard
Image showing the Saas UI billing settings

The React component library for startups.

Built by Eelco Wiersma