Build intuitive apps that your customers will love
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 |
- Name
- Saas UI
- Status
Github
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}><Fieldname="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.
<Bannerbg={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 documentationyarn 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
@turbothinhStart 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 flagsresponsiveness
Plays well with others
Saas UI is backend agnostic and works with the framework
or starter pack that you love.
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.
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.
Loved by developers and designers
Milan van Schaik
CTO - CultureKit
Pricing for every stage
Open Source
MIT License
Authentication (Clerk/Supabase/Magic)
Forms (react-hook-form)
Modals manager
Hotkeys
Web3 components
And much more...
Bootstrap
€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
€999,-
€499,-
Unlimited developers
Unlimited projects
Everything from Bootstrap
1 year of updates
Private beta access
Membership
Membership
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